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

package/lib/inputs/period/index.js

@@ -0,0 +1,428 @@
+"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 = () => {
+    var _inputContainerRef$cu;
+    const inputDimensionsAux = inputContainerRef === null || inputContainerRef === void 0 ? void 0 : (_inputContainerRef$cu = inputContainerRef.current) === null || _inputContainerRef$cu === void 0 ? void 0 : _inputContainerRef$cu.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) {
+    var _inputInitialRef$curr, _inputFinalRef$curren;
+    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$curr = inputInitialRef.current) === null || _inputInitialRef$curr === void 0 ? void 0 : _inputInitialRef$curr.focus();
+    if (showCalendarValueFinal) (_inputFinalRef$curren = inputFinalRef.current) === null || _inputFinalRef$curren === void 0 ? void 0 : _inputFinalRef$curren.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) {
+      var _inputFinalRef$curren2;
+      (_inputFinalRef$curren2 = inputFinalRef.current) === null || _inputFinalRef$curren2 === void 0 ? void 0 : _inputFinalRef$curren2.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: () => {
+        var _inputInitialRef$curr2;
+        (_inputInitialRef$curr2 = inputInitialRef.current) === null || _inputInitialRef$curr2 === void 0 ? void 0 : _inputInitialRef$curr2.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') {
+      var _inputInitialRef$curr3;
+      (_inputInitialRef$curr3 = inputInitialRef.current) === null || _inputInitialRef$curr3 === void 0 ? void 0 : _inputInitialRef$curr3.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 ".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, {
+    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;

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

@@ -0,0 +1,73 @@
+import { Moment } from 'moment';
+import { ReactNode } from 'react';
+import { ColorStyles } from '../../@types/ColorStyles.js';
+import { Period } from '../../@types/Period.js';
+import { PermissionAttr } from '../../@types/PermissionAttr.js';
+import { CustomInputEvent } from '../base/types.js';
+import '../../@types/Align.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+
+type DateTypes = 'today' | 'week' | 'lastweek' | 'last15' | 'month' | 'lastmonth';
+interface ChangeInputPeriodEvent {
+    target: {
+        value?: string;
+        name?: string;
+    };
+}
+interface IPeriodOptions {
+    id: DateTypes | 'custom';
+    label?: string;
+}
+interface IDialogProps {
+    children: ReactNode | ReactNode[];
+    onOpenChange: (open: boolean) => void;
+    dialogSize: {
+        width: string;
+        height: string;
+    };
+}
+interface IPeriodDropdownProps {
+    topPosition: number | string;
+    leftPosition: number | string;
+    width: number | string;
+    children: JSX.Element | JSX.Element[];
+    dropdownRef: (el: HTMLElement) => void;
+    targetElement?: HTMLDivElement | HTMLInputElement | null;
+}
+interface IPeriodPickerProps {
+    label?: string;
+    value?: {
+        initial?: Moment | string;
+        final?: Moment | string;
+    };
+    customClassForLabel?: string;
+    labelUppercase?: boolean;
+    showButtonOpen?: boolean;
+    shouldCloseOnSelect?: boolean;
+    openOnFocus?: boolean;
+    showCalendarInDialog?: boolean;
+    dialogSize?: {
+        width: string;
+        height: string;
+    };
+    calendarColorStyle?: ColorStyles;
+    required?: boolean;
+    onChange?: (event?: CustomInputEvent, maskValue?: string, date?: Period) => void;
+    disabled?: boolean;
+    permissionAttr?: PermissionAttr;
+    errorMessages?: string[];
+    name?: string;
+    hint?: string;
+    hintPosition?: 'below' | 'onLabelRight';
+    onBlur?: (e: CustomInputEvent) => void;
+    onFocus?: (e: CustomInputEvent) => void;
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
+}
+interface IPeriodListProps {
+    handleOnSelect: (value: DateTypes | 'custom', date: Moment[] | null) => void;
+    selected?: string;
+}
+
+export { ChangeInputPeriodEvent, DateTypes, IDialogProps, IPeriodDropdownProps, IPeriodListProps, IPeriodOptions, IPeriodPickerProps };

package/lib/inputs/period/types.js

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

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

@@ -0,0 +1,16 @@
+import { ISearchProps } from '../types.js';
+import 'react';
+import '../../@types/PermissionAttr.js';
+import '../../@types/DataCombo.js';
+import '../base/types.js';
+import '../../@types/Align.js';
+import '../../@types/Period.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+import '../../drawer/types.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
+
+declare const SearchField: (props: ISearchProps) => JSX.Element | null;
+
+export { SearchField as default };

package/lib/inputs/search/index.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _InputTextBase = _interopRequireDefault(require("../base/InputTextBase"));
+var _buttons = _interopRequireDefault(require("../../buttons"));
+var _icons = _interopRequireDefault(require("../../icons"));
+require("../../assets/styles/search.scss");
+var _drawer = _interopRequireWildcard(require("../../drawer"));
+const _excluded = ["headerTitle", "content", "onStateChange"];
+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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+const SearchField = props => {
+  const {
+    resetButton = true,
+    advancedFilterProps = {},
+    value
+  } = props;
+  const [advancedFilterOpened, setAdvancedFilterOpened] = (0, _react.useState)(false);
+  const [valorCampo, setValorCampo] = (0, _react.useState)('');
+  const [onDenied, setOnDenied] = (0, _react.useState)();
+  const {
+      headerTitle,
+      content,
+      onStateChange
+    } = advancedFilterProps,
+    advancedFilterPropsRest = _objectWithoutProperties(advancedFilterProps, _excluded);
+  const onReset = event => {
+    if (props.onReset) props.onReset(event);
+    setValorCampo('');
+  };
+  const onChange = event => {
+    if (event) {
+      if (props.onChange) props.onChange(event);
+      setValorCampo(event.target.value);
+    }
+  };
+  const shouldDisable = () => props.disabled || onDenied && (onDenied.disabled || onDenied.hideContent);
+  const shouldBeReadOnly = () => props.readOnly || onDenied && onDenied.readOnly;
+  const hideContent = onDenied === null || onDenied === void 0 ? void 0 : onDenied.hideContent;
+  const buttonProps = () => {
+    const disableCallbacks = shouldBeReadOnly() || shouldDisable() || hideContent;
+    let propsButton = {
+      icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
+        name: "filter1",
+        color: "#a9a8a8",
+        key: "filter-icon"
+      }),
+      key: 'advanced-filter-button',
+      boxShadow: false,
+      readOnly: shouldBeReadOnly(),
+      style: {
+        padding: '0 0 0 5px',
+        width: 30
+      },
+      transparent: true,
+      disabled: shouldDisable()
+    };
+    if (!disableCallbacks) {
+      propsButton = _objectSpread(_objectSpread({}, propsButton), {}, {
+        onClick: e => {
+          if (props.onClick) props.onClick(e);
+          setAdvancedFilterOpened(!advancedFilterOpened);
+          if (onStateChange) onStateChange(!advancedFilterOpened);
+        }
+      }, propsButton);
+    }
+    return propsButton;
+  };
+  const rightElements = () => {
+    const enableFilterButton = Object.keys(advancedFilterProps).length > 0;
+    let elements = [/*#__PURE__*/_react.default.createElement(_icons.default, {
+      name: "search",
+      color: "#a9a8a8",
+      key: "search-icon",
+      disabled: shouldDisable()
+    })];
+    const resetButtonIcon = /*#__PURE__*/_react.default.createElement(_icons.default, {
+      name: "cancel2",
+      color: "#a9a8a8",
+      key: "inputSearchIcon",
+      style: {
+        cursor: 'pointer',
+        pointerEvents: 'auto'
+      },
+      onClick: onReset
+    });
+    const filterButton = /*#__PURE__*/_react.default.createElement(_buttons.default, buttonProps());
+    if (enableFilterButton) elements = [...elements, filterButton];
+    if (resetButton && valorCampo.trim() !== '') elements = [resetButtonIcon, ...elements];
+    return elements;
+  };
+  (0, _react.useEffect)(() => {
+    if (value !== undefined && value !== valorCampo) {
+      setValorCampo(value);
+    }
+  }, [value]);
+  if (onDenied && onDenied.unvisible) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
+    onReset: onReset,
+    onChange: onChange,
+    value: valorCampo,
+    customClass: "",
+    handlerSetOnDenied: setOnDenied,
+    rightElements: rightElements()
+  })), advancedFilterOpened && /*#__PURE__*/_react.default.createElement(_drawer.default, _extends({
+    handlerClose: () => {
+      setAdvancedFilterOpened(false);
+      if (onStateChange) onStateChange(false);
+    }
+  }, advancedFilterPropsRest), headerTitle && /*#__PURE__*/_react.default.createElement(_drawer.DrawerHeader, {
+    title: headerTitle
+  }), /*#__PURE__*/_react.default.createElement(_drawer.DrawerContent, null, content)));
+};
+var _default = exports.default = SearchField;

package/lib/inputs/select/ActionButtons.d.ts

@@ -0,0 +1,16 @@
+import { IActionButtonsSelectProps } from '../types.js';
+import 'react';
+import '../../@types/PermissionAttr.js';
+import '../../@types/DataCombo.js';
+import '../base/types.js';
+import '../../@types/Align.js';
+import '../../@types/Period.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+import '../../drawer/types.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
+
+declare const ActionButtons: (props: IActionButtonsSelectProps) => JSX.Element;
+
+export { ActionButtons as default };