linear-react-components-ui 1.1.20-beta.31 → 1.1.20-beta.33

package/lib/inputs/period/Dropdown.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { IPeriodDropdownProps } from './types.js';
-import 'moment';
-import '../../@types/ColorStyles.js';
-import '../../@types/Period.js';
-import '../../@types/PermissionAttr.js';
-import '../base/types.js';
-import '../../@types/Align.js';
-import '../../internals/types.js';
-import '../../@types/Position.js';
-
-declare const Dropdown: (props: IPeriodDropdownProps) => React.ReactPortal;
-
-export { Dropdown as default };

package/lib/inputs/period/Dropdown.js

@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _helper = _interopRequireDefault(require("./helper"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const body = document.getElementsByTagName('body')[0];
-const Dropdown = props => {
-  const elementRef = (0, _react.useRef)(document.createElement('div'));
-  (0, _react.useEffect)(() => {
-    elementRef.current.className = 'datepicker-component';
-    elementRef.current.setAttribute('style', (0, _helper.default)(props));
-    body.appendChild(elementRef.current);
-    props.dropdownRef(elementRef.current);
-    return () => {
-      body.removeChild(elementRef.current);
-    };
-  }, []);
-  (0, _react.useEffect)(() => {
-    elementRef.current.setAttribute('style', (0, _helper.default)(props));
-  }, [props]);
-  return /*#__PURE__*/_reactDom.default.createPortal(props.children, elementRef.current);
-};
-var _default = exports.default = Dropdown;

package/lib/inputs/period/PeriodList.d.ts

@@ -1,14 +0,0 @@
-import { IPeriodListProps } from './types.js';
-import 'moment';
-import 'react';
-import '../../@types/ColorStyles.js';
-import '../../@types/Period.js';
-import '../../@types/PermissionAttr.js';
-import '../base/types.js';
-import '../../@types/Align.js';
-import '../../internals/types.js';
-import '../../@types/Position.js';
-
-declare const PeriodList: ({ selected, handleOnSelect }: IPeriodListProps) => JSX.Element;
-
-export { PeriodList as default };

package/lib/inputs/period/PeriodList.js

@@ -1,61 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _helper = require("./helper");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const periodOptions = [{
-  id: 'today',
-  label: 'Hoje'
-}, {
-  id: 'week',
-  label: 'Semana Atual'
-}, {
-  id: 'lastweek',
-  label: 'Última Semana'
-}, {
-  id: 'last15',
-  label: 'Últimos 15 dias'
-}, {
-  id: 'month',
-  label: 'Mês atual'
-}, {
-  id: 'lastmonth',
-  label: 'Último Mês'
-}, {
-  id: 'custom',
-  label: 'Customizar'
-}];
-const PeriodList = _ref => {
-  let {
-    selected,
-    handleOnSelect
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "dropdown-period"
-  }, periodOptions.map(item => {
-    const itemSelected = selected === item.id;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      role: "button",
-      tabIndex: -1,
-      onKeyDown: () => {},
-      key: `item-${item.id}`,
-      className: (0, _helper.getDropdownItemCssClass)(itemSelected),
-      onClick: () => {
-        const dates = item.id !== 'custom' ? (0, _helper.CalcDatesByPeriod)(item.id) : null;
-        handleOnSelect(item.id, dates);
-      }
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      role: "button",
-      className: "menubutton",
-      tabIndex: -1,
-      onKeyPress: () => {}
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "label"
-    }, item.label)));
-  }));
-};
-var _default = exports.default = PeriodList;

package/lib/inputs/period/helper.d.ts

@@ -1,22 +0,0 @@
-import { Moment } from 'moment';
-import { DateTypes } from './types.js';
-import 'react';
-import '../../@types/ColorStyles.js';
-import '../../@types/Period.js';
-import '../../@types/PermissionAttr.js';
-import '../base/types.js';
-import '../../@types/Align.js';
-import '../../internals/types.js';
-import '../../@types/Position.js';
-
-declare const getCalendarDropdownStyle: ({ topPosition, leftPosition, width }: {
-    topPosition: number | string;
-    leftPosition: number | string;
-    width: number | string;
-}) => string;
-
-declare const getDropdownItemCssClass: (selected?: boolean, disabled?: boolean, striped?: boolean) => string;
-declare const CalcDatesByPeriod: (dateType: DateTypes) => Moment[];
-declare const isDateValid: (date: Moment) => boolean;
-
-export { CalcDatesByPeriod, getCalendarDropdownStyle as default, getDropdownItemCssClass, isDateValid };

package/lib/inputs/period/helper.js

@@ -1,66 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isDateValid = exports.getDropdownItemCssClass = exports.default = exports.CalcDatesByPeriod = void 0;
-var _moment = _interopRequireDefault(require("moment"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const getCalendarDropdownStyle = _ref => {
-  let {
-    topPosition,
-    leftPosition,
-    width
-  } = _ref;
-  return `top: ${topPosition}px;
-  left: ${leftPosition}px;
-  width:${width}px`;
-};
-var _default = exports.default = getCalendarDropdownStyle;
-const getDropdownItemCssClass = function () {
-  let selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-  let disabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  let striped = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  let className = 'item';
-  className += selected && !disabled ? ' -selected ' : '';
-  className += disabled ? ' -disabled' : '';
-  className += !selected && !disabled && striped ? ' -striped ' : '';
-  return className;
-};
-exports.getDropdownItemCssClass = getDropdownItemCssClass;
-const CalcDatesByPeriod = dateType => {
-  const currentDate = (0, _moment.default)();
-  const dateTypes = {
-    today: () => [currentDate, currentDate],
-    week: () => {
-      const weekStart = currentDate.clone().startOf('week');
-      const weekEnd = currentDate.clone().endOf('week');
-      return [weekStart, weekEnd];
-    },
-    lastweek: () => {
-      const lastWeek = currentDate.subtract(1, 'weeks');
-      const weekStart = lastWeek.clone().startOf('week');
-      const weekEnd = lastWeek.clone().endOf('week');
-      return [weekStart, weekEnd];
-    },
-    last15: () => {
-      const last15Day = (0, _moment.default)(currentDate);
-      return [last15Day.subtract(15, 'days'), currentDate];
-    },
-    month: () => {
-      const monthStart = currentDate.clone().startOf('month');
-      const monthEnd = currentDate.clone().endOf('month');
-      return [monthStart, monthEnd];
-    },
-    lastmonth: () => {
-      const lastMonth = currentDate.subtract(1, 'months');
-      const monthStart = lastMonth.clone().startOf('month');
-      const monthEnd = lastMonth.clone().endOf('month');
-      return [monthStart, monthEnd];
-    }
-  };
-  return dateTypes[dateType]();
-};
-exports.CalcDatesByPeriod = CalcDatesByPeriod;
-const isDateValid = date => date && (0, _moment.default)(date).isValid();
-exports.isDateValid = isDateValid;

package/lib/inputs/period/index.d.ts

@@ -1,14 +0,0 @@
-import { IPeriodPickerProps } from './types.js';
-import 'moment';
-import 'react';
-import '../../@types/ColorStyles.js';
-import '../../@types/Period.js';
-import '../../@types/PermissionAttr.js';
-import '../base/types.js';
-import '../../@types/Align.js';
-import '../../internals/types.js';
-import '../../@types/Position.js';
-
-declare const PeriodPicker: (props: IPeriodPickerProps) => JSX.Element | null;
-
-export { PeriodPicker as default };

package/lib/inputs/period/index.js

@@ -1,423 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-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 helperBase = _interopRequireWildcard(require("../base/helpers"));
-require("../../assets/styles/periodpicker.scss");
-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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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'
-  } = props;
-  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 wrapperBaseInputPeriodRef = (0, _react.useRef)(null);
-  const inputContainerRef = (0, _react.useRef)(null);
-  const inputInitialRef = (0, _react.useRef)(null);
-  const buttonOpenRef = (0, _react.useRef)(null);
-  const buttonSelectPeriodRef = (0, _react.useRef)(null);
-  const dropdownCalendarContainer = (0, _react.useRef)(null);
-  const dropdownPeriodContainer = (0, _react.useRef)(null);
-  const inputFinalRef = (0, _react.useRef)(null);
-  const onScreenResize = () => {
-    const inputDimensionsAux = inputContainerRef?.current?.getBoundingClientRect();
-    setInputDimensions(inputDimensionsAux);
-  };
-  const onClickOutside = event => {
-    const {
-      target
-    } = event;
-    if (target === inputContainerRef.current || target === inputInitialRef.current || target === inputFinalRef.current || target === buttonOpenRef.current || target === buttonSelectPeriodRef.current) {
-      return;
-    }
-    if (dropdownCalendarContainer.current && dropdownCalendarContainer.current.contains(target)) {
-      return;
-    }
-    if (dropdownPeriodContainer.current && dropdownPeriodContainer.current.contains(target)) return;
-    setShowCalendarValueInitial(false);
-    setShowCalendarValueFinal(false);
-    setShowPeriodSelection(false);
-  };
-  const onCloseCalendarWithoutFocus = event => {
-    if (event.key === 'Tab') {
-      if (wrapperBaseInputPeriodRef.current && wrapperBaseInputPeriodRef.current.contains(document.activeElement) && document.activeElement instanceof HTMLInputElement) {
-        setShowCalendarValueInitial(false);
-        setShowCalendarValueFinal(false);
-      }
-    }
-  };
-  (0, _react.useEffect)(() => {
-    window.addEventListener('resize', onScreenResize);
-    document.addEventListener('click', onClickOutside);
-    document.addEventListener('keydown', onCloseCalendarWithoutFocus);
-    if (inputContainerRef.current) onScreenResize();
-    return () => {
-      window.removeEventListener('resize', onScreenResize);
-      document.removeEventListener('click', onClickOutside);
-      document.removeEventListener('keydown', onCloseCalendarWithoutFocus);
-    };
-  }, []);
-  (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]);
-  const openCalendar = calendarName => {
-    if (calendarName === 'valueInitial') {
-      setShowCalendarValueFinal(false);
-      setShowCalendarValueInitial(true);
-    } else {
-      setShowCalendarValueInitial(false);
-      setShowCalendarValueFinal(true);
-    }
-    setShowPeriodSelection(false);
-    if (inputContainerRef.current) {
-      setInputDimensions(inputContainerRef.current.getBoundingClientRect());
-    }
-  };
-  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, value) => {
-    if (event) {
-      const {
-        name: changingAux
-      } = event.target;
-      if (value && value.replace(/\D/g, '').trim().length !== 0) {
-        if (changingAux === 'valueInitial') {
-          setValueInitial(undefined);
-        } else {
-          setValueFinal(undefined);
-        }
-      }
-    }
-  };
-  const onDateChange = date => {
-    if (props.onChange) {
-      const initial = date.initial ? date.initial.format('YYYY-MM-DD') : '';
-      const final = date.final ? date.final.format('YYYY-MM-DD') : '';
-      props.onChange(undefined, '', {
-        initial,
-        final
-      });
-    }
-  };
-  const setValue = function (event, value) {
-    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.current?.focus();
-    if (showCalendarValueFinal) inputFinalRef.current?.focus();
-    if (valueDateName === 'valueFinal' && valueInitial && dateObj.isBefore(valueInitial)) {
-      setValueInitial(dateObj);
-      setValueFinal(valueInitial);
-      onDateChange({
-        initial: dateObj,
-        final: valueInitial
-      });
-    } else if (valueDateName === 'valueInitial' && valueFinal && dateObj.isAfter(valueFinal)) {
-      setValueInitial(valueFinal);
-      setValueFinal(dateObj);
-      onDateChange({
-        initial: valueFinal,
-        final: dateObj
-      });
-    } else if (valueDateName === 'valueInitial') {
-      setValueInitial(dateObj);
-      onDateChange({
-        initial: dateObj,
-        final: valueFinal
-      });
-    } else {
-      setValueFinal(dateObj);
-      onDateChange({
-        initial: valueInitial,
-        final: dateObj
-      });
-    }
-    if (valueDateName === 'valueInitial' && !valueFinal && shouldOpenDropdown) {
-      inputFinalRef.current?.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 = () => {
-    if (!showButtonOpen) return null;
-    return /*#__PURE__*/_react.default.createElement(_buttons.default, {
-      key: "button-open",
-      boxShadow: false,
-      icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
-        name: "calendar"
-      }),
-      onClick: () => {
-        inputInitialRef.current?.focus();
-        openCalendar('valueInitial');
-      },
-      customClass: "calendar-button",
-      tabIndex: -1,
-      targetRef: ref => {
-        buttonOpenRef.current = ref;
-      },
-      disabled: shouldDisable()
-    });
-  };
-  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 getButtonSelectPeriod = () => /*#__PURE__*/_react.default.createElement(_buttons.default, {
-    key: "button-select-period",
-    boxShadow: false,
-    icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
-      name: "more1"
-    }),
-    onBlur: () => setTimeout(() => setShowPeriodSelection(false), 100),
-    onClick: () => openPeriodSelecion(),
-    customClass: "calendar-button",
-    tabIndex: -1,
-    targetRef: ref => {
-      buttonSelectPeriodRef.current = ref;
-    },
-    disabled: shouldDisable()
-  });
-  const getCalendar = (value, calendarColorStyleCalendar, valueDateName) => /*#__PURE__*/_react.default.createElement(_calendar.default, {
-    currentDate: value !== undefined ? (0, _moment.default)(value) : (0, _moment.default)(),
-    onDateChange: date => {
-      setValue({
-        target: {
-          name: valueDateName
-        }
-      }, date);
-    },
-    colorStyle: calendarColorStyleCalendar
-  });
-  const setPeriodDates = (selected, dates) => {
-    if (selected === 'custom') {
-      inputInitialRef.current?.focus();
-      setValuePeriodSelection(selected);
-      setShowPeriodSelection(false);
-      return;
-    }
-    setValuePeriodSelection(selected);
-    if (dates) {
-      setValueInitial(dates[0]);
-      setValueFinal(dates[1]);
-    }
-    if (shouldCloseOnSelect) {
-      setShowPeriodSelection(false);
-    }
-  };
-  const getWrapperComponentCalendarValueInitial = () => {
-    if (onDenied && onDenied.readOnly) return null;
-    if (showCalendarInDialog) {
-      return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
-        dialogSize: dialogSize,
-        onOpenChange: setShowCalendarValueInitial
-      }, getCalendar(valueInitial, calendarColorStyle, 'valueInitial'));
-    }
-    return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-      targetElement: inputContainerRef.current,
-      topPosition: inputDimensions ? inputDimensions.top + inputDimensions.height + 5 : '',
-      leftPosition: inputDimensions ? inputDimensions.left : '',
-      width: inputDimensions ? inputDimensions.width : '',
-      dropdownRef: el => {
-        dropdownCalendarContainer.current = el;
-      }
-    }, getCalendar(valueInitial, calendarColorStyle, 'valueInitial'));
-  };
-  const getWrapperComponentCalendarValueFinal = () => {
-    if (onDenied && onDenied.readOnly) return null;
-    if (showCalendarInDialog) {
-      return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
-        dialogSize: dialogSize,
-        onOpenChange: setShowCalendarValueFinal
-      }, getCalendar(valueFinal, calendarColorStyle, 'valueFinal'));
-    }
-    return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-      targetElement: inputContainerRef.current,
-      topPosition: inputDimensions ? inputDimensions.top + inputDimensions.height + 5 : '',
-      leftPosition: inputDimensions ? inputDimensions.left : '',
-      width: inputDimensions ? inputDimensions.width : '',
-      dropdownRef: el => {
-        dropdownCalendarContainer.current = el;
-      }
-    }, getCalendar(valueFinal, calendarColorStyle, 'valueFinal'));
-  };
-  const getWrapperComponentPeriodSelection = () => {
-    if (showCalendarInDialog) {
-      return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
-        dialogSize: dialogSize,
-        onOpenChange: setShowPeriodSelection
-      }, getPeriodSelection(valuePeriodSelection, setPeriodDates));
-    }
-    return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-      targetElement: inputContainerRef.current,
-      topPosition: inputDimensions ? inputDimensions.top + inputDimensions.height + 5 : '',
-      leftPosition: inputDimensions ? inputDimensions.left : '',
-      width: inputDimensions ? inputDimensions.width : '',
-      dropdownRef: el => {
-        dropdownPeriodContainer.current = el;
-      }
-    }, getPeriodSelection(valuePeriodSelection, setPeriodDates));
-  };
-  if (onDenied && onDenied.unvisible) return null;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: wrapperBaseInputPeriodRef,
-    className: "input-base-component"
-  }, 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 ${props.customClassForLabel} ${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 ${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, {
-    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, {
-    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 && getWrapperComponentCalendarValueInitial(), showCalendarValueFinal && getWrapperComponentCalendarValueFinal(), showPeriodSelection && getWrapperComponentPeriodSelection(), /*#__PURE__*/_react.default.createElement(_hint.default, {
-    visible: !!hint && hintPosition === 'below',
-    customClass: "hint",
-    description: hint
-  }), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
-    messages: props.errorMessages
-  }));
-};
-var _default = exports.default = PeriodPicker;