@rolster/react-components 18.9.0 → 18.10.0

package/dist/esm/components/organisms/SelectField/SelectField.js

@@ -1,102 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { useListControl } from '../../../hooks';
+import reactI18n from '../../../i18n';
 import { renderClassStatus } from '../../../utils/css';
 import { RlsMessageIcon, RlsIcon } from '../../atoms';
 import { RlsBallot } from '../../molecules';
+import { useSelectField } from './select-field.hook';
 import './SelectField.css';
-export function RlsSelectField({ suggestions, children, disabled, formControl, onSelect, onValue, placeholder, rlsTheme }) {
-    const { active, boxContentRef, higher, inputRef, listRef, collection, value, visible, setActive, setValue, setVisible, navigationElement, navigationInput } = useListControl({ suggestions, formControl });
-    const [changeInternal, setChangeInternal] = useState(false);
-    useEffect(() => {
-        if (!changeInternal) {
-            redefineDescription();
-        }
-        setChangeInternal(false);
-    }, [formControl?.state]);
-    useEffect(() => {
-        redefineDescription();
-    }, [collection]);
-    function redefineDescription() {
-        const element = formControl?.state && collection.findElement(formControl?.state);
-        setValue(element?.description || '');
-    }
-    function onFocusInput() {
-        setActive(true);
-    }
-    function onBlurInput() {
-        setActive(false);
-    }
-    function onClickInput() {
-        setVisible(true);
-    }
-    function onKeydownInput(event) {
-        switch (event.code) {
-            case 'Space':
-                setVisible(true);
-                break;
-            case 'Enter':
-                setVisible(true);
-                break;
-            case 'Escape':
-                setVisible(false);
-                break;
-            case 'Tab':
-                setVisible(false);
-                break;
-            default:
-                navigationInput(event);
-                break;
-        }
-    }
-    function onClickAction() {
-        const newVisible = !visible;
-        setVisible(newVisible);
-        if (newVisible) {
-            inputRef?.current?.focus();
-        }
-    }
-    function onClickBackdrop() {
-        setVisible(false);
-    }
-    function onClickItem(element) {
-        return () => {
-            onChange(element);
-        };
-    }
-    function onKeydownItem(element) {
-        return (event) => {
-            switch (event.code) {
-                case 'Enter':
-                    onChange(element);
-                    break;
-                default:
-                    navigationElement(event);
-                    break;
-            }
-        };
-    }
-    function onChange({ description, value }) {
-        inputRef?.current?.focus();
-        setVisible(false);
-        if (onSelect) {
-            onSelect(value);
-        }
-        else {
-            if (formControl) {
-                setChangeInternal(true);
-                formControl.setState(value);
-            }
-            setValue(description);
-        }
-        if (onValue) {
-            onValue(value);
-        }
-    }
-    return (_jsxs("div", { ref: boxContentRef, className: renderClassStatus('rls-box-field', { active, disabled }, 'rls-select-field rls-list-field'), "rls-theme": rlsTheme, children: [children && _jsx("label", { className: "rls-box-field__label", children: children }), _jsx("div", { className: "rls-box-field__component", children: _jsxs("div", { className: "rls-box-field__body", children: [_jsx("input", { ref: inputRef, className: "rls-list-field__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: value, onFocus: onFocusInput, onBlur: onBlurInput, onClick: onClickInput, onKeyDown: onKeydownInput }), _jsx("button", { className: renderClassStatus('rls-list-field__action', { visible }), disabled: disabled, onClick: onClickAction, children: _jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), formControl?.touched && formControl?.error && (_jsx("div", { className: "rls-box-field__error", children: _jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) })), _jsxs("div", { className: renderClassStatus('rls-list-field__suggestions', {
-                    visible,
-                    hide: !visible,
-                    higher
-                }), children: [_jsx("div", { className: "rls-list-field__suggestions__body", children: _jsxs("ul", { ref: listRef, className: "rls-list-field__ul", children: [suggestions.map((element, index) => (_jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickItem(element), onKeyDown: onKeydownItem(element), children: _jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title }) }, index))), !suggestions.length && (_jsx("li", { className: "rls-list-field__empty", children: _jsxs("div", { className: "rls-list-field__empty__description", children: [_jsx("label", { className: "label-bold truncate", children: "Selecci\u00F3n no disponible" }), _jsx("p", { className: "caption-regular", children: "Lo sentimos, en el momento no hay elementos en el listado" })] }) }))] }) }), _jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
+export function RlsSelectFieldTemplate({ suggestions, children, disabled, formControl, placeholder, rlsTheme, onSelect, onValue, render }) {
+    const { listControl, onBlurInput, onClickAction, onClickBackdrop, onClickElement, onClickInput, onFocusInput, onKeydownElement, onKeydownInput } = useSelectField({
+        suggestions,
+        disabled,
+        formControl,
+        onSelect,
+        onValue
+    });
+    return (_jsxs("div", { ref: listControl.boxContentRef, className: renderClassStatus('rls-box-field', { focused: listControl.focused, disabled }, 'rls-select-field rls-list-field'), "rls-theme": rlsTheme, children: [children && _jsx("label", { className: "rls-box-field__label", children: children }), _jsx("div", { className: "rls-box-field__component", children: _jsxs("div", { className: "rls-box-field__body", children: [_jsx("input", { ref: listControl.inputRef, className: "rls-list-field__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: listControl.value, onFocus: onFocusInput, onBlur: onBlurInput, onClick: onClickInput, onKeyDown: onKeydownInput }), _jsx("button", { className: renderClassStatus('rls-list-field__action', {
+                                visible: listControl.visible
+                            }), disabled: disabled, onClick: onClickAction, children: _jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), formControl?.touched && formControl?.error && (_jsx("div", { className: "rls-box-field__error", children: _jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) })), _jsxs("div", { className: renderClassStatus('rls-list-field__suggestions', {
+                    visible: listControl.visible,
+                    hide: !listControl.visible,
+                    higher: listControl.higher
+                }), children: [_jsx("div", { className: "rls-list-field__suggestions__body", children: _jsxs("ul", { ref: listControl.listRef, className: "rls-list-field__ul", children: [suggestions.map((element, index) => (_jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (_jsx("li", { className: "rls-list-field__empty", children: _jsxs("div", { className: "rls-list-field__empty__description", children: [_jsx("label", { className: "label-bold truncate", children: reactI18n('listEmptyTitle') }), _jsx("p", { className: "caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), _jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
+}
+export function RlsSelectField(props) {
+    return (_jsx(RlsSelectFieldTemplate, { ...props, render: (element) => (_jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
 }
 //# sourceMappingURL=SelectField.js.map

package/dist/esm/components/organisms/SelectField/SelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../../../src/components/organisms/SelectField/SelectField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../../../src/components/organisms/SelectField/SelectField.tsx"],"names":[],"mappings":";AAEA,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,mBAAmB,CAAC;AAmB3B,MAAM,UAAU,sBAAsB,CAGpC,EACA,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,EACyB;IAC/B,MAAM,EACJ,WAAW,EACX,WAAW,EACX,aAAa,EACb,eAAe,EACf,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACf,GAAG,cAAc,CAAC;QACjB,WAAW;QACX,QAAQ;QACR,WAAW;QACX,QAAQ;QACR,OAAO;KACR,CAAC,CAAC;IAEH,OAAO,CACL,eACE,GAAG,EAAE,WAAW,CAAC,aAAa,EAC9B,SAAS,EAAE,iBAAiB,CAC1B,eAAe,EACf,EAAE,OAAO,EAAE,WAAW,CAAC,OAAO,EAAE,QAAQ,EAAE,EAC1C,iCAAiC,CAClC,eACU,QAAQ,aAElB,QAAQ,IAAI,gBAAO,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAS,EAEvE,cAAK,SAAS,EAAC,0BAA0B,YACvC,eAAK,SAAS,EAAC,qBAAqB,aAClC,gBACE,GAAG,EAAE,WAAW,CAAC,QAAQ,EACzB,SAAS,EAAC,yBAAyB,EACnC,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,WAAW,CAAC,KAAK,EACxB,OAAO,EAAE,YAAY,EACrB,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,cAAc,GACzB,EACF,iBACE,SAAS,EAAE,iBAAiB,CAAC,wBAAwB,EAAE;gCACrD,OAAO,EAAE,WAAW,CAAC,OAAO;6BAC7B,CAAC,EACF,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,aAAa,YAEtB,KAAC,OAAO,IAAC,KAAK,EAAC,gBAAgB,GAAG,GAC3B,IACL,GACF,EAEL,WAAW,EAAE,OAAO,IAAI,WAAW,EAAE,KAAK,IAAI,CAC7C,cAAK,SAAS,EAAC,sBAAsB,YACnC,KAAC,cAAc,IAAC,IAAI,EAAC,gBAAgB,EAAC,QAAQ,EAAC,QAAQ,YACpD,WAAW,CAAC,KAAK,CAAC,OAAO,GACX,GACb,CACP,EAED,eACE,SAAS,EAAE,iBAAiB,CAAC,6BAA6B,EAAE;oBAC1D,OAAO,EAAE,WAAW,CAAC,OAAO;oBAC5B,IAAI,EAAE,CAAC,WAAW,CAAC,OAAO;oBAC1B,MAAM,EAAE,WAAW,CAAC,MAAM;iBAC3B,CAAC,aAEF,cAAK,SAAS,EAAC,mCAAmC,YAChD,cAAI,GAAG,EAAE,WAAW,CAAC,OAAO,EAAE,SAAS,EAAC,oBAAoB,aACzD,WAAW,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,aAEE,SAAS,EAAC,yBAAyB,EACnC,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,EAChC,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,YAEnC,MAAM,CAAC,OAAO,CAAC,IANX,KAAK,CAOP,CACN,CAAC,EAED,CAAC,WAAW,CAAC,MAAM,IAAI,CACtB,aAAI,SAAS,EAAC,uBAAuB,YACnC,eAAK,SAAS,EAAC,oCAAoC,aACjD,gBAAO,SAAS,EAAC,qBAAqB,YACnC,SAAS,CAAC,gBAAgB,CAAC,GACtB,EACR,YAAG,SAAS,EAAC,iBAAiB,YAC3B,SAAS,CAAC,sBAAsB,CAAC,GAChC,IACA,GACH,CACN,IACE,GACD,EAEN,cACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,eAAe,GACnB,IACH,IACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc,CAC5B,KAA0C;IAE1C,OAAO,CACL,KAAC,sBAAsB,OACjB,KAAK,EACT,MAAM,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CACnB,KAAC,SAAS,IACR,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,GAAG,EAAE,OAAO,CAAC,GAAG,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,YAEzB,OAAO,CAAC,KAAK,GACJ,CACb,GACD,CACH,CAAC;AACJ,CAAC"}

package/dist/esm/components/organisms/SelectField/select-field.hook.d.ts

@@ -0,0 +1,24 @@
+import { ReactControl } from '@rolster/react-forms';
+import { KeyboardEvent, KeyboardEventHandler, MouseEventHandler } from 'react';
+import { ListControl } from '../../../hooks';
+import { AbstractListElement as Element } from '../../../models';
+export interface SelectControl<T = unknown, E extends Element<T> = Element<T>> {
+    listControl: ListControl<T>;
+    onBlurInput: () => void;
+    onClickAction: () => void;
+    onClickBackdrop: () => void;
+    onClickElement: (element: E) => MouseEventHandler;
+    onClickInput: () => void;
+    onFocusInput: () => void;
+    onKeydownElement: (element: E) => KeyboardEventHandler;
+    onKeydownInput: (event: KeyboardEvent) => void;
+}
+interface SelectProps<T = unknown, E extends Element<T> = Element<T>> {
+    suggestions: E[];
+    disabled?: boolean;
+    formControl?: ReactControl<HTMLElement, T>;
+    onSelect?: (value: T) => void;
+    onValue?: (value?: T) => void;
+}
+export declare function useSelectField<T = unknown, E extends Element<T> = Element<T>>({ suggestions, formControl, onSelect, onValue }: SelectProps<T, E>): SelectControl<T, E>;
+export {};

package/dist/esm/components/organisms/SelectField/select-field.hook.js

@@ -0,0 +1,104 @@
+import { useEffect, useState } from 'react';
+import { useListControl } from '../../../hooks';
+export function useSelectField({ suggestions, formControl, onSelect, onValue }) {
+    const listControl = useListControl({ suggestions, formControl });
+    const { collection, inputRef, visible, setFocused, setValue, setVisible, navigationElement, navigationInput } = listControl;
+    const [changeInternal, setChangeInternal] = useState(false);
+    useEffect(() => {
+        if (!changeInternal) {
+            redefineDescription();
+        }
+        setChangeInternal(false);
+    }, [formControl?.state]);
+    useEffect(() => {
+        redefineDescription();
+    }, [collection]);
+    function redefineDescription() {
+        const element = formControl?.state && collection.find(formControl?.state);
+        setValue(element?.description || '');
+    }
+    function onFocusInput() {
+        setFocused(true);
+    }
+    function onBlurInput() {
+        setFocused(false);
+    }
+    function onClickControl() {
+        setVisible(true);
+    }
+    function onKeydownInput(event) {
+        switch (event.code) {
+            case 'Space':
+                setVisible(true);
+                break;
+            case 'Enter':
+                setVisible(true);
+                break;
+            case 'Escape':
+                setVisible(false);
+                break;
+            case 'Tab':
+                setVisible(false);
+                break;
+            default:
+                navigationInput(event);
+                break;
+        }
+    }
+    function onClickAction() {
+        const newVisible = !visible;
+        setVisible(newVisible);
+        if (newVisible) {
+            inputRef?.current?.focus();
+        }
+    }
+    function onClickBackdrop() {
+        setVisible(false);
+    }
+    function onClickElement(element) {
+        return () => {
+            onChange(element);
+        };
+    }
+    function onKeydownElement(element) {
+        return (event) => {
+            switch (event.code) {
+                case 'Enter':
+                    onChange(element);
+                    break;
+                default:
+                    navigationElement(event);
+                    break;
+            }
+        };
+    }
+    function onChange({ description, value }) {
+        inputRef?.current?.focus();
+        setVisible(false);
+        if (onSelect) {
+            onSelect(value);
+        }
+        else {
+            if (formControl) {
+                setChangeInternal(true);
+                formControl.setState(value);
+            }
+            setValue(description);
+        }
+        if (onValue) {
+            onValue(value);
+        }
+    }
+    return {
+        listControl,
+        onBlurInput,
+        onClickAction,
+        onClickBackdrop,
+        onClickInput: onClickControl,
+        onClickElement,
+        onFocusInput,
+        onKeydownElement,
+        onKeydownInput
+    };
+}
+//# sourceMappingURL=select-field.hook.js.map

package/dist/esm/components/organisms/SelectField/select-field.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-field.hook.js","sourceRoot":"","sources":["../../../../../src/components/organisms/SelectField/select-field.hook.ts"],"names":[],"mappings":"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"}

package/dist/esm/hooks/list-control.hook.d.ts

@@ -1,25 +1,25 @@
 import { ReactControl } from '@rolster/react-forms';
 import { Dispatch, KeyboardEvent, RefObject, SetStateAction } from 'react';
-import { ListFieldElement, ListFieldCollection } from '../models';
-interface ListControl<T = unknown> {
-    active: boolean;
+import { AbstractListElement, ListCollection } from '../models';
+export interface ListControl<T = unknown> {
     boxContentRef: RefObject<HTMLDivElement>;
-    collection: ListFieldCollection<T>;
+    collection: ListCollection<T>;
+    focused: boolean;
     higher: boolean;
     inputRef: RefObject<HTMLInputElement>;
     listRef: RefObject<HTMLUListElement>;
+    value: string;
+    visible: boolean;
     navigationElement: (event: KeyboardEvent) => void;
     navigationInput: (event: KeyboardEvent) => void;
-    setActive: Dispatch<SetStateAction<boolean>>;
+    setFocused: Dispatch<SetStateAction<boolean>>;
     setValue: Dispatch<SetStateAction<string>>;
     setVisible: Dispatch<SetStateAction<boolean>>;
-    value: string;
-    visible: boolean;
 }
 interface ListControlProps<T = unknown> {
-    suggestions: ListFieldElement<T>[];
+    suggestions: AbstractListElement<T>[];
     formControl?: ReactControl<HTMLElement, T>;
-    ignoreHigher?: boolean;
+    withHigher?: boolean;
 }
-export declare function useListControl<T = unknown>({ suggestions, formControl, ignoreHigher }: ListControlProps<T>): ListControl;
+export declare function useListControl<T = unknown>({ suggestions, formControl, withHigher }: ListControlProps<T>): ListControl<T>;
 export {};

package/dist/esm/hooks/list-control.hook.js

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { ListFieldCollection } from '../models';
+import { ListCollection } from '../models';
 const classElement = '.rls-list-field__element';
 const MAX_POSITION_VISIBLE = 4;
 const LIST_SIZE_REM = 16;
@@ -7,16 +7,16 @@ const ELEMENT_SIZE_REM = 4;
 const BASE_SIZE_PX = 16;
 const ELEMENT_SIZE_PX = BASE_SIZE_PX * ELEMENT_SIZE_REM;
 const MAZ_LIST_SIZE_PX = BASE_SIZE_PX * LIST_SIZE_REM;
-export function useListControl({ suggestions, formControl, ignoreHigher = false }) {
+export function useListControl({ suggestions, formControl, withHigher = false }) {
     const boxContentRef = useRef(null);
     const listRef = useRef(null);
     const inputRef = useRef(null);
-    const [collection, setCollection] = useState(new ListFieldCollection([]));
-    const [active, setActive] = useState(false);
-    const [visible, setVisible] = useState(false);
-    const [opened, setOpened] = useState(false);
+    const [collection, setCollection] = useState(new ListCollection([]));
     const [value, setValue] = useState('');
+    const [opened, setOpened] = useState(false);
+    const [visible, setVisible] = useState(false);
     const [higher, setHigher] = useState(false);
+    const [focused, setFocused] = useState(false);
     const [positionElement, setPositionElement] = useState(0);
     const [listElements, setListElements] = useState(undefined);
     useEffect(() => {
@@ -40,7 +40,7 @@ export function useListControl({ suggestions, formControl, ignoreHigher = false
         setLocationList();
     }, [visible]);
     useEffect(() => {
-        setCollection(new ListFieldCollection(suggestions));
+        setCollection(new ListCollection(suggestions));
     }, [suggestions]);
     function setLocationList() {
         if (boxContentRef?.current) {
@@ -58,7 +58,7 @@ export function useListControl({ suggestions, formControl, ignoreHigher = false
                 }
                 break;
             case 'ArrowDown':
-                if (visible && (ignoreHigher || !higher)) {
+                if (visible && (withHigher || !higher)) {
                     navigationInputDown();
                 }
                 break;
@@ -112,7 +112,7 @@ export function useListControl({ suggestions, formControl, ignoreHigher = false
             setPositionElement(newPosition);
             listElements?.item(newPosition).focus();
         }
-        else if (ignoreHigher || !higher) {
+        else if (withHigher || !higher) {
             inputRef?.current?.focus();
         }
     }
@@ -123,24 +123,24 @@ export function useListControl({ suggestions, formControl, ignoreHigher = false
             setPositionElement(newPosition);
             listElements?.item(newPosition).focus();
         }
-        else if (higher && !ignoreHigher) {
+        else if (higher && !withHigher) {
             inputRef?.current?.focus();
         }
     }
     return {
-        active,
         boxContentRef,
         collection,
+        focused,
         higher,
         inputRef,
         listRef,
+        value,
+        visible,
         navigationElement,
         navigationInput,
-        setActive,
+        setFocused,
         setValue,
-        setVisible,
-        value,
-        visible
+        setVisible
     };
 }
 //# sourceMappingURL=list-control.hook.js.map

package/dist/esm/hooks/list-control.hook.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-control.hook.js","sourceRoot":"","sources":["../../../src/hooks/list-control.hook.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"list-control.hook.js","sourceRoot":"","sources":["../../../src/hooks/list-control.hook.ts"],"names":[],"mappings":"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"}

package/dist/esm/i18n.d.ts

@@ -0,0 +1,18 @@
+declare const reactI18n: import("@rolster/i18n").I18nTranslate<{
+    confirmationActionApproved: string;
+    dateActionCancel: string;
+    dateActionSelect: string;
+    dateActionToday: string;
+    listEmptyDescription: string;
+    listEmptyTitle: string;
+    listInputPlaceholder: string;
+} | {
+    confirmationActionApproved: string;
+    dateActionCancel: string;
+    dateActionSelect: string;
+    dateActionToday: string;
+    listEmptyDescription: string;
+    listEmptyTitle: string;
+    listInputPlaceholder: string;
+}>;
+export default reactI18n;

package/dist/esm/i18n.js

@@ -0,0 +1,23 @@
+import { i18n } from '@rolster/i18n';
+const reactI18n = i18n({
+    es: {
+        confirmationActionApproved: 'Aceptar',
+        dateActionCancel: 'Cancelar',
+        dateActionSelect: 'Establecer',
+        dateActionToday: 'Hoy',
+        listEmptyDescription: 'Lo sentimos, en el momento no hay elementos en el listado',
+        listEmptyTitle: 'Selección no disponible',
+        listInputPlaceholder: 'Buscar...'
+    },
+    en: {
+        confirmationActionApproved: 'Approved',
+        dateActionCancel: 'Cancel',
+        dateActionSelect: 'Select',
+        dateActionToday: 'Today',
+        listEmptyDescription: 'Sorry, there are currently no items in the list',
+        listEmptyTitle: 'Selection not available',
+        listInputPlaceholder: 'Search...'
+    }
+});
+export default reactI18n;
+//# sourceMappingURL=i18n.js.map

package/dist/esm/i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.js","sourceRoot":"","sources":["../../src/i18n.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,MAAM,SAAS,GAAG,IAAI,CAAC;IACrB,EAAE,EAAE;QACF,0BAA0B,EAAE,SAAS;QACrC,gBAAgB,EAAE,UAAU;QAC5B,gBAAgB,EAAE,YAAY;QAC9B,eAAe,EAAE,KAAK;QACtB,oBAAoB,EAClB,2DAA2D;QAC7D,cAAc,EAAE,yBAAyB;QACzC,oBAAoB,EAAE,WAAW;KAClC;IACD,EAAE,EAAE;QACF,0BAA0B,EAAE,UAAU;QACtC,gBAAgB,EAAE,QAAQ;QAC1B,gBAAgB,EAAE,QAAQ;QAC1B,eAAe,EAAE,OAAO;QACxB,oBAAoB,EAAE,iDAAiD;QACvE,cAAc,EAAE,yBAAyB;QACzC,oBAAoB,EAAE,WAAW;KAClC;CACF,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/dist/esm/models.d.ts

@@ -1,18 +1,29 @@
-export interface ListFieldElement<T = unknown> {
+export interface AbstractListElement<T = unknown> {
     description: string;
-    title: string;
     value: T;
+    compareTo(value: T): boolean;
+}
+export interface AbstractAutocompleteElement<T = unknown> extends AbstractListElement<T> {
+    hasCoincidence(pattern: string): boolean;
+}
+export interface ListElement<T = unknown> extends AbstractListElement<T> {
+    title: string;
+    code?: string;
+    img?: string;
+    initials?: string;
+    subtitle?: string;
+}
+export interface AutocompleteElement<T = unknown> extends AbstractAutocompleteElement<T> {
+    title: string;
     code?: string;
     img?: string;
     initials?: string;
     subtitle?: string;
-    compareTo(value: T): boolean;
-    hasCoincidence(pattern: string): boolean;
 }
-export declare class ListFieldCollection<T = unknown> {
-    readonly value: ListFieldElement<T>[];
-    constructor(value: ListFieldElement<T>[]);
-    findElement(value: T): Undefined<ListFieldElement<T>>;
+export declare class ListCollection<T = unknown> {
+    readonly value: AbstractListElement<T>[];
+    constructor(value: AbstractListElement<T>[]);
+    find(element: T): Undefined<AbstractListElement<T>>;
 }
 export interface DayState {
     value?: number;

package/dist/esm/models.js

@@ -1,11 +1,11 @@
 import { formatDate, isAfter, isBefore, normalizeMinTime, timeDifference } from '@rolster/helpers-date';
-const FORMAT_DESCRIPTION = '{dd}/{mm}/{aa}';
-export class ListFieldCollection {
+const DATE_FORMAT = '{dd}/{mm}/{aa}';
+export class ListCollection {
     constructor(value) {
         this.value = value;
     }
-    findElement(value) {
-        return this.value.find((element) => element.compareTo(value));
+    find(element) {
+        return this.value.find((current) => current.compareTo(element));
     }
 }
 export class DateRange {
@@ -17,8 +17,8 @@ export class DateRange {
         else {
             this.maxDate = normalizeMinTime(minDate);
         }
-        const minFormat = formatDate(this.minDate, FORMAT_DESCRIPTION);
-        const maxFormat = formatDate(this.maxDate, FORMAT_DESCRIPTION);
+        const minFormat = formatDate(this.minDate, DATE_FORMAT);
+        const maxFormat = formatDate(this.maxDate, DATE_FORMAT);
         this.description = `${minFormat} - ${maxFormat}`;
     }
     recalculate(date) {

package/dist/esm/models.js.map

@@ -1 +1 @@
-{"version":3,"file":"models.js","sourceRoot":"","sources":["../../src/models.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,OAAO,EACP,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACf,MAAM,uBAAuB,CAAC;AAE/B,MAAM,kBAAkB,GAAG,gBAAgB,CAAC;AAgB5C,MAAM,OAAO,mBAAmB;IAC9B,YAA4B,KAA4B;QAA5B,UAAK,GAAL,KAAK,CAAuB;IAAG,CAAC;IAErD,WAAW,CAAC,KAAQ;QACzB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAChE,CAAC;CACF;AAsCD,MAAM,OAAO,SAAS;IAOpB,YAAY,OAAa,EAAE,OAAc;QACvC,IAAI,CAAC,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAEzC,IAAI,OAAO,IAAI,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC;YAC1C,IAAI,CAAC,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAC3C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAC3C,CAAC;QAED,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QAC/D,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QAE/D,IAAI,CAAC,WAAW,GAAG,GAAG,SAAS,MAAM,SAAS,EAAE,CAAC;IACnD,CAAC;IAEM,WAAW,CAAC,IAAU;QAC3B,IAAI,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC;YACjC,OAAO,IAAI,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC;YAChC,OAAO,IAAI,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QAC3C,CAAC;QAED,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACzD,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QAEzD,OAAO,aAAa,GAAG,aAAa;YAClC,CAAC,CAAC,IAAI,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC;YACnC,CAAC,CAAC,IAAI,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACxC,CAAC;IAEM,MAAM,CAAC,GAAG;QACf,OAAO,IAAI,SAAS,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;IACnC,CAAC;CACF"}
+{"version":3,"file":"models.js","sourceRoot":"","sources":["../../src/models.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,OAAO,EACP,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACf,MAAM,uBAAuB,CAAC;AAE/B,MAAM,WAAW,GAAG,gBAAgB,CAAC;AA8BrC,MAAM,OAAO,cAAc;IACzB,YAA4B,KAA+B;QAA/B,UAAK,GAAL,KAAK,CAA0B;IAAG,CAAC;IAExD,IAAI,CAAC,OAAU;QACpB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IAClE,CAAC;CACF;AAsCD,MAAM,OAAO,SAAS;IAOpB,YAAY,OAAa,EAAE,OAAc;QACvC,IAAI,CAAC,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAEzC,IAAI,OAAO,IAAI,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC;YAC1C,IAAI,CAAC,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAC3C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAC3C,CAAC;QAED,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACxD,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAExD,IAAI,CAAC,WAAW,GAAG,GAAG,SAAS,MAAM,SAAS,EAAE,CAAC;IACnD,CAAC;IAEM,WAAW,CAAC,IAAU;QAC3B,IAAI,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC;YACjC,OAAO,IAAI,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC;YAChC,OAAO,IAAI,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QAC3C,CAAC;QAED,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACzD,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QAEzD,OAAO,aAAa,GAAG,aAAa;YAClC,CAAC,CAAC,IAAI,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC;YACnC,CAAC,CAAC,IAAI,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACxC,CAAC;IAEM,MAAM,CAAC,GAAG;QACf,OAAO,IAAI,SAAS,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;IACnC,CAAC;CACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolster/react-components",
-  "version": "18.9.0",
+  "version": "18.10.0",
   "type": "module",
   "description": "Package containing UI components for React Project.",
   "module": "dist/esm/index.js",
@@ -38,6 +38,7 @@
     "@rolster/helpers-date": "^1.2.0",
     "@rolster/helpers-forms": "^1.9.0",
     "@rolster/helpers-string": "^1.1.1",
+    "@rolster/i18n": "^1.3.2",
     "@rolster/react-forms": "^18.0.2",
     "@rolster/validators": "^1.0.3",
     "lottie-react": "^2.4.0",