@rolster/react-components 19.10.0 → 19.11.0

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
@@ -1669,6 +1675,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 }));
 }
@@ -4607,7 +4643,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);
@@ -5096,6 +5134,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 +5506,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, 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 };
 //# sourceMappingURL=index.mjs.map