@rolster/react-components 19.10.0 → 19.11.2

package/dist/es/index.mjs

@@ -719,6 +719,12 @@ function RlsCheckBoxControlComponent({ formControl, disabled, identifier, rlsThe
 }
 const RlsCheckBoxControl = memo(RlsCheckBoxControlComponent);
 
+function RlsChipComponent({ children, className, contrasted, disabled, icon, identifier, onClick, onRemove, rlsTheme, selected }) {
+    const classNameChip = renderClassStatus('rls-chip', { clickable: !!onClick && !disabled, contrasted, disabled, selected }, className);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameChip, "rls-theme": rlsTheme, onClick: disabled ? undefined : onClick, children: [icon && jsxRuntimeExports.jsx(RlsIcon, { className: "rls-chip__icon", value: icon }), jsxRuntimeExports.jsx("span", { className: "rls-chip__description", children: children }), onRemove && !disabled && (jsxRuntimeExports.jsx("button", { className: "rls-chip__remove", type: "button", onClick: onRemove, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) }))] }));
+}
+const RlsChip = memo(RlsChipComponent);
+
 function RlsSkeletonComponent({ animation, rlsTheme }) {
     const className = renderClassStatus('rls-skeleton', {
         animation: animation !== 'shimmer' && animation
@@ -1245,13 +1251,18 @@ function generateThemeCSS(colors, theme) {
     const rgb900 = rgbChannels(parseHex(colors['900']));
     const rgb700 = rgbChannels(parseHex(colors['700']));
     const rgb500 = rgbChannels(parseHex(colors['500']));
+    const rgb300 = rgbChannels(parseHex(colors['300']));
     const colorProps = SHADE_LABELS.map((label) => prop(`color-${label}`, colors[label]));
     const gradientProps = GRADIENT_LABELS.map((label) => {
         const darker = SHADE_LABELS[SHADE_LABELS.indexOf(label) - 1];
         return prop(`gradient-${label}`, `linear-gradient(180deg, ${colors[label]} 15%, ${colors[darker]} 85%)`);
     });
     const backdropProps = BACKDROP_LABELS.map((label) => prop(`backdrop-${label}`, `rgba(${rgb900}, ${Number(label) / 1000})`));
-    const skeletonProps = Object.entries(SKELETON_OPACITY).map(([label, opacity]) => prop(`skeleton-${label}`, `rgba(${rgb700}, ${opacity})`));
+    const skeletonOpacities = Object.entries(SKELETON_OPACITY);
+    const skeletonProps = skeletonOpacities.map(([label, opacity]) => prop(`skeleton-${label}`, `rgba(${rgb700}, ${opacity})`));
+    // Skeleton tokens for dark surfaces, taken from the light step that mirrors
+    // color-700 around color-500, as the foundations mixin does.
+    const skeletonDarkProps = skeletonOpacities.map(([label, opacity]) => prop(`skeleton-dark-${label}`, `rgba(${rgb300}, ${opacity})`));
     const shadowProps = [
         prop('shadow-color-500', `rgba(${rgb500}, 0.24)`),
         prop('shadow-500', `0px 0px 0px 3px rgba(${rgb500}, 0.24)`)
@@ -1261,6 +1272,7 @@ function generateThemeCSS(colors, theme) {
         ...gradientProps,
         ...backdropProps,
         ...skeletonProps,
+        ...skeletonDarkProps,
         ...shadowProps
     ];
 }
@@ -1330,12 +1342,69 @@ function setThemeColor(baseColor, theme = 'primary') {
     if (typeof document === 'undefined') {
         return;
     }
+    resetTheme(theme);
     const { properties } = generateThemePalette(baseColor, theme);
     const target = document.body || document.documentElement;
     properties.forEach(({ name, value }) => {
         target.style.setProperty(name, value);
     });
 }
+const ALIAS_LABELS = [
+    '900',
+    '800',
+    '700',
+    '600',
+    '500',
+    '400',
+    '300',
+    '200',
+    '100'
+];
+const SKELETON_LABELS = Object.keys(SKELETON_OPACITY);
+const ALIAS_TOKENS = [
+    ...SHADE_LABELS.map((label) => `color-${label}`),
+    ...ALIAS_LABELS.map((label) => `gradient-${label}`),
+    ...ALIAS_LABELS.map((label) => `backdrop-${label}`),
+    ...SKELETON_LABELS.map((label) => `skeleton-${label}`),
+    ...SKELETON_LABELS.map((label) => `skeleton-dark-${label}`),
+    'shadow-color-500',
+    'shadow-500'
+];
+function resetTheme(theme = 'primary') {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const target = document.body || document.documentElement;
+    ALIAS_TOKENS.forEach((token) => {
+        target.style.removeProperty(`--rls-${theme}-${token}`);
+    });
+}
+function generateThemeAlias(source, theme = 'primary') {
+    const properties = ALIAS_TOKENS.map((token) => ({
+        name: `--rls-${theme}-${token}`,
+        value: `var(--rls-${source}-${token})`
+    }));
+    return {
+        source,
+        theme,
+        properties,
+        css: properties.map((p) => `${p.name}: ${p.value};`).join('\n')
+    };
+}
+function setThemeAlias(source, theme = 'primary') {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    if (source === theme) {
+        resetTheme(theme);
+        return;
+    }
+    const { properties } = generateThemeAlias(source, theme);
+    const target = document.body || document.documentElement;
+    properties.forEach(({ name, value }) => {
+        target.style.setProperty(name, value);
+    });
+}
 const DEFAULT_COLOR = '#1780e0';
 
 const CONTENT_BACKGROUND = '--pvt-content-background';
@@ -1669,6 +1738,36 @@ function RlsButtonToggleComponent({ onAction, options, type, automatic, disabled
 }
 const RlsButtonToggle = memo(RlsButtonToggleComponent);
 
+function RlsChipGroupComponent({ className, disabled: disabledProps, formControl, identifier, onValue, options, reference, render, rlsTheme, value: valueInitial }) {
+    const [value, setValue] = useState(formControl?.value ?? valueInitial);
+    const selected = useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const disabled = useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
+    const classNameGroup = renderClassStatus('rls-chip-group', { disabled }, className);
+    const isSelected = useCallback((option) => {
+        if (selected === undefined || selected === null) {
+            return false;
+        }
+        return reference
+            ? reference(option) === reference(selected)
+            : option === selected;
+    }, [reference, selected]);
+    const onSelect = useCallback((option) => () => {
+        if (disabled) {
+            return;
+        }
+        setValue(option);
+        formControl?.setValue(option);
+        formControl?.touch();
+        onValue?.(option);
+    }, [disabled, formControl, onValue]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameGroup, "rls-theme": rlsTheme, children: options.map((option, index) => (jsxRuntimeExports.jsx(RlsChip, { disabled: disabled, selected: isSelected(option), onClick: onSelect(option), children: render ? render(option) : String(option) }, index))) }));
+}
+const RlsChipGroup = memo(RlsChipGroupComponent);
+
 function RlsContentComponent({ children, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-app__page__content", "rls-theme": rlsTheme, children: children }));
 }
@@ -3785,11 +3884,20 @@ const RlsModal = memo(RlsModalComponent);
 function formatTime(value) {
     return String(value).padStart(2, '0');
 }
+function pointerIsInsideTick({ clientX, clientY }, tick) {
+    const { left, top, width, height } = tick.getBoundingClientRect();
+    const distanceX = clientX - (left + width / 2);
+    const distanceY = clientY - (top + height / 2);
+    const radius = Math.min(width, height) / 2;
+    return distanceX ** 2 + distanceY ** 2 <= radius ** 2;
+}
 const CLOCK_VALUES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const CLOCK_HOURS = 12;
+const CLOCK_MINUTES = 60;
 const RADIUS = 48;
 const DIAL_RADIUS = 60;
 const TICK_RADIUS = 7;
-function RlsPickerClockTick({ onValue, selectionIsHours, value }) {
+function RlsPickerClockTick({ selectionIsHours, value }) {
     const styleTick = useMemo(() => {
         const radian = (value / 6) * Math.PI;
         const x = Math.sin(radian) * RADIUS;
@@ -3799,20 +3907,13 @@ function RlsPickerClockTick({ onValue, selectionIsHours, value }) {
             top: `${DIAL_RADIUS - y - TICK_RADIUS - 1}rem`
         };
     }, []);
-    const label = useMemo(() => {
+    const tickValue = useMemo(() => {
         if (selectionIsHours) {
-            return formatTime(value);
+            return value;
         }
-        if (value === 12) {
-            return formatTime(0);
-        }
-        return formatTime(value * 5);
+        return value === CLOCK_HOURS ? 0 : value * 5;
     }, [selectionIsHours]);
-    const onClick = useCallback((event) => {
-        event.preventDefault();
-        onValue(value);
-    }, [onValue]);
-    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__tick", style: styleTick, onClick: onClick, children: label }));
+    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__tick", style: styleTick, "data-value": tickValue, children: formatTime(tickValue) }));
 }
 function RlsPickerClockComponent({ formControl, onListener, rlsTheme, time }) {
     const timeInitial = useMemo(() => {
@@ -3885,22 +3986,6 @@ function RlsPickerClockComponent({ formControl, onListener, rlsTheme, time }) {
         }
         changeIsInternal.current = false;
     }, [formControl?.value]);
-    const refreshComponent = useCallback((clientX, clientY) => {
-        const rectangle = plateElement.current.getBoundingClientRect();
-        const centerX = rectangle.left + rectangle.width / 2;
-        const centerY = rectangle.top + rectangle.height / 2;
-        const positionX = clientX - centerX;
-        const positionY = clientY - centerY;
-        const angle = Math.atan2(-positionX, positionY) + Math.PI;
-        const value = Math.round(angle / radianUnit);
-        refreshClock(value);
-        if (selectionIsHours) {
-            setHour(value === 0 ? 12 : value);
-        }
-        else {
-            setMinute(value);
-        }
-    }, [selectionIsHours, radianUnit]);
     const refreshClock = useCallback((value) => {
         const angle = value * radianUnit;
         const x2 = Math.sin(angle) * (RADIUS - TICK_RADIUS);
@@ -3916,6 +4001,27 @@ function RlsPickerClockComponent({ formControl, onListener, rlsTheme, time }) {
         pointElement.current.style.visibility =
             selectionIsHours || value % 5 === 0 ? 'hidden' : 'visible';
     }, [selectionIsHours, radianUnit]);
+    const selectValue = useCallback((value) => {
+        refreshClock(value);
+        if (selectionIsHours) {
+            setHour(value === 0 ? CLOCK_HOURS : value);
+        }
+        else {
+            setMinute(value);
+        }
+    }, [selectionIsHours, refreshClock]);
+    const selectFromPosition = useCallback((clientX, clientY) => {
+        const rectangle = plateElement.current.getBoundingClientRect();
+        const centerX = rectangle.left + rectangle.width / 2;
+        const centerY = rectangle.top + rectangle.height / 2;
+        const positionX = clientX - centerX;
+        const positionY = clientY - centerY;
+        // Angle in [0, 2π) measured clockwise from 12 o'clock
+        const angle = Math.atan2(-positionX, positionY) + Math.PI;
+        const steps = selectionIsHours ? CLOCK_HOURS : CLOCK_MINUTES;
+        // Modulo keeps the last half step before 12 o'clock as 0, not as 60/12
+        selectValue(Math.round(angle / radianUnit) % steps);
+    }, [selectionIsHours, radianUnit, selectValue]);
     const onClickHour = useCallback(() => {
         setSelectionIsHours(true);
     }, []);
@@ -3928,49 +4034,56 @@ function RlsPickerClockComponent({ formControl, onListener, rlsTheme, time }) {
     const onClickPM = useCallback(() => {
         setZoneIsPM(true);
     }, []);
-    const onActiveSelection = useCallback(() => {
+    const onPointerDown = useCallback((event) => {
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
         selectionIsActive.current = true;
-    }, []);
-    const onMouseSelection = useCallback((event) => {
+        const tick = event.target.closest('.rls-picker-clock__tick');
+        // Pressing inside a label circle snaps to its exact value,
+        // anywhere else (and while dragging) the angle decides
+        if (tick?.dataset.value && pointerIsInsideTick(event, tick)) {
+            selectValue(Number(tick.dataset.value));
+        }
+        else {
+            selectFromPosition(event.clientX, event.clientY);
+        }
+    }, [selectValue, selectFromPosition]);
+    const onPointerMove = useCallback((event) => {
         if (selectionIsActive.current) {
-            event.preventDefault();
-            refreshComponent(event.clientX, event.clientY);
+            selectFromPosition(event.clientX, event.clientY);
         }
-    }, [refreshComponent]);
-    const onTouchSelection = useCallback((event) => {
-        const touch = event.touches.item(0);
-        if (selectionIsActive.current && touch) {
-            refreshComponent(touch.clientX, touch.clientY);
+    }, [selectFromPosition]);
+    const onPointerUp = useCallback(() => {
+        if (!selectionIsActive.current) {
+            return;
         }
-    }, [refreshComponent]);
-    const onInactiveSelection = useCallback(() => {
         selectionIsActive.current = false;
-    }, []);
-    const onClickValue = useCallback((value) => {
+        // Once the hour is chosen, continue with the minutes
         if (selectionIsHours) {
-            setHour(value);
-            refreshClock(value);
-        }
-        else {
-            const minute = value === 12 ? 0 : value * 5;
-            setMinute(minute);
-            refreshClock(minute);
+            setSelectionIsHours(false);
         }
     }, [selectionIsHours]);
+    const onPointerCancel = useCallback(() => {
+        selectionIsActive.current = false;
+    }, []);
     const onCancel = useCallback(() => {
         onListener?.({ event: PickerListenerEvent.Cancel });
     }, [onListener]);
     const onCurrentTime = useCallback(() => {
         const currentTime = Time.now();
+        const zoneIsPM = currentTime.hour >= 12;
+        const hour = zoneIsPM ? currentTime.hour - 12 : currentTime.hour;
         changeIsInternal.current = true;
         formControl?.setValue(currentTime);
-        setHour(currentTime.hour);
+        setZoneIsPM(zoneIsPM);
+        setHour(hour);
         setMinute(currentTime.minute);
+        refreshClock(selectionIsHours ? hour : currentTime.minute);
         onListener?.({
             event: PickerListenerEvent.Select,
             value: currentTime
         });
-    }, [formControl, onListener]);
+    }, [formControl, onListener, selectionIsHours, refreshClock]);
     const onSelect = useCallback(() => {
         const hourValue = zoneIsPM
             ? hour !== 12
@@ -3987,10 +4100,10 @@ function RlsPickerClockComponent({ formControl, onListener, rlsTheme, time }) {
             value: timeValue
         });
     }, [formControl, hour, minute, zoneIsPM, onListener]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__header", children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__title", children: [jsxRuntimeExports.jsx("span", { className: classNameHour, onClick: onClickHour, children: hourFormat }), jsxRuntimeExports.jsx("span", { className: "rls-picker-clock__title__separator", children: ":" }), jsxRuntimeExports.jsx("span", { className: classNameMinute, onClick: onClickMinute, children: minuteFormat })] }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__zone", children: [jsxRuntimeExports.jsx("span", { className: classNameAM, onClick: onClickAM, children: "AM" }), jsxRuntimeExports.jsx("span", { className: classNamePM, onClick: onClickPM, children: "PM" })] })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__body", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__plate", ref: plateElement, onMouseDown: onActiveSelection, onMouseMove: onMouseSelection, onMouseUp: onInactiveSelection, onMouseLeave: onInactiveSelection, onTouchStart: onActiveSelection, onTouchMove: onTouchSelection, onTouchEnd: onInactiveSelection, children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__canvas", children: jsxRuntimeExports.jsx("svg", { width: "120rem", height: "120rem", children: jsxRuntimeExports.jsxs("g", { style: {
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__header", children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__title", children: [jsxRuntimeExports.jsx("span", { className: classNameHour, onClick: onClickHour, children: hourFormat }), jsxRuntimeExports.jsx("span", { className: "rls-picker-clock__title__separator", children: ":" }), jsxRuntimeExports.jsx("span", { className: classNameMinute, onClick: onClickMinute, children: minuteFormat })] }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__zone", children: [jsxRuntimeExports.jsx("span", { className: classNameAM, onClick: onClickAM, children: "AM" }), jsxRuntimeExports.jsx("span", { className: classNamePM, onClick: onClickPM, children: "PM" })] })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__body", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__plate", ref: plateElement, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__canvas", children: jsxRuntimeExports.jsx("svg", { width: "120rem", height: "120rem", children: jsxRuntimeExports.jsxs("g", { style: {
                                         transform: `translate(${DIAL_RADIUS}rem, ${DIAL_RADIUS}rem)`
                                     }, children: [jsxRuntimeExports.jsx("line", { ref: lineElement, className: "rls-picker-clock__canvas__line", x1: "-1", y1: "-1" }), jsxRuntimeExports.jsx("circle", { ref: centerElement, className: "rls-picker-clock__canvas__center", r: "4", cx: "-1", cy: "-1" }), jsxRuntimeExports.jsx("circle", { ref: indicatorElement, className: "rls-picker-clock__canvas__indicator", r: `${TICK_RADIUS}rem` }), jsxRuntimeExports.jsx("circle", { ref: pointElement, className: "rls-picker-clock__canvas__point", r: "3.5" })] }) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__hours", children: CLOCK_VALUES.map((value) => {
-                                return (jsxRuntimeExports.jsx(RlsPickerClockTick, { value: value, selectionIsHours: selectionIsHours, onValue: onClickValue }, value));
+                                return (jsxRuntimeExports.jsx(RlsPickerClockTick, { value: value, selectionIsHours: selectionIsHours }, value));
                             }) })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.timeActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "timer", onClick: onCurrentTime }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "raised", onClick: onSelect, children: labels.timeActionSelect }) })] })] }));
 }
 const RlsPickerClock = memo(RlsPickerClockComponent);
@@ -4607,7 +4720,9 @@ function RlsFieldListInner({ render, suggestions, action, children, formControl,
         readonly: props.readOnly
     }, `rls-field-list rls-field-list__multi ${props.className ?? ''}`);
     const renderWithCheckbox = useCallback((element) => (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__multi__element", children: [jsxRuntimeExports.jsx(RlsCheckBox, { checked: fieldList.isSelected(element) }), render(element)] })), [fieldList.isSelected, render]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: fieldList.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__multi__chips", onClick: disabled ? undefined : fieldList.onClickInput, children: !fieldList.selected.length && placeholder ? (jsxRuntimeExports.jsx("span", { className: "rls-field-list__multi__placeholder", children: placeholder })) : (fieldList.selected.map((item, index) => (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__multi__chip", children: [jsxRuntimeExports.jsx("span", { className: "rls-field-list__multi__chip__description", children: item.description }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__multi__chip__remove", onClick: fieldList.onRemoveElement(item), children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) }))] }, index)))) }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-down", onClick: fieldList.onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: fieldList.listIsVisible, action: action, disabled: disabled, higher: fieldList.higher, render: renderWithCheckbox, refAnchor: fieldList.refContent, refList: fieldList.refList, refSuggestions: fieldList.refSuggestions, onClickElement: fieldList.onClickElement, onKeydownElement: fieldList.onKeydownElement, onClickBackdrop: fieldList.onClickBackdrop, onHiddenAnchor: fieldList.onClickBackdrop })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: fieldList.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__multi__chips", onClick: disabled ? undefined : fieldList.onClickInput, children: !fieldList.selected.length && placeholder ? (jsxRuntimeExports.jsx("span", { className: "rls-field-list__multi__placeholder", children: placeholder })) : (fieldList.selected.map((item, index) => (jsxRuntimeExports.jsx(RlsChip, { onRemove: !props.readOnly && !disabled
+                                    ? fieldList.onRemoveElement(item)
+                                    : undefined, children: item.description }, index)))) }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-down", onClick: fieldList.onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: fieldList.listIsVisible, action: action, disabled: disabled, higher: fieldList.higher, render: renderWithCheckbox, refAnchor: fieldList.refContent, refList: fieldList.refList, refSuggestions: fieldList.refSuggestions, onClickElement: fieldList.onClickElement, onKeydownElement: fieldList.onKeydownElement, onClickBackdrop: fieldList.onClickBackdrop, onHiddenAnchor: fieldList.onClickBackdrop })] }));
 }
 function RlsFieldListTemplateComponent(props) {
     const fieldList = useFieldList(props);
@@ -4802,10 +4917,6 @@ function calculateImgDimension(image, dimension) {
 }
 function RlsImageEditorComponent(props) {
     const [selection, setSelection] = useState(props.selection ?? 60);
-    const [labels, setLabels] = useState({
-        actionRestore: reactI18n('editorImageActionRestore'),
-        actionSelect: reactI18n('editorImageActionSelect')
-    });
     const refBody = useRef(null);
     const refImage = useRef(null);
     const refSelection = useRef(null);
@@ -4930,16 +5041,9 @@ function RlsImageEditorComponent(props) {
             refreshImageStyle();
             refreshSelectionStyle(selection);
         };
-        const unsubscription = i18nSubscribe(() => {
-            setLabels({
-                actionRestore: reactI18n('editorImageActionRestore'),
-                actionSelect: reactI18n('editorImageActionSelect')
-            });
-        });
         window.addEventListener('resize', refreshImageStyle);
         return () => {
             window.removeEventListener('resize', refreshImageStyle);
-            unsubscription();
         };
     }, []);
     useEffect(() => {
@@ -5002,7 +5106,7 @@ function RlsImageEditorComponent(props) {
             context?.putImageData(originalImage.current, 0, 0);
         }
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-editor", children: [jsxRuntimeExports.jsx("div", { ref: refBody, className: "rls-image-editor__body", children: jsxRuntimeExports.jsxs("div", { ref: refImage, className: "rls-image-editor__body__image", children: [jsxRuntimeExports.jsx("div", { ref: refSelection, className: "rls-image-editor__body__selection" }), jsxRuntimeExports.jsx("div", { ref: refOverlayTop, className: "rls-image-editor__body__overlay--top" }), jsxRuntimeExports.jsx("div", { ref: refOverlayRight, className: "rls-image-editor__body__overlay--right" }), jsxRuntimeExports.jsx("div", { ref: refOverlayBottom, className: "rls-image-editor__body__overlay--bottom" }), jsxRuntimeExports.jsx("div", { ref: refOverlayLeft, className: "rls-image-editor__body__overlay--left" }), jsxRuntimeExports.jsx("canvas", { ref: refCanvas })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-editor__sliders", children: jsxRuntimeExports.jsx(RlsSlider, { prefixIcon: "external-link", value: selection, minValue: MIN_SLIDER_VALUE, maxValue: MAX_SLIDER_VALUE, onValue: setSelection, disabled: props.disabled }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__actions", children: [props.children, jsxRuntimeExports.jsx(RlsButton, { type: "flat", rlsTheme: "standard", prefixIcon: "refresh", onClick: onRestore, disabled: props.disabled, children: labels.actionRestore }), jsxRuntimeExports.jsx(RlsButton, { type: "raised", rlsTheme: "primary", prefixIcon: "crop", onClick: onCropImage, disabled: props.disabled, children: labels.actionSelect })] })] }), jsxRuntimeExports.jsx("canvas", { ref: refPicture })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-editor", children: [jsxRuntimeExports.jsx("div", { ref: refBody, className: "rls-image-editor__body", children: jsxRuntimeExports.jsxs("div", { ref: refImage, className: "rls-image-editor__body__image", children: [jsxRuntimeExports.jsx("div", { ref: refSelection, className: "rls-image-editor__body__selection" }), jsxRuntimeExports.jsx("div", { ref: refOverlayTop, className: "rls-image-editor__body__overlay--top" }), jsxRuntimeExports.jsx("div", { ref: refOverlayRight, className: "rls-image-editor__body__overlay--right" }), jsxRuntimeExports.jsx("div", { ref: refOverlayBottom, className: "rls-image-editor__body__overlay--bottom" }), jsxRuntimeExports.jsx("div", { ref: refOverlayLeft, className: "rls-image-editor__body__overlay--left" }), jsxRuntimeExports.jsx("canvas", { ref: refCanvas })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-editor__sliders", children: jsxRuntimeExports.jsx(RlsSlider, { prefixIcon: "crop", value: selection, minValue: MIN_SLIDER_VALUE, maxValue: MAX_SLIDER_VALUE, onValue: setSelection, disabled: props.disabled }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__actions", children: [props.children, jsxRuntimeExports.jsx("button", { className: "rls-image-editor__action", "rls-theme": "standard", onClick: onRestore, disabled: props.disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "refresh" }) }), jsxRuntimeExports.jsx("button", { className: "rls-image-editor__action", "rls-theme": "success", onClick: onCropImage, disabled: props.disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "checkmark-circle-out" }) })] })] }), jsxRuntimeExports.jsx("canvas", { ref: refPicture })] }));
 }
 const RlsImageEditor = memo(RlsImageEditorComponent);
 
@@ -5060,7 +5164,7 @@ function useImageEditorController(options) {
         setSrcEditor(undefined);
     }, []);
     const RlsImageEditorChooser = useMemo(() => {
-        return (srcEditor && (jsxRuntimeExports.jsx(RlsImageEditorModal, { visible: true, src: srcEditor, formControl: options.formControl, maxWidth: options.maxWidth, quality: options.quality, ratio: options.ratio, selection: options.selection, onValue: onEditorValue, children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", rlsTheme: "danger", onClick: onCancel, disabled: options.disabled, children: labels.actionCancel }) })));
+        return (srcEditor && (jsxRuntimeExports.jsx(RlsImageEditorModal, { visible: true, src: srcEditor, formControl: options.formControl, maxWidth: options.maxWidth, quality: options.quality, ratio: options.ratio, selection: options.selection, onValue: onEditorValue, children: jsxRuntimeExports.jsx("button", { className: "rls-image-editor__action", "rls-theme": "danger", onClick: onCancel, disabled: options.disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) }) })));
     }, [
         srcEditor,
         labels,
@@ -5096,6 +5200,46 @@ function RlsImageChooserComponent(props) {
 }
 const RlsImageChooser = memo(RlsImageChooserComponent);
 
+function RlsLedColorComponent({ className, color, disabled: disabledProps, formControl, identifier, onValue, readOnly, rlsTheme, value: valueInitial }) {
+    const [value, setValue] = useState(formControl?.value ?? valueInitial);
+    const [modalIsVisible, setModalIsVisible] = useState(false);
+    const [pickerKey, setPickerKey] = useState(0);
+    const colorValue = useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const disabled = useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
+    const ledColor = useMemo(() => {
+        return colorValue && hexIsValid(colorValue)
+            ? normalizeHex(colorValue)
+            : undefined;
+    }, [colorValue]);
+    const classNameLed = renderClassStatus('rls-led-color', { disabled, error: formControl?.wrong, readonly: readOnly }, className);
+    const onChange = useCallback((value) => {
+        setValue(value);
+        onValue?.(value);
+    }, [onValue]);
+    const onClickLed = useCallback(() => {
+        if (!disabled && !readOnly) {
+            setPickerKey((key) => key + 1);
+            setModalIsVisible(true);
+        }
+    }, [disabled, readOnly]);
+    const onListener = useCallback(({ event, value }) => {
+        if (event !== PickerListenerEvent.Cancel) {
+            onChange(value);
+        }
+        formControl?.touch();
+        setModalIsVisible(false);
+    }, [formControl, onChange]);
+    const onBackdrop = useCallback(() => {
+        setModalIsVisible(false);
+    }, []);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameLed, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("button", { className: "rls-led-color__trigger", type: "button", disabled: disabled, onClick: onClickLed, children: jsxRuntimeExports.jsx(RlsLed, { color: ledColor, rlsTheme: rlsTheme }) }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-modal-color", visible: modalIsVisible, rlsTheme: rlsTheme, onBackdrop: onBackdrop, children: jsxRuntimeExports.jsx(RlsPickerColor, { formControl: formControl, color: ledColor ?? color, disabled: disabled, onListener: onListener }, pickerKey) })] }));
+}
+const RlsLedColor = memo(RlsLedColorComponent);
+
 function RlsModalSheetComponent({ autoclose, children, className, controller, onAutoClose, visible, rlsTheme }) {
     const classNameModal = renderClassStatus('rls-modal-sheet', { visible: controller?.visible ?? visible }, className);
     const onClickBackdrop = useCallback(() => {
@@ -5428,5 +5572,5 @@ function useTabsController(options) {
     return useMemo(() => ({ Tabs, formControl }), [Tabs, formControl]);
 }
 
-export { APP_THEMES, ConfirmationResult, DEFAULT_COLOR, RlsAccordion, RlsAlert, RlsAmount, RlsAppThemeTabs, RlsApplication, RlsAreaText, RlsAvatar, RlsBadge, RlsBallot, RlsBody, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonIcon, RlsButtonOption, RlsButtonProgress, RlsButtonStepper, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsChooserAutocomplete, RlsChooserAutocompleteTemplate, RlsChooserList, RlsChooserListTemplate, RlsChooserSelect, RlsChooserSelectTemplate, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldArea, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldColor, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldFile, RlsFieldList, RlsFieldListSuggestions, RlsFieldListTemplate, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsHoverSwap, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputCounter, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsLed, RlsMessageEmpty, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalClock, RlsModalDate, RlsModalDateRange, RlsModalSheet, RlsNavbar, RlsNavbarMenu, RlsPagination, RlsPickerClock, RlsPickerColor, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, generateThemePalette, getAppTheme, getRemSize$1 as getRemSize, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, rgbToHex, rgbToHsl, rgbToHsv, setAppTheme, setDesignSystem, setErrorsI18n, setThemeColor, toggleAppTheme, useAppThemeController, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useEventCallback, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useNotifications, usePortalController, useRelocationOnComponent, useResize, useRlsContext, useSnackbar, useTabsController };
+export { APP_THEMES, ConfirmationResult, DEFAULT_COLOR, RlsAccordion, RlsAlert, RlsAmount, RlsAppThemeTabs, RlsApplication, RlsAreaText, RlsAvatar, RlsBadge, RlsBallot, RlsBody, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonIcon, RlsButtonOption, RlsButtonProgress, RlsButtonStepper, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsChip, RlsChipGroup, RlsChooserAutocomplete, RlsChooserAutocompleteTemplate, RlsChooserList, RlsChooserListTemplate, RlsChooserSelect, RlsChooserSelectTemplate, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldArea, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldColor, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldFile, RlsFieldList, RlsFieldListSuggestions, RlsFieldListTemplate, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsHoverSwap, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputCounter, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsLed, RlsLedColor, RlsMessageEmpty, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalClock, RlsModalDate, RlsModalDateRange, RlsModalSheet, RlsNavbar, RlsNavbarMenu, RlsPagination, RlsPickerClock, RlsPickerColor, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, generateThemeAlias, generateThemePalette, getAppTheme, getRemSize$1 as getRemSize, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, resetTheme, rgbToHex, rgbToHsl, rgbToHsv, setAppTheme, setDesignSystem, setErrorsI18n, setThemeAlias, setThemeColor, toggleAppTheme, useAppThemeController, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useEventCallback, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useNotifications, usePortalController, useRelocationOnComponent, useResize, useRlsContext, useSnackbar, useTabsController };
 //# sourceMappingURL=index.mjs.map