form-tool
Version:
Create quickly and robustly with form hooks
980 lines (962 loc) • 234 kB
JavaScript
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var styled = require('styled-components');
var ReactSelect = require('react-select');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
var ReactSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactSelect);
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __spreadArray(to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
to[j] = from[i];
return to;
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
}
/**
* @description Class containing the initial configuration Colors
* @author ConfigInitTable?
* @version 1.0.0
*/
var defaultColor = {
input: {
primary: '#009587',
placeholder: '#B5B4B7',
label: '#393939',
labelLight: '#717171',
labelHight: '#222222',
labelError: '#E40101',
inputBorder: '#DDDDDD',
inputBorderError: '#e81b1b',
inputBorderSuccess: '#DDDDDD',
input: '#393939',
inputHight: '#222222',
inputBackgroundColor: '#FFFFFF',
inputBackgroundColorDisabled: '#fafafa',
inputBackgroundColorDisabledClick: '#fafafa',
symbol: '#393939',
symbolHight: '#222222',
tooltipColor: '#E40101',
tooltipBorder: '#DDDDDD',
tooltipBackgroundColor: '#FFFFFF',
tooltipColorBoxShadow: '#75757555'
},
select: {
label: '#393939',
danger: '#e81b1b',
select: '#393939',
symbol: '#393939',
primary: '#009587',
neutral10: '#DDDDDD',
neutral20: '#CCCCCC',
neutral30: '#999999',
neutral40: '#393939',
neutral50: '#B5B4B7',
neutral60: '#555555',
neutral70: '#444444',
neutral80: '#333333',
neutral90: '#393939',
labelLight: '#717171',
labelHight: '#222222',
labelError: '#E40101',
dangerLight: '#E40101',
selectHight: '#222222',
symbolHight: '#222222',
selectBorder: '#DDDDDD',
tooltipColor: '#E40101',
tooltipBorder: '#DDDDDD',
selectBorderError: '#e81b1b',
selectBackgroundColor: '#FFFFFF',
tooltipBackgroundColor: '#FFFFFF',
tooltipColorBoxShadow: '#75757555',
selectBackgroundColorDisabled: '#FAFAFA',
},
loading: {
color: '#009522'
},
textarea: {
primary: '#009587',
placeholder: '#B5B4B7',
label: '#393939',
labelLight: '#717171',
labelHight: '#222222',
labelError: '#E40101',
textareaBorder: '#DDDDDD',
textareaBorderError: '#e81b1b',
textareaBorderSuccess: '#DDDDDD',
textarea: '#393939',
textareaHight: '#222222',
textareaBackgroundColor: '#FFFFFF',
textareaBackgroundColorDisabled: '#fafafa',
textareaBackgroundColorDisabledClick: '#fafafa',
symbol: '#393939',
symbolHight: '#222222',
tooltipColor: '#E40101',
tooltipBorder: '#DDDDDD',
tooltipBackgroundColor: '#FFFFFF',
tooltipColorBoxShadow: '#75757555'
},
};
// Config init colors
var InitConfigColor = /** @class */ (function () {
function InitConfigColor() {
}
// Getters
InitConfigColor.getColors = function () {
return this.defaultColors;
};
// Setter
InitConfigColor.configColors = function (newStyles) {
this.defaultColors = {
input: __assign(__assign({}, this.defaultColors.input), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.input) || {})),
select: __assign(__assign({}, this.defaultColors.select), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.select) || {})),
loading: __assign(__assign({}, this.defaultColors.loading), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.loading) || {})),
textarea: __assign(__assign({}, this.defaultColors.textarea), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.textarea) || {})),
};
};
InitConfigColor.defaultColors = defaultColor;
return InitConfigColor;
}());
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
/**
* Validate that the field is not null
* @version 0.0.1
* ```ts
* @param {argVal} value input value
* @return {boolean} true or false
* ```
*/
var isNull = function (value) { return !(!!value || value === 0); };
/**
* Validate that the field is not numeric
* @version 0.0.1
* ```ts
* @param {argVal} value input value
* @return {boolean} true or false
* ```
*/
var isNumeric = function (value) { return !!isNaN(Number(value)); };
/**
* Validate that the field contains only letters
* @version 0.0.1
* ```ts
* @param {argVal} value input value
* @return {boolean} true or false
* ```
*/
var onlyLetters = function (value) {
var validation = /^[A-Za-zÁÉÍÓÚáéíóúñÑ ]+$/g;
if (validation.test(value) || value.length === 0)
return false;
return true;
};
/**
* Validate that the field is in the established range of letters
* @version 0.0.1
* ```ts
* @param {string | number} value input value
* @param {number} min minimum
* @param {number} max maximum
* @return {boolean} true or false
* ```
*/
var rangeLength = function (value, min, max) {
if (((String(value).length >= min) && (String(value).length <= max)) || String(value).length === 0)
return false;
return true;
};
/**
* Validate that the field has a correct email format
* @version 0.0.1
* ```ts
* @param {string} email input value
* @return {boolean} true or false
* ```
*/
var isEmail = function (email) {
var validation = /^[-\w.%+]{1,64}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/i;
if (validation.test(email) || email.length === 0)
return false;
return true;
};
/**
* Transform a number of numbers into money format
* @version 0.0.1
* ```ts
* @param {string | number} value input value
* @param {string} region region number format
* @return {boolean} true or false
* ```
*/
var numberFormat = function (value, region) {
if (value) {
if (Number(String(value).replace(/\./g, '')))
return new Intl.NumberFormat(region || 'de-DE').format(parseFloat(String(value).replace(/\./g, '')));
else
return 0;
}
else {
if ((isNaN(Number(value)) || !value) && value !== 0)
return '';
else
return 0;
}
};
/**
* Busca un valor aleatorio de 10 caracteres
* @version 0.0.1
* @return {string} Valor aleatorio
*/
var valRand = function () {
/** variables necesarias */
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
/** creación de código */
for (var i = 0; i < 10; i++) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
return result;
};
/**
* Obtiene la información de la columna según el path dado ej: user.name
* @param {string} path Key del objecto
* @param {any} obj Objecto donde se va a buscar la key (path)
* @return {void}
*/
// export const resolveData = (path?: string, obj?: any): any => path && path.split('.').reduce((prev, curr) => prev ? prev[curr] : null, obj)
var resolveData = function (myData, index, nameArray, name, array, keys) {
var value = '';
// Si coincide con la última clave
for (var key in myData) {
if (key === name && ((!!nameArray && !!array) || (!nameArray)) && !(keys === null || keys === void 0 ? void 0 : keys.length))
return myData[key];
if (Array.isArray(myData[key])) {
if (nameArray === key) {
value = resolveData(myData[key][Number(index)], index, nameArray, name, !!nameArray);
}
}
else if (typeof myData[key] === 'object' && ((keys === null || keys === void 0 ? void 0 : keys.length) ? keys[0] === key : true)) {
value = resolveData(myData[key], index, nameArray, name, false, keys === null || keys === void 0 ? void 0 : keys.splice(1, keys.length));
}
}
return value;
};
/**
* Transforma una fecha en ingles a formato español
* @version 0.0.1
* @param {string} value valor en números
* @param {string | undefined} locale tipo de dirección
* @return {string} nuevo formato de fecha
*/
var dateFormat = function (value, locale) {
var dateValue = new Date(value + " 00:00:00");
return value && new Intl.DateTimeFormat(locale || 'es-CO', { day: '2-digit', month: '2-digit', year: 'numeric' }).format(dateValue);
};
/**
* Transforma un numero en formato de teléfono
* @version 0.0.1
* @param {string} value valor en números
* @return {string} nuevo formato en teléfono
*/
var phoneFormat = function (value) { return value; }; //!!value && parsePhoneNumber(`${ value }`, 'US')?.formatNational()
/**
* Transforma una hora en ingles a formato español
* @version 0.0.1
* @param {string} value valor en números
* @return {string} nuevo formato en hora
*/
var hourFormat = function (value) {
var dateValue = new Date(value);
return value && new Intl.DateTimeFormat('es-CO', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }).format(dateValue);
};
/**
* Actualiza la data del usuario según el tipo, si es array, array de objetos ó objeto plano
* ```ts
* @param {string[]} keys Claves del objeto donde va a buscar @example 'user.profile.name' equivale a: ['user', 'profile', 'name]
* @param {number} indexSplit Índice a buscar dentro de las keys
* @param {any} myData Data actual donde se va a buscar
* @param {number} index Índice del array (si es un array)
* @param {string} nameArray Nombre del la clave si es array
* @param {string} name Name del input
* @param {string | number} value valor del input
* @returns {any[]} Devuelve el array o el objeto
* ```
*/
var updateData = function (keys, indexSplit, myData, index, nameArray, name, value) {
var _a, _b, _c, _d, _e;
var _f, _g;
// Si coincide con la última clave
if (indexSplit === keys.length) {
// Si es de tipo array
if (Array.isArray(myData)) {
return __assign(__assign({}, myData[index]), (_a = {}, _a[name] = value, _a));
}
// Si es de tipo objeto
return __assign(__assign({}, myData), (_b = {}, _b[name] = value, _b));
}
else {
// Si la clave iterada coincide con el nameArray declarado en el Input
if (keys[indexSplit] === nameArray) {
// Si la clave iterada está dentro del array del input
if ((_f = myData[keys[indexSplit]]) === null || _f === void 0 ? void 0 : _f[index]) {
return __assign(__assign({}, myData), (_c = {}, _c[keys[indexSplit]] = myData[keys[indexSplit]].map(function (x, i) {
// Si la posición del array coincide con la iteración del bucle
if (i === index) {
return updateData(keys, indexSplit + 1, myData[keys[indexSplit]][index] || {}, index, nameArray, name, value);
}
return x;
}), _c));
}
else {
return __assign(__assign({}, myData), (_d = {}, _d[keys[indexSplit]] = ((_g = myData[keys[indexSplit]]) === null || _g === void 0 ? void 0 : _g.length) ? __spreadArray(__spreadArray([], myData[keys[indexSplit]], true), [updateData(keys, indexSplit + 1, {}, index, nameArray, name, value)]) :
[updateData(keys, indexSplit + 1, {}, index, nameArray, name, value)], _d));
}
}
else {
return __assign(__assign({}, myData), (_e = {}, _e[keys[indexSplit]] = __assign(__assign({}, myData[keys[indexSplit]]), updateData(keys, indexSplit + 1, myData[keys[indexSplit]] || {}, index, nameArray, name, value)), _e));
}
}
};
/**
* @description Función que valida los formularios, funciona para trabajar los errores con estados
* @version 0.1.1
* @param {array} elements elementos del formulario
* @return {array} devuelve un array de con el nombre identificador para cada estado en react.
*/
var validationSubmitHooks = function (elements) {
var _a;
var _b, _c, _d;
// Error vars
var errorForm = {}, isError = false;
for (var i = 0; i < (elements === null || elements === void 0 ? void 0 : elements.length); i++) {
if (elements[i].name) {
if (((_c = (_b = elements[i]) === null || _b === void 0 ? void 0 : _b.dataset) === null || _c === void 0 ? void 0 : _c.type) === 'textarea' || elements[i].type === 'text' || elements[i].type === 'date' || elements[i].type === 'datetime-local' || elements[i].type === 'month' || elements[i].type === 'month' || elements[i].type === 'radio' || elements[i].type === 'range' || elements[i].type === 'search' || elements[i].type === 'tel' || elements[i].type === 'time' || elements[i].type === 'url' || elements[i].type === 'week' || elements[i].type === 'password' || elements[i].type === 'email' || elements[i].type === 'number' || elements[i].type === 'hidden') {
// Destructuración de datasets
var _e = ((_d = elements[i]) === null || _d === void 0 ? void 0 : _d.dataset) || {}, object = _e.object, index = _e.index, nameArray = _e.nameArray, required = _e.required;
if (object) {
errorForm = __assign(__assign({}, errorForm), updateData(object === null || object === void 0 ? void 0 : object.split('.'), 0, errorForm, Number(index), nameArray, elements[i].name, required ? !elements[i].value : false));
}
else {
errorForm = __assign(__assign({}, errorForm), (_a = {}, _a[elements[i].name] = required === 'true' ? !elements[i].value : false, _a));
}
if (required === 'true' && !elements[i].value)
isError = true;
}
}
}
return { errorForm: errorForm, isError: isError };
};
/**
* busca en el localStore la información y la parsea si es necesario
* @version 0.0.1
* @param {*} key clave de búsqueda
* @param {boolean} isParse si se quiere parsear o no
* @return {boolean} devuelve el valor parseado o false si pudo guardar en localStorage
*/
var getDataLS = function (key, isParse) {
try {
var jsonValue = window.localStorage.getItem(key);
return isParse ? (jsonValue ? JSON.parse(jsonValue) : false) : jsonValue;
}
catch (e) {
return false;
}
};
/**
* Verifica que las contraseñas cumplan con el estándar correcto
* @version 0.0.1
* @param {string} value valor
* @return {boolean} true o false
*/
var passwordFormat = function (value) {
var validar = /^(?=\w*\d)(?=\w*[A-Z])(?=\w*[a-z])\S{8,16}$/;
if (validar.test(value) === true) {
return false;
}
else
return true;
};
/* eslint-disable no-unused-vars */
var _a$2, _b$2, _c$2, _d$2, _e$2, _f$2, _g$2, _h$2, _j$2, _k$2, _l$2, _m$2, _o$2, _p$2, _q$2, _r$2, _s$2, _t$2, _u$2, _v$2, _w$2, _x$2;
var Colors$4 = InitConfigColor.getColors();
var defaultStyleInput = {
container: {
width: '100%',
display: 'flex',
widthPhone: '100%',
widthTable: '100%',
position: 'relative',
maxWidthTable: '768px',
maxWidthPhone: '375px',
flexDirection: 'column',
hoverDisplayTooltip: 'block'
},
label: {
border: 'none',
margin: '1px 0',
fontSize: '13px',
activeTitle: true,
textAlign: 'start',
overflow: 'hidden',
padding: '5.2px 0px',
whiteSpace: 'nowrap',
fontFamily: 'sans-serif',
textOverflow: 'ellipsis',
color: (_a$2 = Colors$4.input) === null || _a$2 === void 0 ? void 0 : _a$2.label,
hoverDisplayTooltip: 'block',
colorError: (_b$2 = Colors$4.input) === null || _b$2 === void 0 ? void 0 : _b$2.labelError,
colorNotValue: (_c$2 = Colors$4.input) === null || _c$2 === void 0 ? void 0 : _c$2.labelLight,
colorDisabled: (_d$2 = Colors$4.input) === null || _d$2 === void 0 ? void 0 : _d$2.labelHight,
},
input: {
outline: '0',
width: '100%',
padding: '0 7px',
fontSize: '13px',
minHeight: '36px',
activeTitle: true,
borderRadius: '5px',
fontFamily: 'sans-serif',
cursorDisabled: 'no-drop',
color: (_e$2 = Colors$4.input) === null || _e$2 === void 0 ? void 0 : _e$2.input,
hoverDisplayTooltip: 'block',
cursorDisabledClick: 'pointer',
fontFamilyDisabled: 'sans-serif',
fontFamilyDisabledClick: 'sans-serif',
colorDisabled: (_f$2 = Colors$4.input) === null || _f$2 === void 0 ? void 0 : _f$2.inputHight,
colorDisabledClick: (_g$2 = Colors$4.input) === null || _g$2 === void 0 ? void 0 : _g$2.primary,
border: "1px solid " + ((_h$2 = Colors$4.input) === null || _h$2 === void 0 ? void 0 : _h$2.inputBorder),
borderFocus: "1px solid " + ((_j$2 = Colors$4.input) === null || _j$2 === void 0 ? void 0 : _j$2.primary),
backgroundColor: (_k$2 = Colors$4.input) === null || _k$2 === void 0 ? void 0 : _k$2.inputBackgroundColor,
borderError: "1px solid " + ((_l$2 = Colors$4.input) === null || _l$2 === void 0 ? void 0 : _l$2.inputBorderError),
borderSuccess: "1px solid " + ((_m$2 = Colors$4.input) === null || _m$2 === void 0 ? void 0 : _m$2.inputBorderSuccess),
backgroundColorDisabled: (_o$2 = Colors$4.input) === null || _o$2 === void 0 ? void 0 : _o$2.inputBackgroundColorDisabled,
backgroundColorDisabledClick: (_p$2 = Colors$4.input) === null || _p$2 === void 0 ? void 0 : _p$2.inputBackgroundColorDisabledClick,
},
tooltip: {
left: '0px',
zIndex: 10,
bottom: '-35%',
display: 'none',
fontSize: '11px',
borderRadius: '2px',
padding: '2px 10px',
position: 'absolute',
topAfterBefore: '100%',
leftAfterBefore: '85%',
fontFamily: 'sans-serif',
positionAfterBefore: 'absolute',
pointerEventsAfterBefore: 'none',
color: (_q$2 = Colors$4.input) === null || _q$2 === void 0 ? void 0 : _q$2.tooltipColor,
borderAfterBefore: 'solid transparent',
border: "1px solid " + ((_r$2 = Colors$4.input) === null || _r$2 === void 0 ? void 0 : _r$2.tooltipBorder),
backgroundColor: (_s$2 = Colors$4.input) === null || _s$2 === void 0 ? void 0 : _s$2.tooltipBackgroundColor,
boxShadow: "0px 0px 3px 1px " + ((_t$2 = Colors$4.input) === null || _t$2 === void 0 ? void 0 : _t$2.tooltipColorBoxShadow),
},
symbol: {
left: '10px',
bottom: '10px',
fontSize: '13px',
position: 'absolute',
fontFamily: 'sans-serif',
color: (_u$2 = Colors$4.input) === null || _u$2 === void 0 ? void 0 : _u$2.symbol,
fontFamilyDisabled: 'sans-serif',
fontFamilyDisabledClick: 'sans-serif',
colorDisabled: (_v$2 = Colors$4.input) === null || _v$2 === void 0 ? void 0 : _v$2.symbolHight,
colorDisabledClick: (_w$2 = Colors$4.input) === null || _w$2 === void 0 ? void 0 : _w$2.primary,
},
messageError: {
required: 'Campo requerido.',
numeric: 'Solo puede contener números',
email: 'El formato de email no es válido',
letter: 'El campo debe contener solo letra0s.',
minimum: function (value) { return "El valor es m\u00EDnimo: " + numberFormat(Number(value)) + "."; },
maximum: function (value) { return "El valor es m\u00E1ximo: " + numberFormat(Number(value)) + "."; },
date: function (value) { return "La fecha no es valida: " + numberFormat(Number(value)) + "."; },
hour: function (value) { return "La hora no es validad: " + numberFormat(Number(value)) + "."; },
range: function (min, max) { return "El rango de caracteres es de " + min + " a " + max + "."; },
pass: 'La contraseña debe tener al entre 8 y 16 caracteres, al menos un dígito, al menos una minúscula y al menos una mayúscula. Puede tener otros símbolos.',
},
loading: {
color: (_x$2 = Colors$4.loading) === null || _x$2 === void 0 ? void 0 : _x$2.color
},
tooltipInput: {
zIndex: 1,
opacity: '0',
padding: '5px',
color: '#fff',
maxWidth: '150px',
fontSize: '10px',
position: 'fixed',
maxHeight: '80px',
borderRadius: '4px',
visibility: 'hidden',
fontFamily: 'sans-serif',
backgroundColor: '#00000099',
},
tooltipLabel: {
zIndex: 1,
opacity: '0',
padding: '5px',
color: '#fff',
maxWidth: '150px',
fontSize: '10px',
position: 'fixed',
maxHeight: '80px',
borderRadius: '4px',
visibility: 'hidden',
fontFamily: 'sans-serif',
backgroundColor: '#00000099',
}
};
// Config init input
var useInitConfigInput = function () {
var configInputStyles = React.useCallback(function (newStyles) {
defaultStyleInput = {
container: __assign(__assign({}, defaultStyleInput.container), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.container) || {})),
label: __assign(__assign({}, defaultStyleInput.label), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.label) || {})),
tooltip: __assign(__assign({}, defaultStyleInput.tooltip), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.tooltip) || {})),
input: __assign(__assign({}, defaultStyleInput.input), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.input) || {})),
symbol: __assign(__assign({}, defaultStyleInput.symbol), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.symbol) || {})),
messageError: __assign(__assign({}, defaultStyleInput.messageError), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.messageError) || {})),
loading: __assign(__assign({}, defaultStyleInput.loading), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.loading) || {})),
tooltipInput: __assign(__assign({}, defaultStyleInput.tooltipInput), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.tooltipInput) || {})),
tooltipLabel: __assign(__assign({}, defaultStyleInput.tooltipLabel), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.tooltipLabel) || {})),
boxInput: __assign(__assign({}, defaultStyleInput.boxInput), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.boxInput) || {}))
};
}, []);
return [defaultStyleInput, configInputStyles];
};
/* eslint-disable no-unused-vars */
var _a$1, _b$1, _c$1, _d$1, _e$1, _f$1, _g$1, _h$1, _j$1, _k$1, _l$1, _m$1, _o$1, _p$1, _q$1, _r$1, _s$1, _t$1, _u$1, _v$1, _w$1, _x$1, _y, _z, _0, _1;
var Colors$3 = InitConfigColor.getColors();
var defaultStyle$1 = {
container: {
width: '100%',
display: 'flex',
widthPhone: '100%',
widthTable: '100%',
position: 'relative',
maxWidthTable: '768px',
maxWidthPhone: '375px',
flexDirection: 'column',
hoverDisplayTooltip: 'block'
},
label: {
border: 'none',
margin: '1px 0',
fontSize: '13px',
activeTitle: true,
textAlign: 'start',
overflow: 'hidden',
padding: '5.2px 0px',
whiteSpace: 'nowrap',
fontFamily: 'sans-serif',
textOverflow: 'ellipsis',
color: (_a$1 = Colors$3.select) === null || _a$1 === void 0 ? void 0 : _a$1.label,
hoverDisplayTooltip: 'block',
colorError: (_b$1 = Colors$3.select) === null || _b$1 === void 0 ? void 0 : _b$1.labelError,
colorNotValue: (_c$1 = Colors$3.select) === null || _c$1 === void 0 ? void 0 : _c$1.labelLight,
colorDisabled: (_d$1 = Colors$3.select) === null || _d$1 === void 0 ? void 0 : _d$1.labelHight,
},
select: {
activeTitle: true
},
tooltip: {
left: '0px',
zIndex: 10,
bottom: '-35%',
display: 'none',
fontSize: '11px',
borderRadius: '2px',
padding: '2px 10px',
position: 'absolute',
topAfterBefore: '100%',
leftAfterBefore: '85%',
fontFamily: 'sans-serif',
positionAfterBefore: 'absolute',
pointerEventsAfterBefore: 'none',
color: (_e$1 = Colors$3.select) === null || _e$1 === void 0 ? void 0 : _e$1.tooltipColor,
borderAfterBefore: 'solid transparent',
border: "1px solid " + ((_f$1 = Colors$3.select) === null || _f$1 === void 0 ? void 0 : _f$1.tooltipBorder),
backgroundColor: (_g$1 = Colors$3.select) === null || _g$1 === void 0 ? void 0 : _g$1.tooltipBackgroundColor,
boxShadow: "0px 0px 3px 1px " + ((_h$1 = Colors$3.select) === null || _h$1 === void 0 ? void 0 : _h$1.tooltipColorBoxShadow),
},
messageError: {
required: 'Campo requerido.'
},
loading: {
color: (_j$1 = Colors$3.loading) === null || _j$1 === void 0 ? void 0 : _j$1.color
},
theme: {
colors: {
danger: String((_k$1 = Colors$3.select) === null || _k$1 === void 0 ? void 0 : _k$1.danger),
primary: String((_l$1 = Colors$3.select) === null || _l$1 === void 0 ? void 0 : _l$1.primary),
primary75: ((_m$1 = Colors$3.select) === null || _m$1 === void 0 ? void 0 : _m$1.primary) + "BA",
primary50: ((_o$1 = Colors$3.select) === null || _o$1 === void 0 ? void 0 : _o$1.primary) + "80",
primary25: ((_p$1 = Colors$3.select) === null || _p$1 === void 0 ? void 0 : _p$1.primary) + "40",
neutral10: String((_q$1 = Colors$3.select) === null || _q$1 === void 0 ? void 0 : _q$1.neutral10),
neutral20: String((_r$1 = Colors$3.select) === null || _r$1 === void 0 ? void 0 : _r$1.neutral20),
neutral30: String((_s$1 = Colors$3.select) === null || _s$1 === void 0 ? void 0 : _s$1.neutral30),
neutral40: String((_t$1 = Colors$3.select) === null || _t$1 === void 0 ? void 0 : _t$1.neutral40),
neutral50: String((_u$1 = Colors$3.select) === null || _u$1 === void 0 ? void 0 : _u$1.neutral50),
neutral60: String((_v$1 = Colors$3.select) === null || _v$1 === void 0 ? void 0 : _v$1.neutral60),
neutral70: String((_w$1 = Colors$3.select) === null || _w$1 === void 0 ? void 0 : _w$1.neutral70),
neutral80: String((_x$1 = Colors$3.select) === null || _x$1 === void 0 ? void 0 : _x$1.neutral80),
neutral90: String((_y = Colors$3.select) === null || _y === void 0 ? void 0 : _y.neutral90),
dangerLight: String((_z = Colors$3.select) === null || _z === void 0 ? void 0 : _z.dangerLight),
neutral0: String((_0 = Colors$3.select) === null || _0 === void 0 ? void 0 : _0.selectBackgroundColor),
neutral5: String((_1 = Colors$3.select) === null || _1 === void 0 ? void 0 : _1.selectBackgroundColorDisabled),
},
borderRadius: 4,
spacing: {
baseUnit: 3.5,
controlHeight: 2,
menuGutter: 3
}
},
tooltipSelect: {
zIndex: 1,
opacity: '0',
padding: '5px',
color: '#fff',
maxWidth: '150px',
fontSize: '10px',
position: 'fixed',
maxHeight: '80px',
borderRadius: '4px',
visibility: 'hidden',
fontFamily: 'sans-serif',
backgroundColor: '#00000099',
},
tooltipLabel: {
zIndex: 1,
opacity: '0',
padding: '5px',
color: '#fff',
maxWidth: '150px',
fontSize: '10px',
position: 'fixed',
maxHeight: '80px',
borderRadius: '4px',
visibility: 'hidden',
fontFamily: 'sans-serif',
backgroundColor: '#00000099',
}
};
// Config init select
var useInitConfigSelect = function () {
var configSelectStyles = React.useCallback(function (newStyles) {
defaultStyle$1 = {
container: __assign(__assign({}, defaultStyle$1.container), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.container) || {})),
label: __assign(__assign({}, defaultStyle$1.label), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.label) || {})),
tooltip: __assign(__assign({}, defaultStyle$1.tooltip), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.tooltip) || {})),
select: __assign(__assign({}, defaultStyle$1.select), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.select) || {})),
messageError: __assign(__assign({}, defaultStyle$1.messageError), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.messageError) || {})),
loading: __assign(__assign({}, defaultStyle$1.loading), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.loading) || {})),
theme: __assign(__assign({}, defaultStyle$1.theme), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.theme) || {})),
tooltipLabel: __assign(__assign({}, defaultStyle$1.tooltipLabel), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.tooltipLabel) || {})),
tooltipSelect: __assign(__assign({}, defaultStyle$1.tooltipSelect), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.tooltipSelect) || {})),
boxSelect: __assign(__assign({}, defaultStyle$1.boxSelect), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.boxSelect) || {}))
};
}, []);
return [defaultStyle$1, configSelectStyles];
};
/* eslint-disable no-unused-vars */
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
var Colors$2 = InitConfigColor.getColors();
var defaultStyle = {
container: {
width: '100%',
display: 'flex',
widthPhone: '100%',
widthTable: '100%',
position: 'relative',
maxWidthTable: '768px',
maxWidthPhone: '375px',
flexDirection: 'column',
hoverDisplayTooltip: 'block'
},
label: {
border: 'none',
margin: '1px 0',
fontSize: '13px',
activeTitle: true,
textAlign: 'start',
overflow: 'hidden',
padding: '5.2px 0px',
whiteSpace: 'nowrap',
fontFamily: 'sans-serif',
textOverflow: 'ellipsis',
color: (_a = Colors$2.textarea) === null || _a === void 0 ? void 0 : _a.label,
hoverDisplayTooltip: 'block',
colorError: (_b = Colors$2.textarea) === null || _b === void 0 ? void 0 : _b.labelError,
colorNotValue: (_c = Colors$2.textarea) === null || _c === void 0 ? void 0 : _c.labelLight,
colorDisabled: (_d = Colors$2.textarea) === null || _d === void 0 ? void 0 : _d.labelHight,
},
textarea: {
outline: '0',
width: '100%',
padding: '0 7px',
fontSize: '13px',
minHeight: '36px',
activeTitle: true,
borderRadius: '5px',
fontFamily: 'sans-serif',
cursorDisabled: 'no-drop',
color: (_e = Colors$2.textarea) === null || _e === void 0 ? void 0 : _e.textarea,
hoverDisplayTooltip: 'block',
cursorDisabledClick: 'pointer',
fontFamilyDisabled: 'sans-serif',
fontFamilyDisabledClick: 'sans-serif',
colorDisabled: (_f = Colors$2.textarea) === null || _f === void 0 ? void 0 : _f.textareaHight,
colorDisabledClick: (_g = Colors$2.textarea) === null || _g === void 0 ? void 0 : _g.primary,
border: "1px solid " + ((_h = Colors$2.textarea) === null || _h === void 0 ? void 0 : _h.textareaBorder),
borderFocus: "1px solid " + ((_j = Colors$2.textarea) === null || _j === void 0 ? void 0 : _j.primary),
backgroundColor: (_k = Colors$2.textarea) === null || _k === void 0 ? void 0 : _k.textareaBackgroundColor,
borderError: "1px solid " + ((_l = Colors$2.textarea) === null || _l === void 0 ? void 0 : _l.textareaBorderError),
borderSuccess: "1px solid " + ((_m = Colors$2.textarea) === null || _m === void 0 ? void 0 : _m.textareaBorderSuccess),
backgroundColorDisabled: (_o = Colors$2.textarea) === null || _o === void 0 ? void 0 : _o.textareaBackgroundColorDisabled,
backgroundColorDisabledClick: (_p = Colors$2.textarea) === null || _p === void 0 ? void 0 : _p.textareaBackgroundColorDisabledClick,
},
tooltip: {
left: '0px',
zIndex: 10,
bottom: '-35%',
display: 'none',
fontSize: '11px',
borderRadius: '2px',
padding: '2px 10px',
position: 'absolute',
topAfterBefore: '100%',
leftAfterBefore: '85%',
fontFamily: 'sans-serif',
positionAfterBefore: 'absolute',
pointerEventsAfterBefore: 'none',
color: (_q = Colors$2.textarea) === null || _q === void 0 ? void 0 : _q.tooltipColor,
borderAfterBefore: 'solid transparent',
border: "1px solid " + ((_r = Colors$2.textarea) === null || _r === void 0 ? void 0 : _r.tooltipBorder),
backgroundColor: (_s = Colors$2.textarea) === null || _s === void 0 ? void 0 : _s.tooltipBackgroundColor,
boxShadow: "0px 0px 3px 1px " + ((_t = Colors$2.textarea) === null || _t === void 0 ? void 0 : _t.tooltipColorBoxShadow),
},
symbol: {
left: '10px',
bottom: '10px',
fontSize: '13px',
position: 'absolute',
fontFamily: 'sans-serif',
color: (_u = Colors$2.textarea) === null || _u === void 0 ? void 0 : _u.symbol,
fontFamilyDisabled: 'sans-serif',
fontFamilyDisabledClick: 'sans-serif',
colorDisabled: (_v = Colors$2.textarea) === null || _v === void 0 ? void 0 : _v.symbolHight,
colorDisabledClick: (_w = Colors$2.textarea) === null || _w === void 0 ? void 0 : _w.primary,
},
messageError: {
required: 'Campo requerido.',
numeric: 'Solo puede contener números',
email: 'El formato de email no es válido',
letter: 'El campo debe contener solo letra0s.',
minimum: function (value) { return "El valor es m\u00EDnimo: " + numberFormat(Number(value)) + "."; },
maximum: function (value) { return "El valor es m\u00E1ximo: " + numberFormat(Number(value)) + "."; },
date: function (value) { return "La fecha no es valida: " + numberFormat(Number(value)) + "."; },
hour: function (value) { return "La hora no es validad: " + numberFormat(Number(value)) + "."; },
range: function (min, max) { return "El rango de caracteres es de " + min + " a " + max + "."; },
pass: 'La contraseña debe tener al entre 8 y 16 caracteres, al menos un dígito, al menos una minúscula y al menos una mayúscula. Puede tener otros símbolos.',
},
loading: {
color: (_x = Colors$2.loading) === null || _x === void 0 ? void 0 : _x.color
},
tooltipTextArea: {
zIndex: 1,
opacity: '0',
padding: '5px',
color: '#fff',
maxWidth: '150px',
fontSize: '10px',
position: 'fixed',
maxHeight: '80px',
borderRadius: '4px',
visibility: 'hidden',
fontFamily: 'sans-serif',
backgroundColor: '#00000099',
},
tooltipLabel: {
zIndex: 1,
opacity: '0',
padding: '5px',
color: '#fff',
maxWidth: '150px',
fontSize: '10px',
position: 'fixed',
maxHeight: '80px',
borderRadius: '4px',
visibility: 'hidden',
fontFamily: 'sans-serif',
backgroundColor: '#00000099',
}
};
// Config init textarea
var useInitConfigTextArea = function () {
var configTextAreaStyles = React.useCallback(function (newStyles) {
defaultStyle = {
container: __assign(__assign({}, defaultStyle.container), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.container) || {})),
label: __assign(__assign({}, defaultStyle.label), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.label) || {})),
tooltip: __assign(__assign({}, defaultStyle.tooltip), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.tooltip) || {})),
textarea: __assign(__assign({}, defaultStyle.textarea), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.textarea) || {})),
symbol: __assign(__assign({}, defaultStyle.symbol), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.symbol) || {})),
messageError: __assign(__assign({}, defaultStyle.messageError), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.messageError) || {})),
loading: __assign(__assign({}, defaultStyle.loading), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.loading) || {})),
tooltipTextArea: __assign(__assign({}, defaultStyle.tooltipTextArea), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.tooltipTextArea) || {})),
tooltipLabel: __assign(__assign({}, defaultStyle.tooltipLabel), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.tooltipLabel) || {})),
boxTextArea: __assign(__assign({}, defaultStyle.boxTextArea), ((newStyles === null || newStyles === void 0 ? void 0 : newStyles.boxTextArea) || {}))
};
}, []);
return [defaultStyle, configTextAreaStyles];
};
var Container$1 = styled__default['default'].div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n transform: translate(-50%,-50%);\n width: ", ";\n height: ", ";\n position: ", ";\n ", "\n ", "\n ", "\n ", "\n"], ["\n transform: translate(-50%,-50%);\n width: ", ";\n height: ", ";\n position: ", ";\n ", "\n ", "\n ", "\n ", "\n"])), function (_a) {
var size = _a.size;
return size || '50px';
}, function (_a) {
var size = _a.size;
return size || '50px';
}, function (_a) {
var position = _a.position;
return position || 'absolute';
}, function (_a) {
var left = _a.left;
return left && styled.css(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["left: ", ";"], ["left: ", ";"])), left);
}, function (_a) {
var right = _a.right;
return right && styled.css(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["right: ", ";"], ["right: ", ";"])), right);
}, function (_a) {
var top = _a.top;
return top && styled.css(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["top: ", ";"], ["top: ", ";"])), top);
}, function (_a) {
var bottom = _a.bottom;
return bottom && styled.css(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["bottom: ", ";"], ["bottom: ", ";"])), bottom);
});
var Animation = styled.keyframes(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n 0% {\n stroke-dasharray: 1 98;\n stroke-dashoffset: -105;\n }\n 50% {\n stroke-dasharray: 80 10;\n stroke-dashoffset: -160;\n }\n 100% {\n stroke-dasharray: 1 98;\n stroke-dashoffset: -300;\n }\n"], ["\n 0% {\n stroke-dasharray: 1 98;\n stroke-dashoffset: -105;\n }\n 50% {\n stroke-dasharray: 80 10;\n stroke-dashoffset: -160;\n }\n 100% {\n stroke-dasharray: 1 98;\n stroke-dashoffset: -300;\n }\n"])));
var Circle = styled__default['default'].circle(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n transform-origin: center;\n animation-name: ", ";\n animation-duration: 1.2s;\n animation-timing-function: cubic-bezier;\n animation-iteration-count: infinite;\n"], ["\n transform-origin: center;\n animation-name: ", ";\n animation-duration: 1.2s;\n animation-timing-function: cubic-bezier;\n animation-iteration-count: infinite;\n"])), Animation);
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$3, templateObject_6$3, templateObject_7$3;
var Colors$1 = InitConfigColor.getColors();
var Loading = function (_a) {
var _b, _c;
var size = _a.size, top = _a.top, bottom = _a.bottom, left = _a.left, right = _a.right, position = _a.position, color = _a.color;
return (React__default['default'].createElement(Container$1, { size: size, top: top, bottom: bottom, right: right, left: left, position: position },
React__default['default'].createElement("svg", { viewBox: '0 0 100 100' },
React__default['default'].createElement("defs", null,
React__default['default'].createElement("filter", { id: 'shadow' },
React__default['default'].createElement("feDropShadow", { dx: '0', dy: '0', stdDeviation: '1.5', floodColor: color || ((_b = Colors$1.loading) === null || _b === void 0 ? void 0 : _b.color) }))),
React__default['default'].createElement(Circle, { fill: 'transparent', stroke: color || ((_c = Colors$1.loading) === null || _c === void 0 ? void 0 : _c.color), strokeWidth: '7px', strokeLinecap: 'round', filter: 'url(#shadow)', cx: '50', cy: '50', r: '45' }))));
};
// Estilos
var Tooltip$2 = styled__default['default'].div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n left: ", ";\n color: ", ";\n border: ", ";\n z-index: ", ";\n display: ", ";\n padding: ", ";\n font-size: ", ";\n position: ", ";\n box-shadow: ", ";\n font-family: ", ";\n border-radius: ", ";\n ", "\n background-color: ", ";\n ", "\n &::after, &::before {\n left: ", ";\n position: ", ";\n border: ", ";\n ", "\n pointer-events: ", ";\n ", "\n ", "\n }\n ", ";\n ", ";\n"], ["\n left: ", ";\n color: ", ";\n border: ", ";\n z-index: ", ";\n display: ", ";\n padding: ", ";\n font-size: ", ";\n position: ", ";\n box-shadow: ", ";\n font-family: ", ";\n border-radius: ", ";\n ", "\n background-color: ", ";\n ", "\n &::after, &::before {\n left: ", ";\n position: ", ";\n border: ", ";\n ", "\n pointer-events: ", ";\n ", "\n ", "\n }\n ", ";\n ", ";\n"])), function (_a) {
var _b;
var gs = _a.gs, tLeft = _a.tLeft;
return tLeft || ((_b = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _b === void 0 ? void 0 : _b.left);
}, function (_a) {
var _b;
var gs = _a.gs, tColor = _a.tColor;
return tColor || ((_b = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _b === void 0 ? void 0 : _b.color);
}, function (_a) {
var _b;
var gs = _a.gs, tBorder = _a.tBorder;
return tBorder || ((_b = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _b === void 0 ? void 0 : _b.border);
}, function (_a) {
var _b;
var gs = _a.gs, tZIndex = _a.tZIndex;
return tZIndex || ((_b = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _b === void 0 ? void 0 : _b.zIndex);
}, function (_a) {
var _b;
var gs = _a.gs, tDisplay = _a.tDisplay;
return tDisplay || ((_b = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _b === void 0 ? void 0 : _b.display);
}, function (_a) {
var _b;
var gs = _a.gs, tPadding = _a.tPadding;
return tPadding || ((_b = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _b === void 0 ? void 0 : _b.padding);
}, function (_a) {
var _b;
var gs = _a.gs, tFontSize = _a.tFontSize;
return tFontSize || ((_b = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _b === void 0 ? void 0 : _b.fontSize);
}, function (_a) {
var _b;
var gs = _a.gs, tPosition = _a.tPosition;
return tPosition || ((_b = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _b === void 0 ? void 0 : _b.position);
}, function (_a) {
var _b;
var gs = _a.gs, tBoxShadow = _a.tBoxShadow;
return tBoxShadow || ((_b = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _b === void 0 ? void 0 : _b.boxShadow);
}, function (_a) {
var _b;
var gs = _a.gs, tFontFamily = _a.tFontFamily;
return tFontFamily || ((_b = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _b === void 0 ? void 0 : _b.fontFamily);
}, function (_a) {
var _b;
var gs = _a.gs, tBorderRadius = _a.tBorderRadius;
return tBorderRadius || ((_b = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _b === void 0 ? void 0 : _b.borderRadius);
}, function (_a) {
var _b, _c;
var gs = _a.gs, tTop = _a.tTop;
return (tTop || ((_b = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _b === void 0 ? void 0 : _b.top)) && styled.css(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["top: ", ";"], ["top: ", ";"])), tTop || ((_c = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _c === void 0 ? void 0 : _c.top));
}, function (_a) {
var _b;
var gs = _a.gs, tBackgroundColor = _a.tBackgroundColor;
return tBackgroundColor || ((_b = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _b === void 0 ? void 0 : _b.backgroundColor);
}, function (_a) {
var _b, _c;
var gs = _a.gs, tBottom = _a.tBottom;
return (tBottom || ((_b = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _b === void 0 ? void 0 : _b.bottom)) && styled.css(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["bottom: ", ";"], ["bottom: ", ";"])), tBottom || ((_c = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _c === void 0 ? void 0 : _c.bottom));
}, function (_a) {
var _b;
var gs = _a.gs, tLeftAfterBefore = _a.tLeftAfterBefore;
return tLeftAfterBefore || ((_b = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _b === void 0 ? void 0 : _b.leftAfterBefore);
}, function (_a) {
var _b;
var gs = _a.gs, tPositionAfterBefore = _a.tPositionAfterBefore;
return tPositionAfterBefore || ((_b = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _b === void 0 ? void 0 : _b.position);
}, function (_a) {
var _b;
var gs = _a.gs, tBorderAfterBefore = _a.tBorderAfterBefore;
return tBorderAfterBefore || ((_b = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _b === void 0 ? void 0 : _b.borderAfterBefore);
}, function (_a) {
var _b, _c;
var gs = _a.gs, tTopAfterBefore = _a.tTopAfterBefore;
return (tTopAfterBefore || ((_b = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _b === void 0 ? void 0 : _b.topAfterBefore)) && styled.css(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["top: ", ";"], ["top: ", ";"])), tTopAfterBefore || ((_c = gs === null || gs === void 0 ? void 0 : gs.tooltip) === null || _c === void 0 ? void 0 : _c.topAfterBefore));
}, function (_a) {
var _b;
var g