linear-react-components-ui 1.1.27-rc.0 → 2.0.0-beta.0

package/lib/inputs/period/index.js

@@ -1,544 +1,298 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-require("../../assets/styles/periodpicker.scss");
-var _react = _interopRequireWildcard(require("react"));
-var _moment = _interopRequireDefault(require("moment"));
-var _PeriodList = _interopRequireDefault(require("./PeriodList"));
-var _BaseMask = _interopRequireDefault(require("../mask/BaseMask"));
-var _Dropdown = _interopRequireDefault(require("./Dropdown"));
-var _calendar = _interopRequireDefault(require("../../calendar"));
-var _buttons = _interopRequireDefault(require("../../buttons"));
-var _icons = _interopRequireDefault(require("../../icons"));
-var _Dialog = _interopRequireDefault(require("./Dialog"));
-var _hint = _interopRequireDefault(require("../../hint"));
-var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
-var helperBase = _interopRequireWildcard(require("../base/helpers"));
-var _errorMessage = require("../errorMessage");
-var _textContent = _interopRequireDefault(require("../../textContent"));
-var _popover = _interopRequireDefault(require("../../popover"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-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) { _defineProperty(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; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-const PeriodPicker = props => {
-  const {
-    showButtonOpen = true,
-    openOnFocus = true,
-    shouldCloseOnSelect = true,
-    calendarColorStyle,
-    showCalendarInDialog = false,
-    dialogSize = {
-      width: '350px',
-      height: '350px'
-    },
-    hint,
-    hintPosition = 'below',
-    themePopover = 'light',
-    popoverAlign = 'left',
-    gridLayout
-  } = props;
-  const idValueInitial = (0, _react.useId)();
-  const idValueFinal = (0, _react.useId)();
-  const [valueInitial, setValueInitial] = (0, _react.useState)(props.value && (0, _moment.default)(props.value.initial, 'DD/MM/YYYY'));
-  const [valueFinal, setValueFinal] = (0, _react.useState)(props.value && (0, _moment.default)(props.value.final, 'DD/MM/YYYY'));
-  const [valuePeriodSelection, setValuePeriodSelection] = (0, _react.useState)('week');
-  const [showCalendarValueInitial, setShowCalendarValueInitial] = (0, _react.useState)(false);
-  const [showCalendarValueFinal, setShowCalendarValueFinal] = (0, _react.useState)(false);
-  const [showPeriodSelection, setShowPeriodSelection] = (0, _react.useState)(false);
-  const [inputDimensions, setInputDimensions] = (0, _react.useState)();
-  const [onDenied, setOnDenied] = (0, _react.useState)();
-  const [currentTypeDate, setCurrentTypeDate] = (0, _react.useState)('valueInitial');
-  const wrapperBaseInputPeriodRef = (0, _react.useRef)(null);
-  const inputContainerRef = (0, _react.useRef)(null);
-  const inputInitialRef = (0, _react.useRef)(null);
-  const buttonOpenRef = (0, _react.useRef)(null);
-  const currentDateButtonRef = (0, _react.useRef)();
-  const buttonSelectPeriodRef = (0, _react.useRef)(null);
-  const dropdownCalendarContainer = (0, _react.useRef)(null);
-  const inputFinalRef = (0, _react.useRef)(null);
-  const calendarContainerRef = (0, _react.useRef)(null);
-  const onScreenResize = () => {
-    var _inputContainerRef$cu;
-    setInputDimensions(inputContainerRef === null || inputContainerRef === void 0 ? void 0 : (_inputContainerRef$cu = inputContainerRef.current) === null || _inputContainerRef$cu === void 0 ? void 0 : _inputContainerRef$cu.getBoundingClientRect());
-  };
-  const onBlurWithoutWrapper = event => {
-    var _wrapperBaseInputPeri;
-    const focusOnAnotherField = !((_wrapperBaseInputPeri = wrapperBaseInputPeriodRef.current) !== null && _wrapperBaseInputPeri !== void 0 && _wrapperBaseInputPeri.contains(event.relatedTarget));
-    if (!showCalendarInDialog && showCalendarValueInitial && focusOnAnotherField) {
-      setShowCalendarValueInitial(false);
-    }
-    if (!showCalendarInDialog && showCalendarValueFinal && focusOnAnotherField) {
-      setShowCalendarValueFinal(false);
-    }
-  };
-  const onKeyDownPress = event => {
-    const {
-      target
-    } = event;
-    const targetElement = target;
-    if (calendarContainerRef.current && event && event.key && event.key === 'Escape') {
-      event.preventDefault();
-      targetElement.focus();
-      if (showCalendarValueInitial) {
-        if (targetElement.id !== 'valueInitial') {
-          var _inputInitialRef$curr;
-          (_inputInitialRef$curr = inputInitialRef.current) === null || _inputInitialRef$curr === void 0 ? void 0 : _inputInitialRef$curr.focus();
-        }
-        setShowCalendarValueInitial(false);
-      }
-      if (showCalendarValueFinal) {
-        if (targetElement.id !== 'valueFinal') {
-          var _inputFinalRef$curren;
-          (_inputFinalRef$curren = inputFinalRef.current) === null || _inputFinalRef$curren === void 0 ? void 0 : _inputFinalRef$curren.focus();
-        }
-        setShowCalendarValueFinal(false);
-      }
-      if (showPeriodSelection) {
-        var _inputFinalRef$curren2;
-        setShowPeriodSelection(false);
-        (_inputFinalRef$curren2 = inputFinalRef.current) === null || _inputFinalRef$curren2 === void 0 ? void 0 : _inputFinalRef$curren2.focus();
-        setShowCalendarValueFinal(false);
-      }
-    }
-    event.stopPropagation();
-  };
-  const keepPositionCalendarByScroll = () => {
-    var _inputContainerRef$cu2;
-    const inputDateDimensions = (_inputContainerRef$cu2 = inputContainerRef.current) === null || _inputContainerRef$cu2 === void 0 ? void 0 : _inputContainerRef$cu2.getBoundingClientRect();
-    const positionTop = inputDateDimensions && inputDateDimensions.bottom;
-    if (dropdownCalendarContainer && dropdownCalendarContainer.current && inputDateDimensions) {
-      dropdownCalendarContainer.current.style.top = String(positionTop).concat('px');
-    }
-  };
-  const openCalendar = calendarName => {
-    if (calendarName === 'valueInitial') {
-      setCurrentTypeDate('valueInitial');
-      setShowCalendarValueFinal(false);
-      if (!showCalendarValueInitial) {
-        var _inputInitialRef$curr2;
-        (_inputInitialRef$curr2 = inputInitialRef.current) === null || _inputInitialRef$curr2 === void 0 ? void 0 : _inputInitialRef$curr2.focus();
-        if (showCalendarInDialog) {
-          setTimeout(() => {
-            var _currentDateButtonRef;
-            (_currentDateButtonRef = currentDateButtonRef.current) === null || _currentDateButtonRef === void 0 ? void 0 : _currentDateButtonRef.focus();
-          }, 100);
-        }
-        setShowCalendarValueInitial(true);
-      }
-    }
-    if (calendarName === 'valueFinal') {
-      setCurrentTypeDate('valueFinal');
-      setShowCalendarValueInitial(false);
-      if (!showCalendarValueFinal) {
-        var _inputFinalRef$curren3;
-        (_inputFinalRef$curren3 = inputFinalRef.current) === null || _inputFinalRef$curren3 === void 0 ? void 0 : _inputFinalRef$curren3.focus();
-        if (showCalendarInDialog) {
-          setTimeout(() => {
-            var _currentDateButtonRef2;
-            (_currentDateButtonRef2 = currentDateButtonRef.current) === null || _currentDateButtonRef2 === void 0 ? void 0 : _currentDateButtonRef2.focus();
-          }, 100);
-        }
-        setShowCalendarValueFinal(true);
-      }
-    }
-    if (inputContainerRef.current) {
-      setInputDimensions(inputContainerRef.current.getBoundingClientRect());
-    }
-  };
-  const closeCalendar = calendarName => {
-    if (calendarName === 'valueInitial') {
-      var _inputInitialRef$curr3;
-      (_inputInitialRef$curr3 = inputInitialRef.current) === null || _inputInitialRef$curr3 === void 0 ? void 0 : _inputInitialRef$curr3.focus();
-    }
-    if (calendarName === 'valueFinal') {
-      var _inputFinalRef$curren4;
-      (_inputFinalRef$curren4 = inputFinalRef.current) === null || _inputFinalRef$curren4 === void 0 ? void 0 : _inputFinalRef$curren4.focus();
-    }
-    setShowCalendarValueInitial(false);
-    setShowCalendarValueFinal(false);
-  };
-  const onDateChange = date => {
-    var _props$onChange;
-    const initial = date.initial ? date.initial.format('YYYY-MM-DD') : '';
-    const final = date.final ? date.final.format('YYYY-MM-DD') : '';
-    props === null || props === void 0 ? void 0 : (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, undefined, '', {
-      initial,
-      final
-    });
-  };
-  const onCloseDateDialog = calendarName => {
-    setTimeout(() => {
-      if (calendarName === 'valueInitial') {
-        var _inputInitialRef$curr4;
-        (_inputInitialRef$curr4 = inputInitialRef.current) === null || _inputInitialRef$curr4 === void 0 ? void 0 : _inputInitialRef$curr4.focus();
-        setShowCalendarValueInitial(false);
-      }
-      if (calendarName === 'valueFinal') {
-        var _inputFinalRef$curren5;
-        (_inputFinalRef$curren5 = inputFinalRef.current) === null || _inputFinalRef$curren5 === void 0 ? void 0 : _inputFinalRef$curren5.focus();
-        setShowCalendarValueFinal(false);
-      }
-      if (calendarName === 'periodSelection') {
-        var _inputFinalRef$curren6;
-        setShowPeriodSelection(false);
-        (_inputFinalRef$curren6 = inputFinalRef.current) === null || _inputFinalRef$curren6 === void 0 ? void 0 : _inputFinalRef$curren6.focus();
-        setShowCalendarValueFinal(false);
-      }
-    }, 100);
-  };
-  const onInputFocus = e => {
-    const {
-      name
-    } = e.target;
-    if (openOnFocus) openCalendar(name);
-    if (props.onFocus) props.onFocus(e);
-  };
-  const onInputBlur = e => {
-    if (props.onBlur) props.onBlur(e);
-  };
-  const onInputChange = event => {
-    if (event) {
-      const {
-        name: changingAux,
-        value
-      } = event.target;
-      if (String(value).trim().length === 0) {
-        if (changingAux === 'valueInitial') {
-          setValueInitial(undefined);
-        } else {
-          setValueFinal(undefined);
-        }
-      }
-    }
-  };
-  const setValue = function (event, value) {
-    var _inputInitialRef$curr5, _inputFinalRef$curren7;
-    let shouldOpenDropdown = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-    const valueDateName = event ? event.target.name : '';
-    const dateObj = (0, _moment.default)(value, 'DD/MM/YYYY');
-    if (showCalendarValueInitial) (_inputInitialRef$curr5 = inputInitialRef.current) === null || _inputInitialRef$curr5 === void 0 ? void 0 : _inputInitialRef$curr5.focus();
-    if (showCalendarValueFinal) (_inputFinalRef$curren7 = inputFinalRef.current) === null || _inputFinalRef$curren7 === void 0 ? void 0 : _inputFinalRef$curren7.focus();
-    if (valueDateName === 'valueInitial') {
-      setValueInitial(dateObj);
-      onDateChange({
-        initial: dateObj,
-        final: valueFinal
-      });
-    } else {
-      setValueFinal(dateObj);
-      onDateChange({
-        initial: valueInitial,
-        final: dateObj
-      });
-    }
-    if (valueDateName === 'valueInitial' && !valueFinal && shouldOpenDropdown) {
-      var _inputFinalRef$curren8;
-      (_inputFinalRef$curren8 = inputFinalRef.current) === null || _inputFinalRef$curren8 === void 0 ? void 0 : _inputFinalRef$curren8.focus();
-      setTimeout(() => setShowCalendarValueFinal(true), 100);
-    }
-    if (shouldCloseOnSelect) {
-      setShowCalendarValueInitial(false);
-      setShowCalendarValueFinal(false);
-    }
-  };
-  const shouldDisable = () => {
-    const {
-      disabled
-    } = props;
-    return disabled || onDenied && (onDenied.disabled || onDenied.hideContent);
-  };
-  const getButtonOpen = (0, _react.useCallback)(() => {
-    if (!showButtonOpen) return null;
-    return /*#__PURE__*/_react.default.createElement(_buttons.default, {
-      key: "button-open",
-      boxShadow: false,
-      disabled: shouldDisable(),
-      customClass: "calendar-button",
-      icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
-        name: "calendar"
-      }),
-      onClick: () => {
-        if (showCalendarValueFinal || showCalendarValueInitial) {
-          closeCalendar(currentTypeDate);
-        } else {
-          openCalendar(currentTypeDate);
-        }
-      },
-      tabIndex: -1,
-      targetRef: ref => {
-        buttonOpenRef.current = ref;
-      }
-    });
-  }, [showCalendarValueFinal, showCalendarValueInitial]);
-  const getPeriodSelection = (valuePeriodSelectionAux, setPeriodDates) => /*#__PURE__*/_react.default.createElement(_PeriodList.default, {
-    selected: valuePeriodSelectionAux,
-    handleOnSelect: setPeriodDates
-  });
-  const openPeriodSelecion = () => {
-    setShowCalendarValueFinal(false);
-    setShowCalendarValueInitial(false);
-    setShowPeriodSelection(true);
-    if (inputContainerRef.current) {
-      setInputDimensions(inputContainerRef.current.getBoundingClientRect());
-    }
-  };
-  const closePeriodSelection = () => {
-    var _inputFinalRef$curren9;
-    setShowPeriodSelection(false);
-    (_inputFinalRef$curren9 = inputFinalRef.current) === null || _inputFinalRef$curren9 === void 0 ? void 0 : _inputFinalRef$curren9.focus();
-    setShowCalendarValueFinal(false);
-  };
-  const getButtonSelectPeriod = (0, _react.useCallback)(() => {
-    return /*#__PURE__*/_react.default.createElement(_buttons.default, {
-      key: "button-select-period",
-      disabled: shouldDisable(),
-      tabIndex: -1,
-      customClass: "calendar-button",
-      icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
-        name: "more1"
-      }),
-      onBlur: () => setTimeout(() => setShowPeriodSelection(false), 100),
-      onClick: () => !showPeriodSelection ? openPeriodSelecion() : closePeriodSelection(),
-      targetRef: ref => {
-        buttonSelectPeriodRef.current = ref;
-      }
-    });
-  }, [showPeriodSelection]);
-  const getCalendar = (value, calendarColorStyleCalendar, valueDateName) => /*#__PURE__*/_react.default.createElement(_calendar.default, {
-    colorStyle: calendarColorStyleCalendar,
-    currentDate: value !== undefined ? (0, _moment.default)(value) : (0, _moment.default)(),
-    calendarContainer: ref => {
-      calendarContainerRef.current = ref;
-    },
-    onDateChange: date => setValue({
-      target: {
-        name: valueDateName
-      }
-    }, date),
-    currentDateButton: buttonElement => currentDateButtonRef.current = buttonElement
-  });
-  const setPeriodDates = (selected, dates) => {
-    var _inputFinalRef$curren0;
-    if (selected === 'custom') {
-      var _inputInitialRef$curr6;
-      (_inputInitialRef$curr6 = inputInitialRef.current) === null || _inputInitialRef$curr6 === void 0 ? void 0 : _inputInitialRef$curr6.focus();
-      setValuePeriodSelection(selected);
-      setShowPeriodSelection(false);
-      return;
-    }
-    setValuePeriodSelection(selected);
-    if (dates) {
-      setValueInitial(dates[0]);
-      setValueFinal(dates[1]);
-    }
-    if (shouldCloseOnSelect) {
-      setShowPeriodSelection(false);
-    }
-    (_inputFinalRef$curren0 = inputFinalRef.current) === null || _inputFinalRef$curren0 === void 0 ? void 0 : _inputFinalRef$curren0.focus();
-    setShowCalendarValueFinal(false);
-  };
-  const getCalendarInitial = () => {
-    if (onDenied && onDenied.readOnly) return null;
-    if (calendarContainerRef && calendarContainerRef.current) calendarContainerRef.current.id = 'valueInitial';
-    if (showCalendarInDialog) {
-      return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
-        handlerClose: () => onCloseDateDialog('valueInitial'),
-        dialogSize: dialogSize,
-        onOpenChange: setShowCalendarValueInitial
-      }, getCalendar(valueInitial, calendarColorStyle, 'valueInitial'));
-    }
-    return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-      containerRef: wrapperBaseInputPeriodRef,
-      showButtonOpen: showButtonOpen,
-      inputDimensions: inputDimensions,
-      dropdownRef: el => {
-        dropdownCalendarContainer.current = el;
-      }
-    }, getCalendar(valueInitial, calendarColorStyle, 'valueInitial'));
-  };
-  const getCalendarFinal = () => {
-    if (onDenied && onDenied.readOnly) return null;
-    if (calendarContainerRef && calendarContainerRef.current) calendarContainerRef.current.id = 'valueFinal';
-    if (showCalendarInDialog) {
-      return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
-        handlerClose: () => onCloseDateDialog('valueFinal'),
-        dialogSize: dialogSize,
-        onOpenChange: setShowCalendarValueFinal
-      }, getCalendar(valueFinal, calendarColorStyle, 'valueFinal'));
-    }
-    return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-      containerRef: wrapperBaseInputPeriodRef,
-      showButtonOpen: showButtonOpen,
-      inputDimensions: inputDimensions,
-      dropdownRef: el => {
-        dropdownCalendarContainer.current = el;
-      }
-    }, getCalendar(valueFinal, calendarColorStyle, 'valueFinal'));
-  };
-  const getPeriodOfDatesSelection = () => {
-    if (showCalendarInDialog) {
-      return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
-        handlerClose: () => onCloseDateDialog('periodSelection'),
-        dialogSize: dialogSize,
-        onOpenChange: setShowPeriodSelection
-      }, getPeriodSelection(valuePeriodSelection, setPeriodDates));
-    }
-    return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-      containerRef: wrapperBaseInputPeriodRef,
-      showButtonOpen: showButtonOpen,
-      inputDimensions: inputDimensions,
-      dropdownRef: el => {
-        dropdownCalendarContainer.current = el;
-      }
-    }, getPeriodSelection(valuePeriodSelection, setPeriodDates));
-  };
-  (0, _react.useEffect)(() => {
-    var _document$getElementB;
-    window.addEventListener('resize', onScreenResize);
-    document.addEventListener('scroll', keepPositionCalendarByScroll);
-    (_document$getElementB = document.getElementById('modal-dialog-content')) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.addEventListener('scroll', keepPositionCalendarByScroll);
-    if (inputContainerRef.current) onScreenResize();
-    if (inputInitialRef && inputInitialRef.current) inputInitialRef.current.id = idValueInitial;
-    if (inputFinalRef && inputFinalRef.current) inputFinalRef.current.id = idValueFinal;
-    return () => {
-      var _document$getElementB2;
-      window.removeEventListener('resize', onScreenResize);
-      document.removeEventListener('scroll', keepPositionCalendarByScroll);
-      (_document$getElementB2 = document.getElementById('modal-dialog-content')) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.removeEventListener('scroll', keepPositionCalendarByScroll);
-    };
-  }, []);
-  (0, _react.useEffect)(() => {
-    document.addEventListener('keydown', onKeyDownPress);
-    return () => {
-      document.removeEventListener('keydown', onKeyDownPress);
-    };
-  }, [showCalendarValueFinal, showCalendarValueInitial, showPeriodSelection, calendarContainerRef.current]);
-  (0, _react.useEffect)(() => {
-    if (valueFinal && valueInitial && (0, _moment.default)(valueFinal).isBefore((0, _moment.default)(valueInitial))) {
-      setValueInitial(valueFinal);
-      setValueFinal(valueInitial);
-    } else if (props.onChange) {
-      const initial = valueInitial ? valueInitial.format('YYYY-MM-DD') : '';
-      const final = valueFinal ? valueFinal.format('YYYY-MM-DD') : '';
-      props.onChange(undefined, '', {
-        initial,
-        final
-      });
-    }
-  }, [valueInitial, valueFinal]);
-  (0, _react.useEffect)(() => {
-    if (props.value && !((0, _moment.default)(props.value.initial).isSame(valueInitial) || (0, _moment.default)(props.value.final).isSame(valueFinal))) {
-      const {
-        initial: valueInitialProp,
-        final: valueFinalProp
-      } = props.value;
-      let newValueInitial;
-      let newValueFinal;
-      if ((0, _moment.default)(valueInitialProp, 'YYYY-MM-DD', true).isValid()) {
-        newValueInitial = (0, _moment.default)(valueInitialProp, 'YYYY-MM-DD');
-      }
-      if ((0, _moment.default)(valueFinalProp, 'YYYY-MM-DD', true).isValid()) {
-        newValueFinal = (0, _moment.default)(valueFinalProp, 'YYYY-MM-DD');
-      }
-      setValueInitial(newValueInitial);
-      setValueFinal(newValueFinal);
-    }
-  }, [props.value]);
-  if (onDenied && onDenied.unvisible) return null;
-  const component = () => /*#__PURE__*/_react.default.createElement("div", {
-    ref: wrapperBaseInputPeriodRef,
-    onBlur: onBlurWithoutWrapper,
-    className: "input-base-component datepicker-period-container"
-  }, props.label && /*#__PURE__*/_react.default.createElement("div", {
-    className: "labelcontainer"
-  }, /*#__PURE__*/_react.default.createElement(_textContent.default, {
-    required: props.required,
-    className: props.customClassForLabel,
-    labelUppercase: props.labelUppercase
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-content",
-    style: {
-      display: 'flex'
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "label ".concat(props.customClassForLabel, " ").concat(props.labelUppercase && ' -uppercase'),
-    style: {
-      alignSelf: 'center'
-    }
-  }, props.label, props.required && /*#__PURE__*/_react.default.createElement("span", {
-    className: "-requiredlabel"
-  }, "*"), !!hint && hintPosition === 'onLabelRight' && /*#__PURE__*/_react.default.createElement(_popover.default, {
-    theme: themePopover,
-    align: popoverAlign,
-    iconColor: "#03bde2",
-    customClass: "-hint",
-    style: {
-      margin: '0px 5px',
-      height: 'auto',
-      width: 20
-    }
-  }, hint))), /*#__PURE__*/_react.default.createElement(_textContent.default, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "periodpicker-component ".concat(helperBase.getInputWrapperClass(_objectSpread(_objectSpread({}, props), {}, {
-      value: !valueInitial ? '' : (0, _moment.default)(valueInitial).format('DD/MM/YYYY'),
-      disabled: shouldDisable()
-    }))),
-    ref: inputContainerRef
-  }, /*#__PURE__*/_react.default.createElement(_BaseMask.default, {
-    gridLayout: undefined,
-    permissionAttr: props.permissionAttr,
-    name: "valueInitial",
-    value: !valueInitial ? '' : (0, _moment.default)(valueInitial).format('DD/MM/YYYY'),
-    mask: "00/00/0000",
-    onComplete: e => {
-      setValue(e, e.target.value, true);
-    },
-    onFocus: onInputFocus,
-    onBlur: e => onInputBlur(e),
-    onChange: onInputChange,
-    inputRef: el => {
-      inputInitialRef.current = el;
-    },
-    handlerSetOnDenied: denied => {
-      setOnDenied(denied);
-    },
-    required: props.required
-  }), /*#__PURE__*/_react.default.createElement(_icons.default, {
-    name: "arrow_right",
-    customClass: "separation_icon"
-  }), /*#__PURE__*/_react.default.createElement(_BaseMask.default, {
-    gridLayout: undefined,
-    permissionAttr: props.permissionAttr,
-    name: "valueFinal",
-    value: !valueFinal ? '' : (0, _moment.default)(valueFinal).format('DD/MM/YYYY'),
-    mask: "00/00/0000",
-    onComplete: e => {
-      setValue(e, e.target.value, true);
-    },
-    onFocus: onInputFocus,
-    onBlur: e => onInputBlur(e),
-    onChange: onInputChange,
-    inputRef: el => {
-      inputFinalRef.current = el;
-    },
-    handlerSetOnDenied: denied => setOnDenied(denied),
-    required: props.required
-  }), getButtonOpen(), getButtonSelectPeriod()), showCalendarValueInitial && getCalendarInitial(), showCalendarValueFinal && getCalendarFinal(), showPeriodSelection && getPeriodOfDatesSelection(), /*#__PURE__*/_react.default.createElement(_hint.default, {
-    visible: !!hint && hintPosition === 'below',
-    customClass: "hint",
-    description: hint
-  }), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
-    messages: props.errorMessages
-  }));
-  return !gridLayout ? component() : /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
-    customClass: "-withinput",
-    cols: gridLayout
-  }, component());
+import e from "../../gridlayout/index.js";
+import t from "../../icons/index.js";
+import n from "../../buttons/index.js";
+import { ErrorMessage as r } from "../errorMessage/index.js";
+import i from "../../textContent/index.js";
+import ee from "../../popover/index.js";
+import te from "../../hint/index.js";
+import a from "../../node_modules/moment/dist/moment.js";
+import ne from "../../calendar/index.js";
+import { getInputWrapperClass as re } from "../base/helpers.js";
+import o from "../mask/BaseMask.js";
+import '../../assets/styles/periodpicker.css';/* empty css                               */
+import ie from "./PeriodList.js";
+import s from "./Dropdown.js";
+import c from "./Dialog.js";
+import { useCallback as l, useEffect as u, useId as ae, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/lib/inputs/period/index.tsx
+var h = (h) => {
+	let { showButtonOpen: g = !0, openOnFocus: oe = !0, shouldCloseOnSelect: _ = !0, calendarColorStyle: v, showCalendarInDialog: y = !1, dialogSize: b = {
+		width: "350px",
+		height: "350px"
+	}, hint: x, hintPosition: se = "below", themePopover: ce = "light", popoverAlign: le = "left", gridLayout: ue } = h, de = ae(), fe = ae(), [S, C] = f(h.value && a(h.value.initial, "DD/MM/YYYY")), [w, T] = f(h.value && a(h.value.final, "DD/MM/YYYY")), [E, D] = f("week"), [O, k] = f(!1), [A, j] = f(!1), [M, N] = f(!1), [P, F] = f(), [I, L] = f(), [R, z] = f("valueInitial"), B = d(null), V = d(null), H = d(null), pe = d(null), U = d(null), me = d(null), W = d(null), G = d(null), K = d(null), q = () => {
+		F(V?.current?.getBoundingClientRect());
+	}, he = (e) => {
+		let t = !B.current?.contains(e.relatedTarget);
+		!y && O && t && k(!1), !y && A && t && j(!1);
+	}, ge = (e) => {
+		let { target: t } = e, n = t;
+		K.current && e && e.key && e.key === "Escape" && (e.preventDefault(), n.focus(), O && (n.id !== "valueInitial" && H.current?.focus(), k(!1)), A && (n.id !== "valueFinal" && G.current?.focus(), j(!1)), M && (N(!1), G.current?.focus(), j(!1))), e.stopPropagation();
+	}, J = () => {
+		let e = V.current?.getBoundingClientRect(), t = e && e.bottom;
+		W && W.current && e && (W.current.style.top = String(t).concat("px"));
+	}, _e = (e) => {
+		e === "valueInitial" && (z("valueInitial"), j(!1), O || (H.current?.focus(), y && setTimeout(() => {
+			U.current?.focus();
+		}, 100), k(!0))), e === "valueFinal" && (z("valueFinal"), k(!1), A || (G.current?.focus(), y && setTimeout(() => {
+			U.current?.focus();
+		}, 100), j(!0))), V.current && F(V.current.getBoundingClientRect());
+	}, ve = (e) => {
+		e === "valueInitial" && H.current?.focus(), e === "valueFinal" && G.current?.focus(), k(!1), j(!1);
+	}, ye = (e) => {
+		let t = e.initial ? e.initial.format("YYYY-MM-DD") : "", n = e.final ? e.final.format("YYYY-MM-DD") : "";
+		h?.onChange?.(void 0, "", {
+			initial: t,
+			final: n
+		});
+	}, Y = (e) => {
+		setTimeout(() => {
+			e === "valueInitial" && (H.current?.focus(), k(!1)), e === "valueFinal" && (G.current?.focus(), j(!1)), e === "periodSelection" && (N(!1), G.current?.focus(), j(!1));
+		}, 100);
+	}, be = (e) => {
+		let { name: t } = e.target;
+		oe && _e(t), h.onFocus && h.onFocus(e);
+	}, xe = (e) => {
+		h.onBlur && h.onBlur(e);
+	}, Se = (e) => {
+		if (e) {
+			let { name: t, value: n } = e.target;
+			String(n).trim().length === 0 && (t === "valueInitial" ? C(void 0) : T(void 0));
+		}
+	}, X = (e, t, n = !0) => {
+		let r = e ? e.target.name : "", i = a(t, "DD/MM/YYYY");
+		O && H.current?.focus(), A && G.current?.focus(), r === "valueInitial" ? (C(i), ye({
+			initial: i,
+			final: w
+		})) : (T(i), ye({
+			initial: S,
+			final: i
+		})), r === "valueInitial" && !w && n && (G.current?.focus(), j(!0)), _ && (k(!1), j(!1));
+	}, Z = () => {
+		let { disabled: e } = h;
+		return e || I && (I.disabled || I.hideContent);
+	}, Ce = l(() => g ? /* @__PURE__ */ p(n, {
+		boxShadow: !1,
+		disabled: Z(),
+		customClass: "calendar-button",
+		icon: /* @__PURE__ */ p(t, { name: "calendar" }),
+		onClick: () => {
+			A || O ? ve(R) : _e(R);
+		},
+		tabIndex: -1,
+		targetRef: (e) => {
+			pe.current = e;
+		}
+	}, "button-open") : null, [A, O]), we = (e, t) => /* @__PURE__ */ p(ie, {
+		selected: e,
+		handleOnSelect: t
+	}), Te = () => {
+		j(!1), k(!1), N(!0), V.current && F(V.current.getBoundingClientRect());
+	}, Ee = () => {
+		N(!1), G.current?.focus(), j(!1);
+	}, De = l(() => /* @__PURE__ */ p(n, {
+		disabled: Z(),
+		tabIndex: -1,
+		customClass: "calendar-button",
+		icon: /* @__PURE__ */ p(t, { name: "more1" }),
+		onBlur: () => setTimeout(() => N(!1), 100),
+		onClick: () => M ? Ee() : Te(),
+		targetRef: (e) => {
+			me.current = e;
+		}
+	}, "button-select-period"), [M]), Q = (e, t, n) => /* @__PURE__ */ p(ne, {
+		colorStyle: t,
+		currentDate: e === void 0 ? a() : a(e),
+		calendarContainer: (e) => {
+			K.current = e;
+		},
+		onDateChange: (e) => X({ target: { name: n } }, e),
+		currentDateButton: (e) => U.current = e
+	}), Oe = (e, t) => {
+		if (e === "custom") {
+			H.current?.focus(), D(e), N(!1);
+			return;
+		}
+		D(e), t && (C(t[0]), T(t[1])), _ && N(!1), G.current?.focus(), j(!1);
+	}, ke = () => I && I.readOnly ? null : (K && K.current && (K.current.id = "valueInitial"), y ? /* @__PURE__ */ p(c, {
+		handlerClose: () => Y("valueInitial"),
+		dialogSize: b,
+		onOpenChange: k,
+		children: Q(S, v, "valueInitial")
+	}) : /* @__PURE__ */ p(s, {
+		containerRef: B,
+		showButtonOpen: g,
+		inputDimensions: P,
+		dropdownRef: (e) => {
+			W.current = e;
+		},
+		children: Q(S, v, "valueInitial")
+	})), Ae = () => I && I.readOnly ? null : (K && K.current && (K.current.id = "valueFinal"), y ? /* @__PURE__ */ p(c, {
+		handlerClose: () => Y("valueFinal"),
+		dialogSize: b,
+		onOpenChange: j,
+		children: Q(w, v, "valueFinal")
+	}) : /* @__PURE__ */ p(s, {
+		containerRef: B,
+		showButtonOpen: g,
+		inputDimensions: P,
+		dropdownRef: (e) => {
+			W.current = e;
+		},
+		children: Q(w, v, "valueFinal")
+	})), je = () => y ? /* @__PURE__ */ p(c, {
+		handlerClose: () => Y("periodSelection"),
+		dialogSize: b,
+		onOpenChange: N,
+		children: we(E, Oe)
+	}) : /* @__PURE__ */ p(s, {
+		containerRef: B,
+		showButtonOpen: g,
+		inputDimensions: P,
+		dropdownRef: (e) => {
+			W.current = e;
+		},
+		children: we(E, Oe)
+	});
+	if (u(() => (window.addEventListener("resize", q), document.addEventListener("scroll", J), document.getElementById("modal-dialog-content")?.addEventListener("scroll", J), V.current && q(), H && H.current && (H.current.id = de), G && G.current && (G.current.id = fe), () => {
+		window.removeEventListener("resize", q), document.removeEventListener("scroll", J), document.getElementById("modal-dialog-content")?.removeEventListener("scroll", J);
+	}), []), u(() => (document.addEventListener("keydown", ge), () => {
+		document.removeEventListener("keydown", ge);
+	}), [
+		A,
+		O,
+		M,
+		K.current
+	]), u(() => {
+		if (w && S && a(w).isBefore(a(S))) C(w), T(S);
+		else if (h.onChange) {
+			let e = S ? S.format("YYYY-MM-DD") : "", t = w ? w.format("YYYY-MM-DD") : "";
+			h.onChange(void 0, "", {
+				initial: e,
+				final: t
+			});
+		}
+	}, [S, w]), u(() => {
+		if (h.value && !(a(h.value.initial).isSame(S) || a(h.value.final).isSame(w))) {
+			let { initial: e, final: t } = h.value, n, r;
+			a(e, "YYYY-MM-DD", !0).isValid() && (n = a(e, "YYYY-MM-DD")), a(t, "YYYY-MM-DD", !0).isValid() && (r = a(t, "YYYY-MM-DD")), C(n), T(r);
+		}
+	}, [h.value]), I && I.unvisible) return null;
+	let $ = () => /* @__PURE__ */ m("div", {
+		ref: B,
+		onBlur: he,
+		className: "input-base-component datepicker-period-container",
+		children: [
+			h.label && /* @__PURE__ */ m("div", {
+				className: "labelcontainer",
+				children: [
+					/* @__PURE__ */ p(i, {
+						required: h.required,
+						className: h.customClassForLabel,
+						labelUppercase: h.labelUppercase
+					}),
+					/* @__PURE__ */ p("div", {
+						className: "text-content",
+						style: { display: "flex" },
+						children: /* @__PURE__ */ m("div", {
+							className: `label ${h.customClassForLabel} ${h.labelUppercase && " -uppercase"}`,
+							style: { alignSelf: "center" },
+							children: [
+								h.label,
+								h.required && /* @__PURE__ */ p("span", {
+									className: "-requiredlabel",
+									children: "*"
+								}),
+								!!x && se === "onLabelRight" && /* @__PURE__ */ p(ee, {
+									theme: ce,
+									align: le,
+									iconColor: "#03bde2",
+									customClass: "-hint",
+									style: {
+										margin: "0px 5px",
+										height: "auto",
+										width: 20
+									},
+									children: x
+								})
+							]
+						})
+					}),
+					/* @__PURE__ */ p(i, {})
+				]
+			}),
+			/* @__PURE__ */ m("div", {
+				className: `periodpicker-component ${re({
+					...h,
+					value: S ? a(S).format("DD/MM/YYYY") : "",
+					disabled: Z()
+				})}`,
+				ref: V,
+				children: [
+					/* @__PURE__ */ p(o, {
+						gridLayout: void 0,
+						permissionAttr: h.permissionAttr,
+						name: "valueInitial",
+						value: S ? a(S).format("DD/MM/YYYY") : "",
+						mask: "00/00/0000",
+						onComplete: (e) => {
+							X(e, e.target.value, !0);
+						},
+						onFocus: be,
+						onBlur: (e) => xe(e),
+						onChange: Se,
+						inputRef: (e) => {
+							H.current = e;
+						},
+						handlerSetOnDenied: (e) => {
+							L(e);
+						},
+						required: h.required
+					}),
+					/* @__PURE__ */ p(t, {
+						name: "arrow_right",
+						customClass: "separation_icon"
+					}),
+					/* @__PURE__ */ p(o, {
+						gridLayout: void 0,
+						permissionAttr: h.permissionAttr,
+						name: "valueFinal",
+						value: w ? a(w).format("DD/MM/YYYY") : "",
+						mask: "00/00/0000",
+						onComplete: (e) => {
+							X(e, e.target.value, !0);
+						},
+						onFocus: be,
+						onBlur: (e) => xe(e),
+						onChange: Se,
+						inputRef: (e) => {
+							G.current = e;
+						},
+						handlerSetOnDenied: (e) => L(e),
+						required: h.required
+					}),
+					Ce(),
+					De()
+				]
+			}),
+			O && ke(),
+			A && Ae(),
+			M && je(),
+			/* @__PURE__ */ p(te, {
+				visible: !!x && se === "below",
+				customClass: "hint",
+				description: x
+			}),
+			/* @__PURE__ */ p(r, { messages: h.errorMessages })
+		]
+	});
+	return ue ? /* @__PURE__ */ p(e, {
+		customClass: "-withinput",
+		cols: ue,
+		children: $()
+	}) : $();
 };
-var _default = exports.default = PeriodPicker;
+//#endregion
+export { h as default };
+
+//# sourceMappingURL=index.js.map