@rio-cloud/rio-uikit 1.9.0 → 1.10.0

package/components/applicationHeader/ApplicationHeader.js

@@ -21,7 +21,9 @@ export const ApplicationHeader = forwardRef((props, ref) => {
             return typeof value === 'number' && Math.round(value);
         }
     }, [contentRect]);
-    const containerWidth = getContentRect('width') || 0;
+    // If container width cannot be properly read initially, fall back to window width.
+    // This fixes ugly jumping on mobile header and desktop header on mount.
+    const containerWidth = getContentRect('width') || window.innerWidth;
     const isMobileWidth = containerWidth <= SCREEN_SM;
     const hasActionBarItems = !isEmpty(actionBarItems);
     const wrapperClassNames = classNames('ApplicationHeader', 'user-select-none', isMobileWidth && 'mobile', className && className);

package/components/applicationLayout/ApplicationLayoutBody.js

@@ -40,7 +40,8 @@ const ApplicationLayoutBody = forwardRef((props, ref) => {
         const scrollWrapper = moduleContentRef.current.container;
         const scrollingElement = scrollWrapper.firstElementChild;
         const currentScroll = scrollingElement?.scrollTop ?? 0;
-        if (currentScroll > 0) {
+        const scrollThreshold = 10;
+        if (currentScroll > scrollThreshold) {
             window.requestAnimationFrame(handleToTop);
             scrollingElement?.scrollTo(0, currentScroll - currentScroll / 5);
             scrollWrapper.classList.add('is-scrolling-to-top');

package/components/assetTree/Tree.d.ts

@@ -23,6 +23,8 @@ export type TreeGroup = {
     disabled?: boolean;
     /**
      * The rioglyph icon name for a group.
+     *
+     * The prefix `rioglyph-` can be omitted.
      */
     icon?: string;
     /**
@@ -45,13 +47,28 @@ export type TreeItem = {
      */
     info?: string | React.ReactNode;
     /**
-     * The type of an item which is also the name of the respective rioglyph icon without the prefix
-     * `rioglyph-`.
+     * The primary type of the item.
+     *
+     * This is also used as the fallback icon name and refers to the name of the respective
+     * rioglyph icon (excluding the `rioglyph-` prefix).
      */
     type: string;
     /**
-     * The sub type of an item which is also the name of the respective rioglyph icon without the prefix.
-     * This could be used to show a secondary paired icon like for fuel type.
+     * Optional icon override for the item.
+     *
+     * - If set to a string (e.g. `'truck'`), this icon will be used explicitly.
+     * - If set to `undefined`, the `type` property will be used as the fallback icon.
+     * - If set to `null`, no icon will be rendered, even if `type` is defined.
+     *
+     * This allows full control over the icon behavior while maintaining backward compatibility with type-based icons.
+     */
+    icon?: string | null;
+    /**
+     * Optional sub-type of the item.
+     *
+     * This refers to the name of an additional rioglyph icon (excluding the `rioglyph-` prefix),
+     * typically used to render a secondary icon next to the primary one (e.g. for fuel type or
+     * equipment variations).
      */
     subType?: string;
     /**

package/components/assetTree/TreeLeaf.js

@@ -5,9 +5,21 @@ import classNames from 'classnames';
 import isObject from 'lodash/fp/isObject';
 import Checkbox from '../checkbox/Checkbox';
 import RadioButton from '../radiobutton/RadioButton';
+const getIconRenderInfo = (item) => {
+    if (item.icon === null) {
+        // explicit opt-out
+        return { primaryIcon: null, subIcon: null };
+    }
+    // fallback to type
+    const primaryIcon = item.icon ?? item.type;
+    // treat subType as pair icon name
+    const subIcon = item.subType ?? null;
+    return { primaryIcon, subIcon };
+};
 const TreeLeaf = React.memo((props) => {
     const { item, hasMultiselect, showRadioButtons, isSelected, onSelectItem, onActiveItem } = props;
     const treeNodeClassNames = classNames('TreeLeaf', 'form-group margin-bottom-0', isSelected && 'active', item.className && item.className);
-    return (_jsxs("div", { className: treeNodeClassNames, "data-key": item.id, children: [hasMultiselect && _jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && (_jsx(RadioButton, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), _jsxs("span", { className: 'TreeLabel TreeLabelName', onClick: onActiveItem, children: [!item.subType && _jsx("span", { className: `rioglyph rioglyph-${item.type}` }), item.subType && (_jsxs("span", { className: 'rioglyph-icon-pair', children: [_jsx("span", { className: `rioglyph rioglyph-${item.type}` }), _jsx("span", { className: `rioglyph rioglyph-${item.subType}` })] })), _jsxs("span", { className: 'TreeLabelNameText', children: [_jsx("span", { className: 'TreeLabelNameTextHeadline', children: isObject(item.name) ? (_jsxs(_Fragment, { children: [_jsx("span", { className: 'text-light margin-right-3', children: item.name.firstName }), _jsx("span", { children: item.name.lastName })] })) : (item.name) }), item.info && _jsx("span", { className: 'TreeLabelNameTextSubline', children: item.info })] })] })] }));
+    const { primaryIcon, subIcon } = getIconRenderInfo(item);
+    return (_jsxs("div", { className: treeNodeClassNames, "data-key": item.id, children: [hasMultiselect && _jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && (_jsx(RadioButton, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), _jsxs("span", { className: 'TreeLabel TreeLabelName', onClick: onActiveItem, children: [primaryIcon && !subIcon && _jsx("span", { className: `rioglyph rioglyph-${primaryIcon}` }), primaryIcon && subIcon && (_jsxs("span", { className: 'rioglyph-icon-pair', children: [_jsx("span", { className: `rioglyph rioglyph-${primaryIcon}` }), _jsx("span", { className: `rioglyph rioglyph-${subIcon}` })] })), _jsxs("span", { className: 'TreeLabelNameText', children: [_jsx("span", { className: 'TreeLabelNameTextHeadline', children: isObject(item.name) ? (_jsxs(_Fragment, { children: [_jsx("span", { className: 'text-light margin-right-3', children: item.name.firstName }), _jsx("span", { children: item.name.lastName })] })) : (item.name) }), item.info && _jsx("span", { className: 'TreeLabelNameTextSubline', children: item.info })] })] })] }));
 });
 export default TreeLeaf;

package/components/assetTree/TreeNode.js

@@ -2,10 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import classNames from 'classnames';
 import Checkbox from '../checkbox/Checkbox';
+// Add prefix `rioglyph-` if icon is given and does not start with the prefix
+const withRioglyphPrefix = (name) => {
+    if (!name) {
+        return null;
+    }
+    return name.startsWith('rioglyph-') ? name : `rioglyph-${name}`;
+};
 const TreeNode = React.memo((props) => {
     const { node, hasMultiselect = false, isSelected = false, isIndeterminate = false, onToggleNode, onSelect } = props;
     const treeNodeClassNames = classNames('TreeNode', 'from-group', isSelected && 'checked', node.className && node.className);
     const hasChildren = !!node.items.length;
-    return (_jsxs("div", { className: treeNodeClassNames, "data-key": node.id, onClick: () => hasChildren && onToggleNode(node.id), children: [hasMultiselect && (_jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: () => onSelect(node, isIndeterminate) })), _jsxs("span", { className: 'TreeLabel TreeLabelName', children: [node.icon && _jsx("span", { className: `rioglyph ${node.icon}` }), _jsx("span", { className: 'TreeLabelNameText', children: _jsx("span", { className: 'TreeLabelNameTextHeadline', children: node.name }) }), _jsx("span", { className: 'TreeLabelCount label label-muted label-filled label-condensed', children: node.items.length }), _jsx("span", { className: `TreeLabelExpander rioglyph rioglyph-chevron-down ${hasChildren ? '' : 'text-color-light'}` })] })] }));
+    const iconName = withRioglyphPrefix(node.icon);
+    return (_jsxs("div", { className: treeNodeClassNames, "data-key": node.id, onClick: () => hasChildren && onToggleNode(node.id), children: [hasMultiselect && (_jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: () => onSelect(node, isIndeterminate) })), _jsxs("span", { className: 'TreeLabel TreeLabelName', children: [iconName && _jsx("span", { className: `rioglyph ${iconName}` }), _jsx("span", { className: 'TreeLabelNameText', children: _jsx("span", { className: 'TreeLabelNameTextHeadline', children: node.name }) }), _jsx("span", { className: 'TreeLabelCount label label-muted label-filled label-condensed', children: node.items.length }), _jsx("span", { className: `TreeLabelExpander rioglyph rioglyph-chevron-down ${hasChildren ? '' : 'text-color-light'}` })] })] }));
 });
 export default TreeNode;

package/components/saveableInput/SaveableDateInput.d.ts

@@ -17,6 +17,14 @@ export type SaveableDateInputProps = {
      * @default true
      */
     isValid?: boolean;
+    /**
+     * This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the "isValid" prop is set to false.
+     */
+    errorMessage?: string | React.ReactNode;
+    /**
+     * Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false.
+     */
+    hideErrorIcon?: boolean;
     /**
      * Callback function triggered when the value changes and is saved.
      * @param value

package/components/saveableInput/SaveableDateInput.js

@@ -14,7 +14,7 @@ const DEFAULT_BUTTON_STYLE = 'primary';
 // - close edit mode only if date is valid - or close edit mode and reset to initial value -> customizable via prop
 // Keep picker open until user has clicked save, otherwise he might forget to click save if the dropdown closes automatically
 const SaveableDateInput = (props) => {
-    const { placeholder, value: externalValue = '', isValid = true, onValueChanged = noop, onInputChange, // for controlled usage
+    const { placeholder, value: externalValue = '', isValid = true, errorMessage, hideErrorIcon = false, onValueChanged = noop, onInputChange, // for controlled usage
     onEnterEdit = noop, onExitEdit = noop, onCancel = noop, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, invalidExitBehavior = 'stay-open', datePickerProps = {}, disabled = false, className, ...remainingProps } = props;
     // if callback is provided, assume it is controlled case
     const isControlledCase = onInputChange !== undefined;
@@ -105,18 +105,26 @@ const SaveableDateInput = (props) => {
         }
     };
     const handleCloseDropdown = () => setIsPickerOpen(false);
-    const wrapperClasses = classNames('form-group', className);
+    const wrapperClasses = classNames('form-group', !isValid && 'has-feedback has-error', className);
     const buttonIconClasses = classNames('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');
     const dateInputClasses = classNames('margin-0 width-100pct', inputClassName);
     // Button should be disabled if:
     // - Component is disabled, OR
     // - In edit mode and invalid input (and behavior is stay-open)
     const disableButton = disabled || (editInput && !isValid && invalidExitBehavior === 'stay-open');
-    return (_jsx("div", { ref: wrapperRef, ...remainingProps, className: wrapperClasses, children: _jsxs("div", { className: 'input-group', children: [_jsx(DatePicker, { ...datePickerProps, open: isPickerOpen, className: dateInputClasses, inputProps: {
-                        ...inputProps,
-                        placeholder,
-                        disabled: !editInput,
-                        style: { borderTopRightRadius: 0, borderBottomRightRadius: 0 },
-                    }, value: inputValue, onChange: handleDateChange, onClose: handleCloseDropdown }), _jsx("div", { className: 'input-group-btn', children: _jsx(Button, { ref: buttonRef, bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton, children: _jsx("span", { className: buttonIconClasses }) }) })] }) }));
+    let inputStyle = {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+    };
+    if (!isValid && hideErrorIcon) {
+        // If the error icon shall not be shown, remove the input padding to avoid cutting of the date value
+        inputStyle = { ...inputStyle, paddingRight: '10px' };
+    }
+    return (_jsxs("div", { ref: wrapperRef, ...remainingProps, className: wrapperClasses, children: [_jsxs("div", { className: 'input-group', children: [_jsx(DatePicker, { ...datePickerProps, open: isPickerOpen, className: dateInputClasses, inputProps: {
+                            ...inputProps,
+                            placeholder,
+                            disabled: !editInput,
+                            style: inputStyle,
+                        }, value: inputValue, onChange: handleDateChange, onClose: handleCloseDropdown }), !isValid && !hideErrorIcon && (_jsx("span", { className: 'right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign' })), _jsx("div", { className: 'input-group-btn', children: _jsx(Button, { ref: buttonRef, bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton, children: _jsx("span", { className: buttonIconClasses }) }) })] }), !isValid && errorMessage && (_jsx("span", { className: 'help-block z-index-max', children: _jsx("span", { children: errorMessage }) }))] }));
 };
 export default SaveableDateInput;

package/components/saveableInput/SaveableInput.d.ts

@@ -25,6 +25,14 @@ export type SaveableInputProps = {
      * @default true
      */
     isValid?: boolean;
+    /**
+     * This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the "isValid" prop is set to false.
+     */
+    errorMessage?: string | React.ReactNode;
+    /**
+     * Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false.
+     */
+    hideErrorIcon?: boolean;
     /**
      * Callback function triggered when the value changes.
      * @param value

package/components/saveableInput/SaveableInput.js

@@ -29,7 +29,7 @@ const useFocus = (isEditable) => {
 // [x] allow for unit and icon
 // [x] disabled input
 const SaveableInput = (props) => {
-    const { placeholder, fixedPreviousValue = '', previousValue = '', value: externalValue = '', isValid = true, onValueChanged = noop, onInputChange, onEsc = noop, onEnterEdit = noop, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, icon, unit, disabled = false, className, ...remainingProps } = props;
+    const { placeholder, fixedPreviousValue = '', previousValue = '', value: externalValue = '', isValid = true, errorMessage, hideErrorIcon = false, onValueChanged = noop, onInputChange, onEsc = noop, onEnterEdit = noop, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, icon, unit, disabled = false, className, ...remainingProps } = props;
     const externalOldValue = previousValue || fixedPreviousValue;
     const [inputValue, setInputValue] = useState(externalValue);
     const [oldInputValue, setOldInputValue] = useState(externalOldValue);
@@ -106,12 +106,13 @@ const SaveableInput = (props) => {
     const handleFocus = () => setIsFocused(true);
     const handleBlur = () => setIsFocused(false);
     const showOldValue = !isEmpty(oldInputValue) && oldInputValue !== inputValue && !editInput;
-    const wrapperClasses = classNames('form-group', className);
+    const wrapperClasses = classNames('form-group', !isValid && 'has-feedback has-error', className);
     const inputClasses = classNames('form-control', showOldValue && 'padding-bottom-0 padding-top-10 text-size-12', unit && 'padding-right-50', // This value is not perfect as with longer units it might conflict with the value
+    !unit && !isValid && hideErrorIcon && 'padding-right-10', // remove the padding for the error icon if not needed
     inputClassName);
     const oldValueClasses = classNames('position-absolute', 'top-2', 'left-10', 'margin-left-3', 'text-size-10', 'text-decoration-line-through', icon && 'padding-left-20');
     const buttonIconClasses = classNames('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');
     const disableButton = (editInput && !isValid) || disabled;
-    return (_jsx("div", { ...remainingProps, className: wrapperClasses, children: _jsxs("div", { className: 'input-group', children: [icon && (_jsx("span", { className: 'input-group-addon', children: _jsx("span", { className: `rioglyph ${icon}`, "aria-hidden": 'true', "aria-label": 'input icon' }) })), _jsx("input", { type: 'text', ref: inputRef, placeholder: placeholder, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled: !editInput, ...inputProps }), unit && (_jsx("div", { className: 'position-absolute right-0 margin-right-50', "aria-label": 'unit', children: unit })), showOldValue && (_jsx("div", { className: oldValueClasses, "aria-label": 'previous value', children: oldInputValue })), _jsx("div", { className: 'input-group-btn', children: _jsx(Button, { bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton, children: _jsx("span", { className: buttonIconClasses }) }) })] }) }));
+    return (_jsxs("div", { ...remainingProps, className: wrapperClasses, children: [_jsxs("div", { className: 'input-group', children: [icon && (_jsx("span", { className: 'input-group-addon', children: _jsx("span", { className: `rioglyph ${icon}`, "aria-hidden": 'true', "aria-label": 'input icon' }) })), _jsx("input", { type: 'text', ref: inputRef, placeholder: placeholder, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled: !editInput, ...inputProps }), unit && (_jsx("div", { className: 'position-absolute right-0 margin-right-50', "aria-label": 'unit', children: unit })), showOldValue && (_jsx("div", { className: oldValueClasses, "aria-label": 'previous value', children: oldInputValue })), _jsx("div", { className: 'input-group-btn', children: _jsx(Button, { bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton, children: _jsx("span", { className: buttonIconClasses }) }) })] }), !isValid && !hideErrorIcon && !unit && (_jsx("span", { className: 'right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign' })), !isValid && errorMessage && (_jsx("span", { className: 'help-block z-index-max', children: _jsx("span", { children: errorMessage }) }))] }));
 };
 export default SaveableInput;

package/components/table/TableSettingsListContainer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
 import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
-import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, } from '@dnd-kit/sortable';
+import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import TableSettingsListItem from './TableSettingsListItem';
 export const TableSettingsListContainer = (props) => {

package/lib/es/components/applicationHeader/ApplicationHeader.js

@@ -25,7 +25,9 @@ exports.ApplicationHeader = (0, react_1.forwardRef)((props, ref) => {
             return typeof value === 'number' && Math.round(value);
         }
     }, [contentRect]);
-    const containerWidth = getContentRect('width') || 0;
+    // If container width cannot be properly read initially, fall back to window width.
+    // This fixes ugly jumping on mobile header and desktop header on mount.
+    const containerWidth = getContentRect('width') || window.innerWidth;
     const isMobileWidth = containerWidth <= SCREEN_SM;
     const hasActionBarItems = !(0, isEmpty_1.default)(actionBarItems);
     const wrapperClassNames = (0, classnames_1.default)('ApplicationHeader', 'user-select-none', isMobileWidth && 'mobile', className && className);

package/lib/es/components/applicationLayout/ApplicationLayoutBody.js

@@ -43,7 +43,8 @@ const ApplicationLayoutBody = (0, react_1.forwardRef)((props, ref) => {
         const scrollWrapper = moduleContentRef.current.container;
         const scrollingElement = scrollWrapper.firstElementChild;
         const currentScroll = scrollingElement?.scrollTop ?? 0;
-        if (currentScroll > 0) {
+        const scrollThreshold = 10;
+        if (currentScroll > scrollThreshold) {
             window.requestAnimationFrame(handleToTop);
             scrollingElement?.scrollTo(0, currentScroll - currentScroll / 5);
             scrollWrapper.classList.add('is-scrolling-to-top');

package/lib/es/components/assetTree/Tree.d.ts

@@ -23,6 +23,8 @@ export type TreeGroup = {
     disabled?: boolean;
     /**
      * The rioglyph icon name for a group.
+     *
+     * The prefix `rioglyph-` can be omitted.
      */
     icon?: string;
     /**
@@ -45,13 +47,28 @@ export type TreeItem = {
      */
     info?: string | React.ReactNode;
     /**
-     * The type of an item which is also the name of the respective rioglyph icon without the prefix
-     * `rioglyph-`.
+     * The primary type of the item.
+     *
+     * This is also used as the fallback icon name and refers to the name of the respective
+     * rioglyph icon (excluding the `rioglyph-` prefix).
      */
     type: string;
     /**
-     * The sub type of an item which is also the name of the respective rioglyph icon without the prefix.
-     * This could be used to show a secondary paired icon like for fuel type.
+     * Optional icon override for the item.
+     *
+     * - If set to a string (e.g. `'truck'`), this icon will be used explicitly.
+     * - If set to `undefined`, the `type` property will be used as the fallback icon.
+     * - If set to `null`, no icon will be rendered, even if `type` is defined.
+     *
+     * This allows full control over the icon behavior while maintaining backward compatibility with type-based icons.
+     */
+    icon?: string | null;
+    /**
+     * Optional sub-type of the item.
+     *
+     * This refers to the name of an additional rioglyph icon (excluding the `rioglyph-` prefix),
+     * typically used to render a secondary icon next to the primary one (e.g. for fuel type or
+     * equipment variations).
      */
     subType?: string;
     /**

package/lib/es/components/assetTree/TreeLeaf.js

@@ -8,9 +8,21 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const isObject_1 = tslib_1.__importDefault(require("lodash/fp/isObject"));
 const Checkbox_1 = tslib_1.__importDefault(require("../checkbox/Checkbox"));
 const RadioButton_1 = tslib_1.__importDefault(require("../radiobutton/RadioButton"));
+const getIconRenderInfo = (item) => {
+    if (item.icon === null) {
+        // explicit opt-out
+        return { primaryIcon: null, subIcon: null };
+    }
+    // fallback to type
+    const primaryIcon = item.icon ?? item.type;
+    // treat subType as pair icon name
+    const subIcon = item.subType ?? null;
+    return { primaryIcon, subIcon };
+};
 const TreeLeaf = react_1.default.memo((props) => {
     const { item, hasMultiselect, showRadioButtons, isSelected, onSelectItem, onActiveItem } = props;
     const treeNodeClassNames = (0, classnames_1.default)('TreeLeaf', 'form-group margin-bottom-0', isSelected && 'active', item.className && item.className);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: treeNodeClassNames, "data-key": item.id, children: [hasMultiselect && (0, jsx_runtime_1.jsx)(Checkbox_1.default, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && ((0, jsx_runtime_1.jsx)(RadioButton_1.default, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), (0, jsx_runtime_1.jsxs)("span", { className: 'TreeLabel TreeLabelName', onClick: onActiveItem, children: [!item.subType && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${item.type}` }), item.subType && ((0, jsx_runtime_1.jsxs)("span", { className: 'rioglyph-icon-pair', children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${item.type}` }), (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${item.subType}` })] })), (0, jsx_runtime_1.jsxs)("span", { className: 'TreeLabelNameText', children: [(0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelNameTextHeadline', children: (0, isObject_1.default)(item.name) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-light margin-right-3', children: item.name.firstName }), (0, jsx_runtime_1.jsx)("span", { children: item.name.lastName })] })) : (item.name) }), item.info && (0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelNameTextSubline', children: item.info })] })] })] }));
+    const { primaryIcon, subIcon } = getIconRenderInfo(item);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: treeNodeClassNames, "data-key": item.id, children: [hasMultiselect && (0, jsx_runtime_1.jsx)(Checkbox_1.default, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && ((0, jsx_runtime_1.jsx)(RadioButton_1.default, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), (0, jsx_runtime_1.jsxs)("span", { className: 'TreeLabel TreeLabelName', onClick: onActiveItem, children: [primaryIcon && !subIcon && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${primaryIcon}` }), primaryIcon && subIcon && ((0, jsx_runtime_1.jsxs)("span", { className: 'rioglyph-icon-pair', children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${primaryIcon}` }), (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${subIcon}` })] })), (0, jsx_runtime_1.jsxs)("span", { className: 'TreeLabelNameText', children: [(0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelNameTextHeadline', children: (0, isObject_1.default)(item.name) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-light margin-right-3', children: item.name.firstName }), (0, jsx_runtime_1.jsx)("span", { children: item.name.lastName })] })) : (item.name) }), item.info && (0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelNameTextSubline', children: item.info })] })] })] }));
 });
 exports.default = TreeLeaf;

package/lib/es/components/assetTree/TreeNode.js

@@ -5,10 +5,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Checkbox_1 = tslib_1.__importDefault(require("../checkbox/Checkbox"));
+// Add prefix `rioglyph-` if icon is given and does not start with the prefix
+const withRioglyphPrefix = (name) => {
+    if (!name) {
+        return null;
+    }
+    return name.startsWith('rioglyph-') ? name : `rioglyph-${name}`;
+};
 const TreeNode = react_1.default.memo((props) => {
     const { node, hasMultiselect = false, isSelected = false, isIndeterminate = false, onToggleNode, onSelect } = props;
     const treeNodeClassNames = (0, classnames_1.default)('TreeNode', 'from-group', isSelected && 'checked', node.className && node.className);
     const hasChildren = !!node.items.length;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: treeNodeClassNames, "data-key": node.id, onClick: () => hasChildren && onToggleNode(node.id), children: [hasMultiselect && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: () => onSelect(node, isIndeterminate) })), (0, jsx_runtime_1.jsxs)("span", { className: 'TreeLabel TreeLabelName', children: [node.icon && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${node.icon}` }), (0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelNameText', children: (0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelNameTextHeadline', children: node.name }) }), (0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelCount label label-muted label-filled label-condensed', children: node.items.length }), (0, jsx_runtime_1.jsx)("span", { className: `TreeLabelExpander rioglyph rioglyph-chevron-down ${hasChildren ? '' : 'text-color-light'}` })] })] }));
+    const iconName = withRioglyphPrefix(node.icon);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: treeNodeClassNames, "data-key": node.id, onClick: () => hasChildren && onToggleNode(node.id), children: [hasMultiselect && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: () => onSelect(node, isIndeterminate) })), (0, jsx_runtime_1.jsxs)("span", { className: 'TreeLabel TreeLabelName', children: [iconName && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${iconName}` }), (0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelNameText', children: (0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelNameTextHeadline', children: node.name }) }), (0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelCount label label-muted label-filled label-condensed', children: node.items.length }), (0, jsx_runtime_1.jsx)("span", { className: `TreeLabelExpander rioglyph rioglyph-chevron-down ${hasChildren ? '' : 'text-color-light'}` })] })] }));
 });
 exports.default = TreeNode;

package/lib/es/components/saveableInput/SaveableDateInput.d.ts

@@ -17,6 +17,14 @@ export type SaveableDateInputProps = {
      * @default true
      */
     isValid?: boolean;
+    /**
+     * This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the "isValid" prop is set to false.
+     */
+    errorMessage?: string | React.ReactNode;
+    /**
+     * Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false.
+     */
+    hideErrorIcon?: boolean;
     /**
      * Callback function triggered when the value changes and is saved.
      * @param value

package/lib/es/components/saveableInput/SaveableDateInput.js

@@ -17,7 +17,7 @@ const DEFAULT_BUTTON_STYLE = 'primary';
 // - close edit mode only if date is valid - or close edit mode and reset to initial value -> customizable via prop
 // Keep picker open until user has clicked save, otherwise he might forget to click save if the dropdown closes automatically
 const SaveableDateInput = (props) => {
-    const { placeholder, value: externalValue = '', isValid = true, onValueChanged = noop_1.default, onInputChange, // for controlled usage
+    const { placeholder, value: externalValue = '', isValid = true, errorMessage, hideErrorIcon = false, onValueChanged = noop_1.default, onInputChange, // for controlled usage
     onEnterEdit = noop_1.default, onExitEdit = noop_1.default, onCancel = noop_1.default, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, invalidExitBehavior = 'stay-open', datePickerProps = {}, disabled = false, className, ...remainingProps } = props;
     // if callback is provided, assume it is controlled case
     const isControlledCase = onInputChange !== undefined;
@@ -108,18 +108,26 @@ const SaveableDateInput = (props) => {
         }
     };
     const handleCloseDropdown = () => setIsPickerOpen(false);
-    const wrapperClasses = (0, classnames_1.default)('form-group', className);
+    const wrapperClasses = (0, classnames_1.default)('form-group', !isValid && 'has-feedback has-error', className);
     const buttonIconClasses = (0, classnames_1.default)('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');
     const dateInputClasses = (0, classnames_1.default)('margin-0 width-100pct', inputClassName);
     // Button should be disabled if:
     // - Component is disabled, OR
     // - In edit mode and invalid input (and behavior is stay-open)
     const disableButton = disabled || (editInput && !isValid && invalidExitBehavior === 'stay-open');
-    return ((0, jsx_runtime_1.jsx)("div", { ref: wrapperRef, ...remainingProps, className: wrapperClasses, children: (0, jsx_runtime_1.jsxs)("div", { className: 'input-group', children: [(0, jsx_runtime_1.jsx)(DatePicker_1.default, { ...datePickerProps, open: isPickerOpen, className: dateInputClasses, inputProps: {
-                        ...inputProps,
-                        placeholder,
-                        disabled: !editInput,
-                        style: { borderTopRightRadius: 0, borderBottomRightRadius: 0 },
-                    }, value: inputValue, onChange: handleDateChange, onClose: handleCloseDropdown }), (0, jsx_runtime_1.jsx)("div", { className: 'input-group-btn', children: (0, jsx_runtime_1.jsx)(Button_1.default, { ref: buttonRef, bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton, children: (0, jsx_runtime_1.jsx)("span", { className: buttonIconClasses }) }) })] }) }));
+    let inputStyle = {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+    };
+    if (!isValid && hideErrorIcon) {
+        // If the error icon shall not be shown, remove the input padding to avoid cutting of the date value
+        inputStyle = { ...inputStyle, paddingRight: '10px' };
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, ...remainingProps, className: wrapperClasses, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'input-group', children: [(0, jsx_runtime_1.jsx)(DatePicker_1.default, { ...datePickerProps, open: isPickerOpen, className: dateInputClasses, inputProps: {
+                            ...inputProps,
+                            placeholder,
+                            disabled: !editInput,
+                            style: inputStyle,
+                        }, value: inputValue, onChange: handleDateChange, onClose: handleCloseDropdown }), !isValid && !hideErrorIcon && ((0, jsx_runtime_1.jsx)("span", { className: 'right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign' })), (0, jsx_runtime_1.jsx)("div", { className: 'input-group-btn', children: (0, jsx_runtime_1.jsx)(Button_1.default, { ref: buttonRef, bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton, children: (0, jsx_runtime_1.jsx)("span", { className: buttonIconClasses }) }) })] }), !isValid && errorMessage && ((0, jsx_runtime_1.jsx)("span", { className: 'help-block z-index-max', children: (0, jsx_runtime_1.jsx)("span", { children: errorMessage }) }))] }));
 };
 exports.default = SaveableDateInput;

package/lib/es/components/saveableInput/SaveableInput.d.ts

@@ -25,6 +25,14 @@ export type SaveableInputProps = {
      * @default true
      */
     isValid?: boolean;
+    /**
+     * This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the "isValid" prop is set to false.
+     */
+    errorMessage?: string | React.ReactNode;
+    /**
+     * Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false.
+     */
+    hideErrorIcon?: boolean;
     /**
      * Callback function triggered when the value changes.
      * @param value

package/lib/es/components/saveableInput/SaveableInput.js

@@ -32,7 +32,7 @@ const useFocus = (isEditable) => {
 // [x] allow for unit and icon
 // [x] disabled input
 const SaveableInput = (props) => {
-    const { placeholder, fixedPreviousValue = '', previousValue = '', value: externalValue = '', isValid = true, onValueChanged = noop_1.default, onInputChange, onEsc = noop_1.default, onEnterEdit = noop_1.default, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, icon, unit, disabled = false, className, ...remainingProps } = props;
+    const { placeholder, fixedPreviousValue = '', previousValue = '', value: externalValue = '', isValid = true, errorMessage, hideErrorIcon = false, onValueChanged = noop_1.default, onInputChange, onEsc = noop_1.default, onEnterEdit = noop_1.default, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, icon, unit, disabled = false, className, ...remainingProps } = props;
     const externalOldValue = previousValue || fixedPreviousValue;
     const [inputValue, setInputValue] = (0, react_1.useState)(externalValue);
     const [oldInputValue, setOldInputValue] = (0, react_1.useState)(externalOldValue);
@@ -109,12 +109,13 @@ const SaveableInput = (props) => {
     const handleFocus = () => setIsFocused(true);
     const handleBlur = () => setIsFocused(false);
     const showOldValue = !(0, isEmpty_1.default)(oldInputValue) && oldInputValue !== inputValue && !editInput;
-    const wrapperClasses = (0, classnames_1.default)('form-group', className);
+    const wrapperClasses = (0, classnames_1.default)('form-group', !isValid && 'has-feedback has-error', className);
     const inputClasses = (0, classnames_1.default)('form-control', showOldValue && 'padding-bottom-0 padding-top-10 text-size-12', unit && 'padding-right-50', // This value is not perfect as with longer units it might conflict with the value
+    !unit && !isValid && hideErrorIcon && 'padding-right-10', // remove the padding for the error icon if not needed
     inputClassName);
     const oldValueClasses = (0, classnames_1.default)('position-absolute', 'top-2', 'left-10', 'margin-left-3', 'text-size-10', 'text-decoration-line-through', icon && 'padding-left-20');
     const buttonIconClasses = (0, classnames_1.default)('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');
     const disableButton = (editInput && !isValid) || disabled;
-    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, className: wrapperClasses, children: (0, jsx_runtime_1.jsxs)("div", { className: 'input-group', children: [icon && ((0, jsx_runtime_1.jsx)("span", { className: 'input-group-addon', children: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, "aria-hidden": 'true', "aria-label": 'input icon' }) })), (0, jsx_runtime_1.jsx)("input", { type: 'text', ref: inputRef, placeholder: placeholder, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled: !editInput, ...inputProps }), unit && ((0, jsx_runtime_1.jsx)("div", { className: 'position-absolute right-0 margin-right-50', "aria-label": 'unit', children: unit })), showOldValue && ((0, jsx_runtime_1.jsx)("div", { className: oldValueClasses, "aria-label": 'previous value', children: oldInputValue })), (0, jsx_runtime_1.jsx)("div", { className: 'input-group-btn', children: (0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton, children: (0, jsx_runtime_1.jsx)("span", { className: buttonIconClasses }) }) })] }) }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: wrapperClasses, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'input-group', children: [icon && ((0, jsx_runtime_1.jsx)("span", { className: 'input-group-addon', children: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, "aria-hidden": 'true', "aria-label": 'input icon' }) })), (0, jsx_runtime_1.jsx)("input", { type: 'text', ref: inputRef, placeholder: placeholder, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled: !editInput, ...inputProps }), unit && ((0, jsx_runtime_1.jsx)("div", { className: 'position-absolute right-0 margin-right-50', "aria-label": 'unit', children: unit })), showOldValue && ((0, jsx_runtime_1.jsx)("div", { className: oldValueClasses, "aria-label": 'previous value', children: oldInputValue })), (0, jsx_runtime_1.jsx)("div", { className: 'input-group-btn', children: (0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton, children: (0, jsx_runtime_1.jsx)("span", { className: buttonIconClasses }) }) })] }), !isValid && !hideErrorIcon && !unit && ((0, jsx_runtime_1.jsx)("span", { className: 'right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign' })), !isValid && errorMessage && ((0, jsx_runtime_1.jsx)("span", { className: 'help-block z-index-max', children: (0, jsx_runtime_1.jsx)("span", { children: errorMessage }) }))] }));
 };
 exports.default = SaveableInput;

package/lib/es/styles/variables/colors/colors.json

@@ -1,79 +1,79 @@
 {
-    "always-color-white": "#ffffff",
-    "always-color-black": "#000000",
-    "color-white": "#ffffff",
-    "color-black": "#000000",
-    "gray-darkest": "#2a3740",
-    "gray-darker": "#4C5667",
-    "gray-dark": "#697A8B",
-    "gray": "#A7AFBB",
-    "gray-light": "#D0D8DE",
-    "gray-lighter": "#E5EBF0",
-    "gray-lightest": "#f6f8f9",
-    "gray-decent": "#fcfcfd",
-    "brand-primary": "#30b4c0",
-    "brand-secondary": "#b23672",
-    "brand-primary-decent": "#f4fbfc",
-    "brand-secondary-decent": "#fbf5f8",
-    "brand-info": "#4B80A6",
-    "brand-success": "#5cb85c",
-    "brand-warning": "#ff8e3c",
-    "brand-danger": "#e22837",
-    "brand-info-decent": "#f5f8fb",
-    "brand-success-decent": "#f6fbf5",
-    "brand-warning-decent": "#fdf5f0",
-    "brand-danger-decent": "#fdf3f3",
-    "color-code": "#f3f3f4",
-    "color-status-available": "#239b7d",
-    "color-status-driving": "#3690ae",
-    "color-status-resting": "#626b72",
-    "color-status-working": "#94488b",
-    "color-map-marker-text": "#ffffff",
-    "color-map-marker-active": "#ffffff",
-    "color-map-marker-asset": "#2a3740",
-    "color-map-marker-poi": "#d63f7f",
-    "color-map-marker-geofence": "#f9636e",
-    "color-map-marker-route": "#36afd7",
-    "color-map-marker-info": "#3f759b",
-    "color-map-marker-success": "#5cb85c",
-    "color-map-marker-warning": "#ff8e3c",
-    "color-map-marker-danger": "#e22837",
-    "color-map-marker-restrictions": "#8F68ED",
-    "color-rating-1": "#e22837",
-    "color-rating-2": "#ff8e3c",
-    "color-rating-3": "#f8c575",
-    "color-rating-4": "#5cb85c",
-    "color-rating-5": "#4b924c",
-    "color-highlight-darkest": "#154b56",
-    "color-highlight-darker": "#206e7e",
-    "color-highlight-dark": "#268897",
-    "color-highlight": "#30b4c0",
-    "color-highlight-light": "#8ddbe3",
-    "color-highlight-lighter": "#cef0f3",
-    "color-highlight-lightest": "#ebf9fa",
-    "color-highlight-decent": "#f3fbfc",
-    "color-coldplay-wine": "#520D4E",
-    "color-coldplay-aubergine": "#5a4876",
-    "color-coldplay-kashmir": "#536E8B",
-    "color-coldplay-fountain": "#67abc5",
-    "color-coldplay-turquoise": "#4ECCC1",
-    "color-coldplay-bermuda": "#79D4B3",
-    "color-coldplay-moos": "#A1DAA3",
-    "color-coldplay-primrose": "#C7E291",
-    "color-coldplay-khaki": "#F0EB83",
-    "color-warmup-crimson": "#31144F",
-    "color-warmup-victoria": "#493D6D",
-    "color-warmup-cadillac": "#7E3E72",
-    "color-warmup-raspberry": "#B23672",
-    "color-warmup-cerise": "#E72472",
-    "color-warmup-charm": "#C9778D",
-    "color-warmup-salmon": "#F19588",
-    "color-warmup-cherokee": "#F5BB89",
-    "color-warmup-corn": "#FDE082",
-    "color-spectrum-indigo": "#8e96eb",
-    "color-spectrum-violet": "#ad91f3",
-    "color-spectrum-purple": "#c08eeb",
-    "color-spectrum-fuchsia": "#dc82e9",
-    "color-spectrum-pink": "#e878b6",
-    "color-spectrum-rose": "#ef7186"
+    "always-color-white": "#ffffff ",
+    "always-color-black": "#000000 ",
+    "color-white": "#ffffff ",
+    "color-black": "#000000 ",
+    "gray-darkest": "#2a3740 ",
+    "gray-darker": "#4c5667 ",
+    "gray-dark": "#697a8b ",
+    "gray": "#a7afbb ",
+    "gray-light": "#d0d8de ",
+    "gray-lighter": "#e5ebf0 ",
+    "gray-lightest": "#f6f8f9 ",
+    "gray-decent": "#fcfcfd ",
+    "brand-primary": "#30b4c0 ",
+    "brand-secondary": "#b23672 ",
+    "brand-primary-decent": "#f4fbfc ",
+    "brand-secondary-decent": "#fbf5f8 ",
+    "brand-info": "#4b80a6 ",
+    "brand-success": "#5cb85c ",
+    "brand-warning": "#ff8e3c ",
+    "brand-danger": "#e22837 ",
+    "brand-info-decent": "#f5f8fb ",
+    "brand-success-decent": "#f6fbf5 ",
+    "brand-warning-decent": "#fdf5f0 ",
+    "brand-danger-decent": "#fdf3f3 ",
+    "color-code": "#f3f3f4 ",
+    "color-status-available": "#239b7d ",
+    "color-status-driving": "#3690ae ",
+    "color-status-resting": "#626b72 ",
+    "color-status-working": "#94488b ",
+    "color-map-marker-text": "#ffffff ",
+    "color-map-marker-active": "#ffffff ",
+    "color-map-marker-asset": "#2a3740 ",
+    "color-map-marker-poi": "#d63f7f ",
+    "color-map-marker-geofence": "#f9636e ",
+    "color-map-marker-route": "#36afd7 ",
+    "color-map-marker-info": "#3f759b ",
+    "color-map-marker-success": "#5cb85c ",
+    "color-map-marker-warning": "#ff8e3c ",
+    "color-map-marker-danger": "#e22837 ",
+    "color-map-marker-restrictions": "#8f68ed ",
+    "color-rating-1": "#e22837 ",
+    "color-rating-2": "#ff8e3c ",
+    "color-rating-3": "#f8c575 ",
+    "color-rating-4": "#5cb85c ",
+    "color-rating-5": "#4b924c ",
+    "color-highlight-darkest": "#154b56 ",
+    "color-highlight-darker": "#206e7e ",
+    "color-highlight-dark": "#268897 ",
+    "color-highlight": "#30b4c0 ",
+    "color-highlight-light": "#8ddbe3 ",
+    "color-highlight-lighter": "#cef0f3 ",
+    "color-highlight-lightest": "#ebf9fa ",
+    "color-highlight-decent": "#f3fbfc ",
+    "color-coldplay-wine": "#520d4e ",
+    "color-coldplay-aubergine": "#5a4876 ",
+    "color-coldplay-kashmir": "#536e8b ",
+    "color-coldplay-fountain": "#67abc5 ",
+    "color-coldplay-turquoise": "#4eccc1 ",
+    "color-coldplay-bermuda": "#79d4b3 ",
+    "color-coldplay-moos": "#a1daa3 ",
+    "color-coldplay-primrose": "#c7e291 ",
+    "color-coldplay-khaki": "#f0eb83 ",
+    "color-warmup-crimson": "#31144f ",
+    "color-warmup-victoria": "#493d6d ",
+    "color-warmup-cadillac": "#7e3e72 ",
+    "color-warmup-raspberry": "#b23672 ",
+    "color-warmup-cerise": "#e72472 ",
+    "color-warmup-charm": "#c9778d ",
+    "color-warmup-salmon": "#f19588 ",
+    "color-warmup-cherokee": "#f5bb89 ",
+    "color-warmup-corn": "#fde082 ",
+    "color-spectrum-indigo": "#8e96eb ",
+    "color-spectrum-violet": "#ad91f3 ",
+    "color-spectrum-purple": "#c08eeb ",
+    "color-spectrum-fuchsia": "#dc82e9 ",
+    "color-spectrum-pink": "#e878b6 ",
+    "color-spectrum-rose": "#ef7186 "
 }

package/lib/es/utils/init/initCSS.js

@@ -20,7 +20,7 @@ const initCSS = () => {
     }
     (0, initConfig_1.debug)('Checking for UIKIT CSS in document head.');
     const hasUikitCssLink = documentHasAnyOf(['link[href*="rio-uikit.css"]', 'link[href*="rio-uikit-core.css"]']);
-    const isUikitDemoPage = documentHas('style[data-vite-dev-id*="uikit.less"]');
+    const isUikitDemoPage = documentHas('style[data-vite-dev-id*="uikit.scss"]');
     const hasUikitBrandCssLink = documentHasAnyOf([
         'link[href*="man-uikit.css"]',
         'link[href*="vw-uikit.css"]',

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "1.9.0"
+    "version": "1.10.0"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "1.9.0",
+    "version": "1.10.0",
     "description": "The RIO UIKIT component library",
     "repository": {
         "type": "git",
@@ -25,6 +25,7 @@
         "build:style-traton": "vite build --mode style-traton",
         "build:style-xmas": "vite build --mode style-xmas",
         "build:rioglyph": "svgo -f rioglyph/svgs && vite build --mode rioglyph",
+        "build:rioglyph-local": "svgo -f rioglyph/svgs && vite build --mode rioglyph-local",
         "fixCssMinified": "node tools/fixCssMinified.mjs",
         "format-code": "npm run format-code:uikit && npm run format-code:demo",
         "format-code:uikit": "biome format --write src",
@@ -45,35 +46,24 @@
     "main": "lib/es/index.js",
     "module": "index.js",
     "types": "index.d.ts",
-    "less": "./styles/css/rio-uikit.less",
     "files": [
         "**/*.*"
     ],
-    "exports": {
-        ".": {
-            "import": "./index.js",
-            "types": "./index.d.ts"
-        },
-        "./*": {
-            "import": "./*.js",
-            "types": "./*.d.ts"
-        }
-    },
     "devDependencies": {
-        "@biomejs/biome": "2.0.5",
+        "@biomejs/biome": "2.1.2",
         "@testing-library/dom": "10.4.0",
         "@testing-library/jest-dom": "6.6.3",
         "@testing-library/react": "16.3.0",
         "@testing-library/react-hooks": "8.0.1",
         "@testing-library/user-event": "14.6.1",
         "@types/heremaps": "3.1.14",
-        "@types/lodash": "4.17.18",
+        "@types/lodash": "4.17.20",
         "@types/qs": "6.14.0",
         "@types/react": "18.3.18",
         "@types/react-dom": "18.3.5",
         "@types/react-redux": "7.1.34",
         "@types/resize-observer-browser": "0.1.11",
-        "@vitejs/plugin-react": "4.6.0",
+        "@vitejs/plugin-react": "4.7.0",
         "@vitest/coverage-c8": "0.33.0",
         "autoprefixer": "10.4.21",
         "backstopjs": "6.3.25",
@@ -81,7 +71,6 @@
         "dotenv": "16.5.0",
         "jsdom": "26.1.0",
         "jsdom-global": "3.0.2",
-        "less": "4.3.0",
         "license-checker": "25.0.1",
         "postcss": "8.5.6",
         "postcss-preset-env": "8.5.1",
@@ -91,8 +80,9 @@
         "react-dom": "18.0.0",
         "react-intl": "6.6.8",
         "rollup-plugin-copy": "3.5.0",
+        "sass": "^1.89.2",
         "strip-ansi": "7.1.0",
-        "svgo": "3.3.2",
+        "svgo": "4.0.0",
         "tiny-invariant": "1.3.3",
         "typescript": "5.8.3",
         "vite": "6.3.5",
@@ -106,11 +96,11 @@
     },
     "dependencies": {
         "@dnd-kit/core": "6.3.1",
-        "@dnd-kit/modifiers": "6.0.1",
-        "@dnd-kit/sortable": "7.0.2",
+        "@dnd-kit/modifiers": "9.0.0",
+        "@dnd-kit/sortable": "10.0.0",
         "@formkit/auto-animate": "0.8.2",
         "@popperjs/core": "2.11.8",
-        "@tanstack/react-virtual": "^3.13.11",
+        "@tanstack/react-virtual": "^3.13.12",
         "classnames": "2.5.1",
         "driver.js": "1.3.6",
         "events": "3.3.0",
@@ -123,7 +113,7 @@
         "prop-types": "15.8.1",
         "qs": "6.14.0",
         "react-bootstrap": "1.6.4",
-        "react-content-loader": "7.0.2",
+        "react-content-loader": "7.1.1",
         "react-custom-scrollbars-2": "4.5.0",
         "react-datetime": "github:rio-cloud/react-datetime#v3.1.1-1-merged",
         "react-dropzone": "14.3.8",

package/styles/variables/colors/colors.json

@@ -1,79 +1,79 @@
 {
-    "always-color-white": "#ffffff",
-    "always-color-black": "#000000",
-    "color-white": "#ffffff",
-    "color-black": "#000000",
-    "gray-darkest": "#2a3740",
-    "gray-darker": "#4C5667",
-    "gray-dark": "#697A8B",
-    "gray": "#A7AFBB",
-    "gray-light": "#D0D8DE",
-    "gray-lighter": "#E5EBF0",
-    "gray-lightest": "#f6f8f9",
-    "gray-decent": "#fcfcfd",
-    "brand-primary": "#30b4c0",
-    "brand-secondary": "#b23672",
-    "brand-primary-decent": "#f4fbfc",
-    "brand-secondary-decent": "#fbf5f8",
-    "brand-info": "#4B80A6",
-    "brand-success": "#5cb85c",
-    "brand-warning": "#ff8e3c",
-    "brand-danger": "#e22837",
-    "brand-info-decent": "#f5f8fb",
-    "brand-success-decent": "#f6fbf5",
-    "brand-warning-decent": "#fdf5f0",
-    "brand-danger-decent": "#fdf3f3",
-    "color-code": "#f3f3f4",
-    "color-status-available": "#239b7d",
-    "color-status-driving": "#3690ae",
-    "color-status-resting": "#626b72",
-    "color-status-working": "#94488b",
-    "color-map-marker-text": "#ffffff",
-    "color-map-marker-active": "#ffffff",
-    "color-map-marker-asset": "#2a3740",
-    "color-map-marker-poi": "#d63f7f",
-    "color-map-marker-geofence": "#f9636e",
-    "color-map-marker-route": "#36afd7",
-    "color-map-marker-info": "#3f759b",
-    "color-map-marker-success": "#5cb85c",
-    "color-map-marker-warning": "#ff8e3c",
-    "color-map-marker-danger": "#e22837",
-    "color-map-marker-restrictions": "#8F68ED",
-    "color-rating-1": "#e22837",
-    "color-rating-2": "#ff8e3c",
-    "color-rating-3": "#f8c575",
-    "color-rating-4": "#5cb85c",
-    "color-rating-5": "#4b924c",
-    "color-highlight-darkest": "#154b56",
-    "color-highlight-darker": "#206e7e",
-    "color-highlight-dark": "#268897",
-    "color-highlight": "#30b4c0",
-    "color-highlight-light": "#8ddbe3",
-    "color-highlight-lighter": "#cef0f3",
-    "color-highlight-lightest": "#ebf9fa",
-    "color-highlight-decent": "#f3fbfc",
-    "color-coldplay-wine": "#520D4E",
-    "color-coldplay-aubergine": "#5a4876",
-    "color-coldplay-kashmir": "#536E8B",
-    "color-coldplay-fountain": "#67abc5",
-    "color-coldplay-turquoise": "#4ECCC1",
-    "color-coldplay-bermuda": "#79D4B3",
-    "color-coldplay-moos": "#A1DAA3",
-    "color-coldplay-primrose": "#C7E291",
-    "color-coldplay-khaki": "#F0EB83",
-    "color-warmup-crimson": "#31144F",
-    "color-warmup-victoria": "#493D6D",
-    "color-warmup-cadillac": "#7E3E72",
-    "color-warmup-raspberry": "#B23672",
-    "color-warmup-cerise": "#E72472",
-    "color-warmup-charm": "#C9778D",
-    "color-warmup-salmon": "#F19588",
-    "color-warmup-cherokee": "#F5BB89",
-    "color-warmup-corn": "#FDE082",
-    "color-spectrum-indigo": "#8e96eb",
-    "color-spectrum-violet": "#ad91f3",
-    "color-spectrum-purple": "#c08eeb",
-    "color-spectrum-fuchsia": "#dc82e9",
-    "color-spectrum-pink": "#e878b6",
-    "color-spectrum-rose": "#ef7186"
+    "always-color-white": "#ffffff ",
+    "always-color-black": "#000000 ",
+    "color-white": "#ffffff ",
+    "color-black": "#000000 ",
+    "gray-darkest": "#2a3740 ",
+    "gray-darker": "#4c5667 ",
+    "gray-dark": "#697a8b ",
+    "gray": "#a7afbb ",
+    "gray-light": "#d0d8de ",
+    "gray-lighter": "#e5ebf0 ",
+    "gray-lightest": "#f6f8f9 ",
+    "gray-decent": "#fcfcfd ",
+    "brand-primary": "#30b4c0 ",
+    "brand-secondary": "#b23672 ",
+    "brand-primary-decent": "#f4fbfc ",
+    "brand-secondary-decent": "#fbf5f8 ",
+    "brand-info": "#4b80a6 ",
+    "brand-success": "#5cb85c ",
+    "brand-warning": "#ff8e3c ",
+    "brand-danger": "#e22837 ",
+    "brand-info-decent": "#f5f8fb ",
+    "brand-success-decent": "#f6fbf5 ",
+    "brand-warning-decent": "#fdf5f0 ",
+    "brand-danger-decent": "#fdf3f3 ",
+    "color-code": "#f3f3f4 ",
+    "color-status-available": "#239b7d ",
+    "color-status-driving": "#3690ae ",
+    "color-status-resting": "#626b72 ",
+    "color-status-working": "#94488b ",
+    "color-map-marker-text": "#ffffff ",
+    "color-map-marker-active": "#ffffff ",
+    "color-map-marker-asset": "#2a3740 ",
+    "color-map-marker-poi": "#d63f7f ",
+    "color-map-marker-geofence": "#f9636e ",
+    "color-map-marker-route": "#36afd7 ",
+    "color-map-marker-info": "#3f759b ",
+    "color-map-marker-success": "#5cb85c ",
+    "color-map-marker-warning": "#ff8e3c ",
+    "color-map-marker-danger": "#e22837 ",
+    "color-map-marker-restrictions": "#8f68ed ",
+    "color-rating-1": "#e22837 ",
+    "color-rating-2": "#ff8e3c ",
+    "color-rating-3": "#f8c575 ",
+    "color-rating-4": "#5cb85c ",
+    "color-rating-5": "#4b924c ",
+    "color-highlight-darkest": "#154b56 ",
+    "color-highlight-darker": "#206e7e ",
+    "color-highlight-dark": "#268897 ",
+    "color-highlight": "#30b4c0 ",
+    "color-highlight-light": "#8ddbe3 ",
+    "color-highlight-lighter": "#cef0f3 ",
+    "color-highlight-lightest": "#ebf9fa ",
+    "color-highlight-decent": "#f3fbfc ",
+    "color-coldplay-wine": "#520d4e ",
+    "color-coldplay-aubergine": "#5a4876 ",
+    "color-coldplay-kashmir": "#536e8b ",
+    "color-coldplay-fountain": "#67abc5 ",
+    "color-coldplay-turquoise": "#4eccc1 ",
+    "color-coldplay-bermuda": "#79d4b3 ",
+    "color-coldplay-moos": "#a1daa3 ",
+    "color-coldplay-primrose": "#c7e291 ",
+    "color-coldplay-khaki": "#f0eb83 ",
+    "color-warmup-crimson": "#31144f ",
+    "color-warmup-victoria": "#493d6d ",
+    "color-warmup-cadillac": "#7e3e72 ",
+    "color-warmup-raspberry": "#b23672 ",
+    "color-warmup-cerise": "#e72472 ",
+    "color-warmup-charm": "#c9778d ",
+    "color-warmup-salmon": "#f19588 ",
+    "color-warmup-cherokee": "#f5bb89 ",
+    "color-warmup-corn": "#fde082 ",
+    "color-spectrum-indigo": "#8e96eb ",
+    "color-spectrum-violet": "#ad91f3 ",
+    "color-spectrum-purple": "#c08eeb ",
+    "color-spectrum-fuchsia": "#dc82e9 ",
+    "color-spectrum-pink": "#e878b6 ",
+    "color-spectrum-rose": "#ef7186 "
 }

package/utils/init/initCSS.js

@@ -17,7 +17,7 @@ export const initCSS = () => {
     }
     debug('Checking for UIKIT CSS in document head.');
     const hasUikitCssLink = documentHasAnyOf(['link[href*="rio-uikit.css"]', 'link[href*="rio-uikit-core.css"]']);
-    const isUikitDemoPage = documentHas('style[data-vite-dev-id*="uikit.less"]');
+    const isUikitDemoPage = documentHas('style[data-vite-dev-id*="uikit.scss"]');
     const hasUikitBrandCssLink = documentHasAnyOf([
         'link[href*="man-uikit.css"]',
         'link[href*="vw-uikit.css"]',

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "1.9.0"
+    "version": "1.10.0"
 }

package/lib/es/utils/init/printPoweredByRIO.d.ts

@@ -1 +0,0 @@
-export declare const printPoweredByRIO: () => void;

package/lib/es/utils/init/printPoweredByRIO.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.printPoweredByRIO = void 0;
-const version_json_1 = require("../../version.json");
-const initConfig_1 = require("./initConfig");
-const logStyled = (message) => console.log('%c%s', 'color: #697a8b;', message);
-const printPoweredByRIO = () => {
-    logStyled('- - - - - - - - - - - - - - - - - -');
-    const message = [`RIO UIKIT Version ${version_json_1.version}\nhttps://uikit.developers.rio.cloud`];
-    if (initConfig_1.isProd && !initConfig_1.isInIframe) {
-        message.push('\n\nYou are a Developer? RIO is hiring!\n👉 https://rio.cloud/en/career 👈');
-    }
-    logStyled(message.join(''));
-    logStyled('- - - - - - - - - - - - - - - - - -');
-};
-exports.printPoweredByRIO = printPoweredByRIO;

package/utils/init/printPoweredByRIO.d.ts

@@ -1 +0,0 @@
-export declare const printPoweredByRIO: () => void;

package/utils/init/printPoweredByRIO.js

@@ -1,12 +0,0 @@
-import { version } from '../../version.json';
-import { isInIframe, isProd } from './initConfig';
-const logStyled = (message) => console.log('%c%s', 'color: #697a8b;', message);
-export const printPoweredByRIO = () => {
-    logStyled('- - - - - - - - - - - - - - - - - -');
-    const message = [`RIO UIKIT Version ${version}\nhttps://uikit.developers.rio.cloud`];
-    if (isProd && !isInIframe) {
-        message.push('\n\nYou are a Developer? RIO is hiring!\n👉 https://rio.cloud/en/career 👈');
-    }
-    logStyled(message.join(''));
-    logStyled('- - - - - - - - - - - - - - - - - -');
-};