@topconsultnpm/sdkui-react-beta 6.6.84 → 6.6.85

package/lib/components/base/TMEditorBase.d.ts

@@ -23,7 +23,8 @@ export interface ITMEditorBase {
     iconMode?: IconModes;
     iconSize?: Sizes;
     isModifiedWhen?: boolean;
-    label?: any;
+    label?: string;
+    labelColor?: string;
     labelMode?: LabelModes;
     labelPosition?: 'top' | 'left' | 'right';
     labelAlign?: boolean;

package/lib/components/choosers/TMDataListItemChooser.js

@@ -8,12 +8,12 @@ import TMSpinner from '../base/TMSpinner';
 import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
 import TMDataListItemViewer from '../viewers/TMDataListItemViewer';
-const TMDataListItemChooser = ({ dataListId, icon, backgroundColor, showBorder = true, buttons = [], elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, showClearButton = false, validationItems = [], onValueChanged }) => {
+const TMDataListItemChooser = ({ labelColor, dataListId, icon, backgroundColor, showBorder = true, buttons = [], elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, showClearButton = false, validationItems = [], onValueChanged }) => {
     const [showChooser, setShowChooser] = useState(false);
     const renderTemplate = () => {
         return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px' }, children: [placeHolder && (!values || values.length <= 0) && _jsx("p", { children: placeHolder }), values && values.length > 0 && _jsx(TMDataListItemViewer, { dataListId: dataListId, value: values?.[0] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { icon: icon, buttons: buttons, backgroundColor: backgroundColor, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { labelColor: labelColor, icon: icon, buttons: buttons, backgroundColor: backgroundColor, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
                 _jsx(TMDataListItemChooserForm, { allowMultipleSelection: allowMultipleSelection, dataListId: dataListId, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
 };
 export default TMDataListItemChooser;

package/lib/components/choosers/TMDynDataListItemChooser.js

@@ -23,7 +23,7 @@ export const IsParametricQuery = (qd) => {
     }
     return false;
 };
-const TMDynDataListItemChooser = ({ tid, md, layoutMode = LayoutModes.None, queryParamsDynDataList, buttons = [], backgroundColor, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], icon, onValueChanged, onCascadeRefreshDynDataLists, showClearButton }) => {
+const TMDynDataListItemChooser = ({ tid, md, layoutMode = LayoutModes.None, queryParamsDynDataList, buttons = [], backgroundColor, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], icon, labelColor, onValueChanged, onCascadeRefreshDynDataLists, showClearButton }) => {
     const [showChooser, setShowChooser] = useState(false);
     const [dynDl, setDynDl] = useState();
     const [dataSource, setDataSource] = useState();
@@ -67,7 +67,7 @@ const TMDynDataListItemChooser = ({ tid, md, layoutMode = LayoutModes.None, quer
     const renderTemplate = () => {
         return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px' }, children: [placeHolder && (!values || values.length <= 0) && _jsx("p", { children: placeHolder }), values && values.length > 0 && dynDl && dataSource && _jsxs(StyledDivHorizontal, { children: [_jsx(IconDetails, {}), _jsx("p", { style: { marginLeft: '5px' }, children: dataSource.dtdResult?.rows?.filter(o => o[dynDl.selectItemForValue ?? 0] == values?.[0])?.[0]?.[dynDl.selectItemForDescription ?? 0] })] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { icon: icon, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { icon: icon, labelColor: labelColor, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
                 _jsx(TMDynDataListItemChooserForm, { TID: tid, MID: md?.id, dynDL: dynDl, allowMultipleSelection: allowMultipleSelection, searchResult: dataSource, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => {
                         onValueChanged?.(IDs);
                         if (!dynDl)

package/lib/components/choosers/TMUserChooser.js

@@ -8,7 +8,7 @@ import TMSpinner from '../base/TMSpinner';
 import TMTooltip from '../base/TMTooltip';
 import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
-const TMUserChooser = ({ readOnly = false, icon, dataSource, backgroundColor, buttons = [], disabled = false, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, showClearButton }) => {
+const TMUserChooser = ({ labelColor, readOnly = false, icon, dataSource, backgroundColor, buttons = [], disabled = false, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, showClearButton }) => {
     const [showChooser, setShowChooser] = useState(false);
     useEffect(() => {
         if (!values || values.length <= 0)
@@ -21,7 +21,7 @@ const TMUserChooser = ({ readOnly = false, icon, dataSource, backgroundColor, bu
                 ? _jsx("p", { children: placeHolder })
                 : _jsxs(_Fragment, { children: [_jsx(TMUserIdViewer, { userId: values?.[0], showIcon: true }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }) }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { disabled: disabled, icon: icon, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { disabled: disabled, labelColor: labelColor, icon: icon, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
                 _jsx(TMUserChooserForm, { allowMultipleSelection: allowMultipleSelection, dataSource: dataSource, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
 };
 export default TMUserChooser;

package/lib/components/editors/TMEditorStyled.d.ts

@@ -25,6 +25,7 @@ export declare const StyledEditorLabel: import("styled-components").IStyledCompo
     $labelPosition: 'right' | 'left' | 'top';
     $disabled: boolean;
     $fontSize: string;
+    $color?: string | undefined;
 }>>;
 export declare const StyledEditorButtonIcon: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $index: number;

package/lib/components/editors/TMEditorStyled.js

@@ -49,7 +49,7 @@ export const StyledEditorIcon = styled.div `
 `;
 export const StyledEditorLabel = styled.div `
     font-size: ${props => props.$fontSize} ;
-    color:${props => !props.$disabled ? props.$isFocused ? TMColors.primary : TMColors.label_normal : TMColors.disabled};
+    color:${props => !props.$disabled ? props.$isFocused ? TMColors.primary : props.$color ? props.$color : TMColors.label_normal : TMColors.disabled};
     padding: 0 3px;
     user-select: none;
     transform: ${props => props.$labelPosition === 'left' && 'translateY(5px)'};

package/lib/components/editors/TMSummary.js

@@ -46,7 +46,7 @@ const StyledEditorButtonIcon2 = styled.div `
         border-bottom-color: ${TMColors.primary};
      }
 `;
-const TMSummary = ({ hasValue, borderRadius = '4px', validationItems = [], buttons = [], label = '', onClearClick, openEditorOnSummaryClick, onEditorClick, backgroundColor = 'transparent', showBorder = true, isModifiedWhen, elementStyle, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, icon, showEditButton = true, showClearButton, iconEditButton, iconeEditTooltip, labelPosition = 'left', template, disabled = false, onValueChanged }) => {
+const TMSummary = ({ labelColor, hasValue, borderRadius = '4px', validationItems = [], buttons = [], label = '', onClearClick, openEditorOnSummaryClick, onEditorClick, backgroundColor = 'transparent', showBorder = true, isModifiedWhen, elementStyle, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, icon, showEditButton = true, showClearButton, iconEditButton, iconeEditTooltip, labelPosition = 'left', template, disabled = false, onValueChanged }) => {
     const renderTemplateField = () => {
         return (_jsx(StyledSummaryTemplateInput, { tabIndex: 0, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, "$isModified": isModifiedWhen, "$vil": validationItems, "$disabled": disabled, "$showBorder": showBorder, "$fontSize": fontSize, "$width": width, "$height": height, onChange: onValueChanged, children: _jsxs("div", { onClick: () => { if (openEditorOnSummaryClick && !disabled)
                     onEditorClick?.(); }, onDoubleClick: () => { if (!openEditorOnSummaryClick && !disabled)
@@ -55,7 +55,7 @@ const TMSummary = ({ hasValue, borderRadius = '4px', validationItems = [], butto
                             })] })] }) }));
     };
     const renderLabel = () => {
-        return (_jsx(StyledEditorLabel, { "$isFocused": false, "$labelPosition": labelPosition, "$disabled": disabled, "$fontSize": fontSize, children: _jsx("div", { style: { flexDirection: "row", display: "flex", alignItems: "start", justifyContent: "start" }, children: label }) }));
+        return (_jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": false, "$labelPosition": labelPosition, "$disabled": disabled, "$fontSize": fontSize, children: _jsx("div", { style: { flexDirection: "row", display: "flex", alignItems: "start", justifyContent: "start" }, children: label }) }));
     };
     const renderSummary = () => {
         return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: icon && _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && renderLabel(), renderTemplateField(), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));

package/lib/components/editors/TMTextBox.js

@@ -31,7 +31,7 @@ const StyledTextBoxEditorButton = styled.div `
         border-bottom-color: ${TMColors.primary};
      }
 `;
-const TMTextBox = ({ autoFocus, maxLength, precision, scale, showClearButton, validationItems = [], label = '', readOnly = false, formulaItems = [], buttons = [], isModifiedWhen, placeHolder, elementStyle, width = '100%', maxValue, fontSize = FontSize.defaultFontSize, icon, labelPosition = 'left', value, disabled = false, type = 'text', onValueChanged, onBlur, borderRadius }) => {
+const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, scale, showClearButton, validationItems = [], label = '', readOnly = false, formulaItems = [], buttons = [], isModifiedWhen, placeHolder, elementStyle, width = '100%', maxValue, fontSize = FontSize.defaultFontSize, icon, labelPosition = 'left', value, disabled = false, type = 'text', onValueChanged, onBlur, borderRadius }) => {
     const [initialType, setInitialType] = useState(type);
     const [currentType, setCurrentType] = useState(type);
     const [currentValue, setCurrentValue] = useState(value);
@@ -150,7 +150,7 @@ const TMTextBox = ({ autoFocus, maxLength, precision, scale, showClearButton, va
                             })] }), formulaItems.length > 0 && (_jsx(ContextMenu, { dataSource: formulaMenuItems, target: `#text-${id}`, onItemClick: (e) => { insertText(e.itemData?.text ?? ''); } })), _jsx(TMVilViewer, { vil: validationItems })] }));
     };
     const renderedLeftLabelTextBox = () => {
-        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, "$fontSize": fontSize, children: label }), renderInputField()] }) })] }));
+        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, "$fontSize": fontSize, children: label }), renderInputField()] }) })] }));
     };
     return (_jsx("div", { style: elementStyle, children: renderedLeftLabelTextBox() }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.6.84",
+    "version": "6.6.85",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",