@topconsultnpm/sdkui-react 6.22.0-t1 → 6.22.0-t3

package/lib/components/query/TMQueryEditor.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from 'react';
 import { SDK_Localizator, AccessLevels, OnJoinItem, JoinTypes, PlatformObjectValidator, MetadataDataDomains, DcmtTypeListCacheService, JoinItem, MetadataDataTypes, OrderByItem, QueryFunctions, QueryOperators, ResultTypes, SelectItem, SDK_Globals, UserListCacheService, WhereItem, SearchEngine, SelectItemVisibilities, DataListCacheService, QueryValidatorOptions, TMPropertyNames, AppModules, LayoutModes } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
@@ -63,7 +63,7 @@ export function useQueryApplyForm(d, formMode, inputData, onApplied, parameters)
     const [validationItems, setValidationItems] = useState([]);
     return { formData, setFormData, formDataOrig, validationItems, setValidationItems, exception, applyData };
 }
-const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDistinct = false, showToolbar = true, validateSelect = true, validateOrderBy = true, raiseWarningForOnlyMetadataDcmtTypes = false, onApplied, onClose, height = 'auto', borderRadius = '4px', searchText, showApply, showUndo, showBack, onFromTIDChanged, ShowOnlySAP, updateIsModalOpen, showSearchResultSidebar = true, showDcmtFormSidebar = true, showToppyDraggableHelpCenter = true, toppyHelpCenterUsePortal = false }) => {
+const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDistinct = false, showToolbar = true, validateSelect = true, validateOrderBy = true, validateWhereRequired = false, raiseWarningForOnlyMetadataDcmtTypes = false, onApplied, onClose, height = 'auto', borderRadius = '4px', searchText, showApply, showUndo, showBack, onFromTIDChanged, ShowOnlySAP, updateIsModalOpen, showSearchResultSidebar = true, showDcmtFormSidebar = true, showToppyDraggableHelpCenter = true, toppyHelpCenterUsePortal = false }) => {
     const [confirmQueryParams, ConfirmQueryParamsDialog] = useQueryParametersDialog();
     const { formData, setFormData, formDataOrig, validationItems, setValidationItems, exception, applyData } = useQueryApplyForm(Descriptors.Query, formMode, inputData, onApplied);
     const [dcmtTypesList, setDcmtTypesList] = useState([]);
@@ -111,6 +111,7 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
         let qvo = new QueryValidatorOptions();
         qvo.DoSelectValidation = validateSelect;
         qvo.DoOrderByValidation = validateOrderBy;
+        qvo.DoWhereRequiredValidation = validateWhereRequired;
         qvo.RaiseWarningForOnlyMetadataDcmtTypes = raiseWarningForOnlyMetadataDcmtTypes;
         PlatformObjectValidator.QueryValidatorAsync(formData, vil, qvo).then(() => { setValidationItems(vil); });
     };
@@ -744,7 +745,7 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
                                     }
                                 }
                             }
-                        }, children: [(!isReadOnly || fromCount > 0) && _jsx(Item, { title: SDKUI_Localizator.Source, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, fromCount, validationItems.filter((o) => [TMPropertyNames.fromTid, TMPropertyNames.join].includes(o.PropertyName))), children: _jsx(StyledAccordionItemContainer, { style: { maxHeight: fromCount > 0 ? '330px' : '100%' }, children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, style: { height: '100%' }, children: [_jsxs(StyledRowItem, { children: [!isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => { let qd = SearchEngine.NewQueryDescriptor(); setFormData({ ...qd }); } }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', elementStyle: { opacity: !formData?.from?.tid ? 0.4 : 1 }, disabled: !formData?.from?.tid, icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: onAdd_JoinItem }), _jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMQdDropDownMenu, { content: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }), items: [
+                        }, children: [(!isReadOnly || fromCount > 0) && _jsx(Item, { title: SDKUI_Localizator.Source, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, fromCount, validationItems.filter((o) => [TMPropertyNames.fromTid, TMPropertyNames.join].includes(o.PropertyName))), children: _jsx(StyledAccordionItemContainer, { style: { maxHeight: fromCount > 0 ? '330px' : '100%' }, children: _jsxs(StyledAccordionItemContent, { $disabled: isReadOnly, style: { height: '100%' }, children: [_jsxs(StyledRowItem, { children: [!isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => { let qd = SearchEngine.NewQueryDescriptor(); setFormData({ ...qd }); } }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', elementStyle: { opacity: !formData?.from?.tid ? 0.4 : 1 }, disabled: !formData?.from?.tid, icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: onAdd_JoinItem }), _jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMQdDropDownMenu, { content: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }), items: [
                                                                 { icon: showId ? _jsx(IconHide, { color: TMColors.button_icon }) : _jsx(IconShow, { color: TMColors.button_icon }), name: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show, onClick: () => setShowId(!showId) },
                                                                 { icon: showCompleteMetadataName ? _jsx(IconHide, { color: TMColors.primary }) : _jsx(IconShow, { color: TMColors.primary }), name: showCompleteMetadataName ? SDKUI_Localizator.Hide_CompleteName : SDKUI_Localizator.Show_CompleteName, onClick: () => setShowCompleteMetadataName(!showCompleteMetadataName) }
                                                             ] }) }), _jsx(TMDcmtTypeChooser, { disabled: isReadOnly, showEditButton: false, placeHolder: `<${SDKUI_Localizator.DcmtTypeSelect} ...>`, borderRadius: borderRadius, ShowOnlySAP: ShowOnlySAP, openEditorOnSummaryClick: true, showBorder: false, showId: showId, backgroundColor: getColorIndex({ tid: formData.from?.tid, alias: undefined }), values: [formData.from?.tid], validationItems: validationItems.filter((o) => o.PropertyName === TMPropertyNames.fromTid), onValueChanged: (tids) => { let qd = SearchEngine.NewQueryDescriptor(); qd.from.tid = tids[0]; setFormData({ ...qd }); onFromTIDChanged?.(tids[0]); }, updateIsModalOpen: updateIsModalOpen })] }), formData?.join?.map((ji, index) => {
@@ -774,12 +775,12 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
                                                                             { name: 'OR', onClick: () => onChange_OnJoinItem_Or(true, index, indexOn) }
                                                                         ] }), _jsx(TMQdEditableItem, { value: onItem.leftBrackets, allowedPattern: /\(/g, backgroundColor: colorBrackets, onValueChanged: (value) => { onChange_OnJoinItem_Brackets(value, true, index, indexOn); } }), _jsx(TMMetadataChooser, { disabled: isReadOnly, showEditButton: false, getColorIndex: getColorIndex, showCompleteMetadataName: showCompleteMetadataName, openEditorOnSummaryClick: true, showBorder: false, borderRadius: borderRadius, showId: showId, backgroundColor: getColorIndex({ tid: onItem.leftTID, alias: onItem.leftAlias }), qd: formData, values: onItem.leftTID ? [{ tid: onItem.leftTID, mid: onItem.leftMID, aliasTID: onItem.leftAlias }] : [], onValueChanged: (values) => { values.length > 0 && onChange_OnJoinMetadatoLeft(values[0], index, indexOn); }, updateIsModalOpen: updateIsModalOpen }), _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, color: 'green', borderRadius: borderRadius, content: _jsx(StyledItemWrapper, { children: LocalizeQueryOperators(onItem.operator) }), items: [] }), _jsx(TMMetadataChooser, { disabled: isReadOnly, showEditButton: false, getColorIndex: getColorIndex, showCompleteMetadataName: showCompleteMetadataName, openEditorOnSummaryClick: true, showBorder: false, borderRadius: borderRadius, showId: showId, backgroundColor: getColorIndex({ tid: onItem.rightTID, alias: onItem.rightAlias }), qd: formData, values: onItem.rightTID ? [{ tid: onItem.rightTID, mid: onItem.rightMID, aliasTID: onItem.rightAlias }] : [], onValueChanged: (values) => { values.length > 0 && onChange_OnJoinMetadatoRight(values[0], index, indexOn); }, updateIsModalOpen: updateIsModalOpen }), _jsx(TMQdEditableItem, { value: onItem.rightBrackets, allowedPattern: /\)/g, backgroundColor: colorBrackets, onValueChanged: (value) => { onChange_OnJoinItem_Brackets(value, false, index, indexOn); } })] }, indexOn));
                                                         })] }, `${ji.tid}_${index}`));
-                                            }), _jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.join) })] }) }) }), canShowSelect && _jsx(Item, { title: SDK_Localizator.QuerySelect, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, selectCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.select)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, children: [_jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.select) }), (!formData?.select || formData?.select.length <= 0) && !isReadOnly &&
+                                            }), _jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.join) })] }) }) }), canShowSelect && _jsx(Item, { title: SDK_Localizator.QuerySelect, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, selectCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.select)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { $disabled: isReadOnly, children: [_jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.select) }), (!formData?.select || formData?.select.length <= 0) && !isReadOnly &&
                                                 _jsxs(StyledRowItem, { children: [_jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.Add, onClick: onAdd_SelectItem }), dcmtTypesList.length == 1
                                                             ? _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.AddAlls, onClick: () => { onAddAll_SelectItem(qdTIDs[0]); } })
                                                             : _jsx(TMQdDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.AddAlls }), items: qdTIDs.map((tid_alias) => ({ name: `${getDisplayAlias(getDcmtTypeName(tid_alias.tid), tid_alias.alias)}`, onClick: () => { onAddAll_SelectItem(tid_alias); } })) })] }), formData?.select?.map((si, index) => {
                                                 return (_jsxs(StyledRowItem, { onDragEnd: dragEnd, onDragOver: dragOver, onDrop: (e) => dropSelect(e, si), children: [!isReadOnly && _jsx(StyledDraggableDiv, { draggable: true, onDragStart: (e) => dragStart(e, si), children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_SelectItem(index) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_SelectItem(index + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: getSelectMenuItems(index) }), (!isReadOnly || (si.function && si.function != QueryFunctions.None)) && _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, color: 'green', borderRadius: borderRadius, content: _jsx(StyledItemWrapper, { children: si.function === QueryFunctions.None ? "..." : LocalizeQueryFunctions(si.function) }), items: getQueryFunctionsMenuItems(si, index) }), _jsx(TMMetadataChooser, { disabled: isReadOnly, filterMetadata: (o => o.perm?.canView === AccessLevels.Yes || o.perm?.canUpdate === AccessLevels.Yes), showEditButton: false, getColorIndex: getColorIndex, showCompleteMetadataName: showCompleteMetadataName, openEditorOnSummaryClick: true, showBorder: false, borderRadius: borderRadius, showId: showId, backgroundColor: getColorIndex({ tid: si.tid, alias: si.alias }), qd: formData, values: [{ tid: si.tid, mid: si.mid, aliasTID: si.alias }], onValueChanged: (values) => { values.length > 0 && onChange_SelectItem_MID(values[0], index); }, updateIsModalOpen: updateIsModalOpen }), (!isReadOnly || si.as) && _jsx(TMQdEditableItem, { value: si.as, backgroundColor: colorValue, placeHolder: `<${SDKUI_Localizator.Query_EnterAlias}...>`, width: '100%', onValueChanged: (value) => { onChange_SelectItem_As(value, index); } })] }, `${si.tid}_${si.mid}_${index}`));
-                                            })] }) }) }), fromCount > 0 && (!isReadOnly || whereCount > 0) && _jsx(Item, { title: SDK_Localizator.QueryWhere, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, whereCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.where)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, children: [_jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.where) }), (!formData?.where || formData?.where.length <= 0) && !isReadOnly &&
+                                            })] }) }) }), fromCount > 0 && (!isReadOnly || whereCount > 0) && _jsx(Item, { title: SDK_Localizator.QueryWhere, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, whereCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.where)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { $disabled: isReadOnly, children: [_jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.where) }), (!formData?.where || formData?.where.length <= 0) && !isReadOnly &&
                                                 _jsx(StyledRowItem, { children: _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.Add, onClick: onAdd_WhereItem }) }), formData?.where?.map((wi, index) => {
                                                 return (_jsxs(StyledRowItem, { onDragEnd: dragEnd, onDragOver: dragOver, onDrop: (e) => dropWhere(e, wi), children: [!isReadOnly && _jsx(StyledDraggableDiv, { draggable: true, onDragStart: (e) => dragStart(e, wi), children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_WhereItem(index) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_WhereItem(index + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: [
                                                                 { name: SDKUI_Localizator.AddAbove, onClick: () => onAdd_WhereItem(index) },
@@ -797,7 +798,7 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
                                                                 { name: 'AND', onClick: () => onChange_WhereItem_Or(false, index) },
                                                                 { name: 'OR', onClick: () => onChange_WhereItem_Or(true, index) }
                                                             ] }), _jsx(TMQdEditableItem, { value: wi.leftBrackets, allowedPattern: /\(/g, backgroundColor: colorBrackets, onValueChanged: (value) => { onChange_WhereItem_Brackets(value, true, index); } }), _jsx(TMMetadataChooser, { disabled: isReadOnly, filterMetadata: (o => o.perm?.canSearch === AccessLevels.Yes), showEditButton: false, getColorIndex: getColorIndex, showCompleteMetadataName: showCompleteMetadataName, openEditorOnSummaryClick: true, showBorder: false, borderRadius: borderRadius, showId: showId, backgroundColor: getColorIndex({ tid: wi.tid, alias: wi.alias }), qd: formData, values: [{ tid: wi.tid, mid: wi.mid, aliasTID: wi.alias }], onValueChanged: (values) => { values.length > 0 && onChange_WhereItem_Metadato(values[0], index); }, updateIsModalOpen: updateIsModalOpen }), _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, color: 'green', borderRadius: borderRadius, content: _jsx(StyledDivHorizontal, { children: _jsx(StyledItemWrapper, { children: LocalizeQueryOperators(wi.operator) }) }), items: getQueryOperatorsMenuItems(wi, index) }), _jsx(TMQdWhereItemValue, { whereItem: wi, index: index, onValueChanged: (values) => { onChange_WhereItem_Values(values[0], values[1], index); }, updateIsModalOpen: updateIsModalOpen }), _jsx(TMQdEditableItem, { value: wi.rightBrackets, allowedPattern: /\)/g, backgroundColor: colorBrackets, onValueChanged: (value) => { onChange_WhereItem_Brackets(value, false, index); } })] }, `${wi.tid}_${wi.mid}_${index}`));
-                                            })] }) }) }), fromCount > 0 && (!isReadOnly || orderByCount > 0) && _jsx(Item, { title: SDK_Localizator.QueryOrderBy, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, orderByCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.orderBy)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, children: [(!formData?.orderBy || formData?.orderBy.length <= 0) && !isReadOnly &&
+                                            })] }) }) }), fromCount > 0 && (!isReadOnly || orderByCount > 0) && _jsx(Item, { title: SDK_Localizator.QueryOrderBy, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, orderByCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.orderBy)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { $disabled: isReadOnly, children: [(!formData?.orderBy || formData?.orderBy.length <= 0) && !isReadOnly &&
                                                 _jsx(StyledRowItem, { children: _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.Add, onClick: onAdd_OrderByItem }) }), formData?.orderBy?.map((oi, index) => {
                                                 return (_jsxs(StyledRowItem, { onDragEnd: dragEnd, onDragOver: dragOver, onDrop: (e) => dropOrderBy(e, oi), children: [!isReadOnly && _jsx(StyledDraggableDiv, { draggable: true, onDragStart: (e) => dragStart(e, oi), children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_OrderByItem(index) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OrderByItem(index + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: [
                                                                 { name: SDKUI_Localizator.AddAbove, onClick: () => onAdd_OrderByItem(index) },
@@ -808,7 +809,7 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
                                                                 { name: 'ASC', onClick: () => onChange_OrderByItem_Asc(true, oi, index) },
                                                                 { name: 'DESC', onClick: () => onChange_OrderByItem_Asc(false, oi, index) }
                                                             ] })] }, `${oi.tid}_${oi.mid}_${index}`));
-                                            })] }) }) }), fromCount > 0 && _jsx(Item, { title: SDKUI_Localizator.Options, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, undefined, []), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, children: [showDistinct && _jsx(TMCheckBox, { label: SDK_Localizator.QueryDistinct, value: formData.isDistinct, onValueChanged: () => { setFormData({ ...formData, isDistinct: !formData.isDistinct }); } }), _jsx(TMTextBox, { type: 'number', width: '200px', label: SDKUI_Localizator.MaxDcmtsToBeReturned, validationItems: validationItems.filter((o) => o.PropertyName == TMPropertyNames.maxDcmtsToBeReturned), value: formData.maxDcmtsToBeReturned, onBlur: (newValue) => setFormData({ ...formData, maxDcmtsToBeReturned: Number(newValue) }) })] }) }) })] }), _jsx(ConfirmQueryParamsDialog, {})] }), showResultSearch && _jsxs(StyledModalContainer, { style: { backgroundColor: 'white' }, children: [" ", renderResultSearchForm, " "] })] }));
+                                            })] }) }) }), fromCount > 0 && _jsx(Item, { title: SDKUI_Localizator.Options, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, undefined, []), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { $disabled: isReadOnly, children: [showDistinct && _jsx(TMCheckBox, { label: SDK_Localizator.QueryDistinct, value: formData.isDistinct, onValueChanged: () => { setFormData({ ...formData, isDistinct: !formData.isDistinct }); } }), _jsx(TMTextBox, { type: 'number', width: '200px', label: SDKUI_Localizator.MaxDcmtsToBeReturned, validationItems: validationItems.filter((o) => o.PropertyName == TMPropertyNames.maxDcmtsToBeReturned), value: formData.maxDcmtsToBeReturned, onBlur: (newValue) => setFormData({ ...formData, maxDcmtsToBeReturned: Number(newValue) }) })] }) }) })] }), _jsx(ConfirmQueryParamsDialog, {})] }), showResultSearch && _jsxs(StyledModalContainer, { style: { backgroundColor: 'white' }, children: [" ", renderResultSearchForm, " "] })] }));
 };
 export default TMQueryEditor;
 const TMQdEditableItem = ({ value, placeHolder, width, backgroundColor, allowedPattern, onValueChanged }) => {
@@ -1038,5 +1039,5 @@ const StyledContent = styled.div `
 const TMQdDropDownMenu = ({ content, items, disabled = false, color = TMColors.text_normal, backgroundColor = TMColors.default_background, borderRadius }) => {
     const [id, setID] = useState('');
     useEffect(() => { setID(genUniqueId()); }, [content]);
-    return (_jsx(ContextMenu, { target: `#idContainer${id}`, items: items || [], trigger: "left", children: _jsx(StyledContent, { id: `idContainer${id}`, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, children: content }) }));
+    return (_jsx(ContextMenu, { target: `#idContainer${id}`, items: items || [], trigger: "left", children: _jsx(StyledContent, { id: `idContainer${id}`, tabIndex: disabled ? -1 : 0, $disabled: disabled, $color: color, $backgroundColor: backgroundColor, $borderRadius: borderRadius, children: content }) }));
 };

package/lib/components/sidebar/TMCommandsPanel.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-export declare const StyledCommandsPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isMobile"> & {
+export declare const StyledCommandsPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $isMobile?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isMobile"> & {
-    $isMobile?: boolean;
-}, never>>> & string;
+}>> & string;
 export interface TMCommandItemProps {
     icon: React.ReactNode;
     selected?: boolean;

package/lib/components/sidebar/TMCommandsPanel.js

@@ -11,7 +11,7 @@ export const StyledCommandsPanel = styled.div `
     padding: 10px;
     gap: 10px;
 `;
-const TMCommandsPanel = ({ isMobile, items }) => (_jsx(StyledCommandsPanel, { "$isMobile": isMobile, children: items.map((iconProps, idx) => (_jsx("span", { style: {
+const TMCommandsPanel = ({ isMobile, items }) => (_jsx(StyledCommandsPanel, { $isMobile: isMobile, children: items.map((iconProps, idx) => (_jsx("span", { style: {
             background: iconProps.selected ? 'white' : 'transparent',
             borderRadius: '6px',
             color: iconProps.selected ? '#005B97' : 'white',

package/lib/components/sidebar/TMHeader.d.ts

@@ -16,6 +16,7 @@ interface ITMHeader {
     searchContext?: TMSearchContext;
     settingsMenuContext?: React.ReactNode;
     customButtons?: React.ReactNode;
+    toppyButton?: React.ReactNode;
     onMenusOpen?: VoidFunction;
     onChangePassword?: VoidFunction;
     onLogout?: VoidFunction;

package/lib/components/sidebar/TMHeader.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef, useMemo } from 'react';
 import six from '../../assets/six.png';
-import { getAvatarColor, IconCloseOutline, IconCopy, openApps, SDKUI_Localizator } from '../../helper';
+import { getAvatarColor, IconCloseOutline, IconCopy, IconOpenInNew, openApps, SDKUI_Localizator, WHATS_NEWS_LINK_URL } from '../../helper';
 import styled, { keyframes } from 'styled-components';
 import { SDK_Globals, AuthenticationModes, AppModules, UserLevels, CultureIDs } from '@topconsultnpm/sdk-ts';
 import { TMColors } from '../../utils/theme';
@@ -10,6 +10,7 @@ import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
 import { TMAboutApp } from './TMAboutApp';
 import ShowAlert from '../base/TMAlert';
 import TMResizableMenu from '../base/TMResizableMenu';
+import TMTooltip from '../base/TMTooltip';
 import it from '../../assets/italy.svg';
 import de from '../../assets/german.svg';
 import fr from '../../assets/france.svg';
@@ -87,9 +88,9 @@ export const copyUserInfoToClipboard = (userName, cultureId, archiveId, archiveD
 };
 export const TMSearchBar = ({ searchValue, onSearchValueChanged, maxWidth, marginLeft }) => {
     const deviceType = useDeviceType();
-    return (_jsxs(StyledSearchBarContainer, { style: { maxWidth: maxWidth ? maxWidth : deviceType === DeviceType.MOBILE ? '65%' : '650px', marginLeft: marginLeft ? marginLeft : deviceType === DeviceType.MOBILE ? '10px' : '20px' }, "$isMobile": deviceType === DeviceType.MOBILE, children: [" ", _jsx(StyledSearchBar, { placeholder: SDKUI_Localizator.Search + '...', type: "text", value: searchValue, onChange: (e) => onSearchValueChanged(e.target.value) }), searchValue.length > 0 && _jsx(IconCloseOutline, { onClick: () => onSearchValueChanged(''), color: '#00000060', style: { cursor: 'pointer', position: 'absolute', width: '20px', height: '20px', right: '5px', top: '5px', zIndex: 1 } })] }));
+    return (_jsxs(StyledSearchBarContainer, { style: { maxWidth: maxWidth ? maxWidth : deviceType === DeviceType.MOBILE ? '65%' : '650px', marginLeft: marginLeft ? marginLeft : deviceType === DeviceType.MOBILE ? '10px' : '20px' }, $isMobile: deviceType === DeviceType.MOBILE, children: [" ", _jsx(StyledSearchBar, { placeholder: SDKUI_Localizator.Search + '...', type: "text", value: searchValue, onChange: (e) => onSearchValueChanged(e.target.value) }), searchValue.length > 0 && _jsx(IconCloseOutline, { onClick: () => onSearchValueChanged(''), color: '#00000060', style: { cursor: 'pointer', position: 'absolute', width: '20px', height: '20px', right: '5px', top: '5px', zIndex: 1 } })] }));
 };
-const TMHeader = ({ customButtons = _jsx(_Fragment, {}), onMenusOpen, showSettingsMenu = true, showSearchBar = true, clearSearchJobValue, clearSearchQEValue, searchContext = TMSearchContext.JOBS, onChangePassword, onLogout, settingsMenuContext, onSeacrhJobsValueChange, onSeacrhJobslistValueChange, onSeacrhProcessMonitorValueChange, onSeacrhProcessValueChange, onSeacrhPlatformValueChange, onSeacrhQEValueChange, onSettingsClick }) => {
+const TMHeader = ({ customButtons = _jsx(_Fragment, {}), toppyButton = _jsx(_Fragment, {}), onMenusOpen, showSettingsMenu = true, showSearchBar = true, clearSearchJobValue, clearSearchQEValue, searchContext = TMSearchContext.JOBS, onChangePassword, onLogout, settingsMenuContext, onSeacrhJobsValueChange, onSeacrhJobslistValueChange, onSeacrhProcessMonitorValueChange, onSeacrhProcessValueChange, onSeacrhPlatformValueChange, onSeacrhQEValueChange, onSettingsClick }) => {
     const [appRoutes, setAppRoutes] = useState();
     const [menuStatus, setMenuStatus] = useState(false);
     const [showAppMenu, setShowAppMenu] = useState(false);
@@ -240,23 +241,23 @@ const TMHeader = ({ customButtons = _jsx(_Fragment, {}), onMenusOpen, showSettin
     const isOfficeConnector = useMemo(() => {
         return SDK_Globals.appModule === AppModules.WORD_CONNECTOR || SDK_Globals.appModule === AppModules.EXCEL_CONNECTOR || SDK_Globals.appModule === AppModules.POWERPOINT_CONNECTOR || SDK_Globals.appModule === AppModules.OUTLOOK_CONNECTOR;
     }, [SDK_Globals.appModule]);
-    return (_jsxs(StyledHeaderContainer, { "$appName": SDK_Globals.appModule, children: [(isAdministrativeLevel && !isOfficeConnector) &&
-                _jsx(TMResizableMenu, { ref: appMenuRef, isVisible: showAppMenu, top: 58, left: 10, resizable: false, maxWidth: 215, minWidth: 215, maxHeight: 180, minHeight: 180, onClose: () => { }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [_jsx("h5", { style: { color: TMColors.primary }, children: "Accessi ad altre applicazioni " }), _jsx("hr", {}), _jsxs("div", { style: { display: 'flex', gap: '10px', alignItems: 'center', width: '100%' }, children: [_jsxs(AppMenuButton, { onClick: () => openAppsHandler(appModuleHandler.app_1, tmSession, appRoutes), "$bgColor": '#482234', children: [_jsx("img", { src: six, alt: appModuleHandler.app_1, width: 30, height: 30 }), " ", appModuleHandler.app_1.toUpperCase()] }), _jsxs(AppMenuButton, { onClick: () => openAppsHandler(appModuleHandler.app_2, tmSession, appRoutes), "$bgColor": '#1d6f42', children: [_jsx("img", { src: six, alt: appModuleHandler.app_2, width: 30, height: 30 }), " ", appModuleHandler.app_2.toUpperCase()] })] })] }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', width: '100%', gap: isMobile ? 5 : 15 }, children: [_jsxs("div", { style: { height: '50px', display: 'flex', alignItems: 'center', gap: 20, justifyContent: 'center' }, children: [_jsx(StyledLogo, { ref: logoRef, style: { cursor: (isAdministrativeLevel && !isOfficeConnector) ? 'pointer' : 'default' }, onMouseEnter: () => {
+    return (_jsxs(StyledHeaderContainer, { $appName: SDK_Globals.appModule, children: [(isAdministrativeLevel && !isOfficeConnector) &&
+                _jsx(TMResizableMenu, { ref: appMenuRef, isVisible: showAppMenu, top: 58, left: 10, resizable: false, maxWidth: 215, minWidth: 215, maxHeight: 180, minHeight: 180, onClose: () => { }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [_jsx("h5", { style: { color: TMColors.primary }, children: "Accessi ad altre applicazioni " }), _jsx("hr", {}), _jsxs("div", { style: { display: 'flex', gap: '10px', alignItems: 'center', width: '100%' }, children: [_jsxs(AppMenuButton, { onClick: () => openAppsHandler(appModuleHandler.app_1, tmSession, appRoutes), $bgColor: '#482234', children: [_jsx("img", { src: six, alt: appModuleHandler.app_1, width: 30, height: 30 }), " ", appModuleHandler.app_1.toUpperCase()] }), _jsxs(AppMenuButton, { onClick: () => openAppsHandler(appModuleHandler.app_2, tmSession, appRoutes), $bgColor: '#1d6f42', children: [_jsx("img", { src: six, alt: appModuleHandler.app_2, width: 30, height: 30 }), " ", appModuleHandler.app_2.toUpperCase()] })] })] }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', width: '100%', gap: isMobile ? 5 : 15 }, children: [_jsxs("div", { style: { height: '50px', display: 'flex', alignItems: 'center', gap: 20, justifyContent: 'center' }, children: [_jsx(StyledLogo, { ref: logoRef, style: { cursor: (isAdministrativeLevel && !isOfficeConnector) ? 'pointer' : 'default' }, onMouseEnter: () => {
                                     if (openMenuTimer.current)
                                         clearTimeout(openMenuTimer.current);
                                     openMenuTimer.current = setTimeout(() => { setShowAppMenu(true); onMenusOpen?.(); }, 200);
                                 }, onMouseLeave: () => {
                                     if (openMenuTimer.current)
                                         clearTimeout(openMenuTimer.current);
-                                }, src: six, height: isMobile ? 35 : 40, alt: "" }), (!isMobile || SDK_Globals.appModule === AppModules.WORD_CONNECTOR) && _jsx(StyledHeaderAppText, { children: headerAppName })] }), showSearchBar && _jsxs(_Fragment, { children: [searchContext === TMSearchContext.JOBS_LIST && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobListValue(e), searchValue: searchJobListValue }), searchContext === TMSearchContext.JOBS && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobsValue(e), searchValue: searchJobsValue }), searchContext === TMSearchContext.PROCESSES && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessesValue(e), searchValue: searchProcessesValue }), searchContext === TMSearchContext.PROCESS_MONITOR && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessMonitorValue(e), searchValue: searchProcessMonitorValue }), searchContext === TMSearchContext.PLATFORM && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchPlatformValue(e), searchValue: searchPlatformValue }), searchContext === TMSearchContext.QE && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchQEValue(e), searchValue: searchQEValue })] }), customButtons] }), showSettingsMenu && _jsxs(StyledHeaderIcon, { onClick: () => onSettingsClick?.(), children: [" ", _jsx(IconHeaderSettings, { fontSize: 24 }), " "] }), _jsx(UserAvatarContainer, { "$isSelected": menuStatus, ref: userIcon, onClick: e => {
+                                }, src: six, height: isMobile ? 35 : 40, alt: "" }), (!isMobile || SDK_Globals.appModule === AppModules.WORD_CONNECTOR) && _jsx(StyledHeaderAppText, { children: headerAppName })] }), showSearchBar && _jsxs(_Fragment, { children: [searchContext === TMSearchContext.JOBS_LIST && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobListValue(e), searchValue: searchJobListValue }), searchContext === TMSearchContext.JOBS && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobsValue(e), searchValue: searchJobsValue }), searchContext === TMSearchContext.PROCESSES && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessesValue(e), searchValue: searchProcessesValue }), searchContext === TMSearchContext.PROCESS_MONITOR && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessMonitorValue(e), searchValue: searchProcessMonitorValue }), searchContext === TMSearchContext.PLATFORM && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchPlatformValue(e), searchValue: searchPlatformValue }), searchContext === TMSearchContext.QE && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchQEValue(e), searchValue: searchQEValue })] }), customButtons] }), toppyButton, showSettingsMenu && _jsxs(StyledHeaderIcon, { onClick: () => onSettingsClick?.(), children: [" ", _jsx(IconHeaderSettings, { fontSize: 24 }), " "] }), _jsx(UserAvatarContainer, { $isSelected: menuStatus, ref: userIcon, onClick: e => {
                     e.stopPropagation();
                     e.preventDefault();
                     setMenuStatus(prev => !prev);
-                }, children: _jsx(UserAvatar, { "$bgColor": avatarColor, children: userInitials }) }), menuStatus &&
-                _jsx(TMResizableMenu, { ref: menuRef, isVisible: menuStatus, top: 60, right: 10, resizable: false, maxWidth: 300, minWidth: 300, maxHeight: 180, minHeight: 180, padding: 0, children: _jsxs(MenuContainer, { children: [_jsxs(UserProfileSection, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, height: 'max-content' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12, height: 'max-content' }, children: [_jsx(AvatarContainer, { children: _jsx(UserAvatarLarge, { "$bgColor": avatarColor, children: userInitials }) }), _jsxs(UserInfo, { children: [_jsxs(UserNameContainer, { children: [_jsx(UserName, { children: userName }), _jsx(CultureFlag, { src: cultureFlag, alt: cultureName, title: cultureName })] }), domain && _jsx(SessionInfo, { style: { padding: 0, margin: 0 }, children: `(${domain})` })] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', gap: 5 }, children: [_jsx(SessionInfo, { children: endpoint }), _jsx(SessionInfo, { children: archiveId + ' (' + archiveDesc + ')' })] })] }), _jsx(CopyIcon, { onClick: (e) => {
-                                            e.stopPropagation();
-                                            copyUserInfoToClipboard(userName, cultureId, archiveId, archiveDesc, endpoint, domain);
-                                        }, title: SDKUI_Localizator.CopyUserInfo, children: _jsx(IconCopy, { fontSize: 12 }) }), _jsx(LogoutButton, { onClick: () => {
+                }, children: _jsx(UserAvatar, { $bgColor: avatarColor, children: userInitials }) }), menuStatus &&
+                _jsx(TMResizableMenu, { ref: menuRef, isVisible: menuStatus, top: 60, right: 10, resizable: false, maxWidth: 300, minWidth: 300, maxHeight: 188, minHeight: 188, padding: 0, children: _jsxs(MenuContainer, { children: [_jsxs(UserProfileSection, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, height: 'max-content', flex: 1, minWidth: 0 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12, height: 'max-content' }, children: [_jsx(AvatarContainer, { children: _jsx(UserAvatarLarge, { $bgColor: avatarColor, children: userInitials }) }), _jsxs(UserInfo, { children: [_jsxs(UserNameContainer, { children: [_jsx(UserName, { children: userName }), _jsx(CultureFlag, { src: cultureFlag, alt: cultureName, title: cultureName })] }), domain && _jsx(SessionInfo, { style: { padding: 0, margin: 0 }, children: `(${domain})` })] })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', gap: 5, flex: 1, minWidth: 0 }, children: [_jsx(SessionInfo, { children: endpoint }), _jsx(SessionInfo, { children: archiveId + ' (' + archiveDesc + ')' })] }), _jsxs(HeaderMenuActions, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.CopyUserInfo, children: _jsx(HeaderMenuActionIcon, { $color: '#605e5c', onClick: (e) => {
+                                                                        e.stopPropagation();
+                                                                        copyUserInfoToClipboard(userName, cultureId, archiveId, archiveDesc, endpoint, domain);
+                                                                    }, children: _jsx(IconCopy, { fontSize: 14 }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.ShowReleaseNotesInfo, children: _jsx(HeaderMenuActionIcon, { as: 'a', $color: TMColors.primary, href: WHATS_NEWS_LINK_URL, target: '_blank', rel: 'noopener noreferrer', onClick: (e) => e.stopPropagation(), children: _jsx(IconOpenInNew, { fontSize: 14 }) }) })] })] })] }), _jsx(LogoutButton, { onClick: () => {
                                             setMenuStatus(false);
                                             onLogout && onLogout();
                                         }, children: _jsx(LogoutText, { children: SDKUI_Localizator.Logout }) })] }), _jsxs(BottomActionsContainer, { children: [isTopMediaAuth && (_jsx(BottomActionButton, { onClick: () => {
@@ -468,8 +469,9 @@ const MenuContainer = styled.div `
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
 `;
 const UserProfileSection = styled.div `
+    position: relative;
     display: flex;
-    padding: 20px;  
+    padding: 16px 20px;  
     background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
     border-bottom: 1px solid #e1e5e9;
     gap: 12px;
@@ -515,7 +517,7 @@ const CultureFlag = styled.img `
 `;
 const LogoutButton = styled.div `
     position: absolute;
-    top: 20px;
+    top: 16px;
     right: 20px;
     cursor: pointer;
     transition: all 0.2s ease;
@@ -546,29 +548,37 @@ const AvatarContainer = styled.div `
     position: relative;
     flex-shrink: 0;
 `;
-const CopyIcon = styled.div `
-    position: absolute;
-    bottom: 50px;
-    right: 15px;
-    width: 20px;
-    height: 20px;
+const HeaderMenuActions = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    flex-shrink: 0;
+`;
+const HeaderMenuActionIcon = styled.div `
+    width: 22px;
+    height: 22px;
     background: white;
-    border: 1px solid #e1e5e9;
+    border: 1px solid ${props => props.$color}55;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    color: #605e5c;
     transition: all 0.2s ease;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    z-index: 10;
-    opacity: 0.6;
+    text-decoration: none;
 
-    &:hover {
-        background: #b7b7b7;
+    /* "&&" alza la specificita': un eventuale "a, a:visited { color: inherit }"
+       dell'app ospite vincerebbe sulla singola classe di styled-components */
+    &&,
+    &&:visited {
+        color: ${props => props.$color};
+    }
+
+    &&:hover {
+        background: ${props => props.$color};
+        border-color: ${props => props.$color};
         color: white;
-        opacity: 1;
     }
 
     &:active {

package/lib/components/sidebar/TMSidebar.js

@@ -22,7 +22,7 @@ const StyledTMSidebarContainer = styled.div `
     z-index: 100;
 `;
 const TMSidebar = ({ items, height, borderRightRadius, left, top, width }) => {
-    return (_jsx(StyledTMSidebarContainer, { "$borderRightRadius": borderRightRadius, "$left": left, "$top": top, "$width": width, "$appName": SDK_Globals.appModule, "$height": height, children: _jsx(ScrollView, { height: "calc(100%)", width: "100%", useNative: true, children: _jsx("div", { style: {
+    return (_jsx(StyledTMSidebarContainer, { $borderRightRadius: borderRightRadius, $left: left, $top: top, $width: width, $appName: SDK_Globals.appModule, $height: height, children: _jsx(ScrollView, { height: "calc(100%)", width: "100%", useNative: true, children: _jsx("div", { style: {
                     display: "flex",
                     flexDirection: "column",
                     alignItems: "center",

package/lib/components/sidebar/TMSidebarItem.js

@@ -37,7 +37,7 @@ const StyledTMSidebarItemContainer = styled.div `
 `;
 const TMSidebarItem = (props) => {
     let app = SDK_Globals.appModule;
-    return (_jsx(TMTooltip, { hideAfterDelay: true, content: props.tooltipContent ?? props.name, children: _jsxs(StyledTMSidebarItemContainer, { "$app": app, "$isApp": props.isAppIcon, onClick: () => props.onClick?.(props), "$isSelected": props.isSelected, children: [_jsxs("div", { children: [_jsx("i", { children: props.icon }), _jsx("p", { children: props.name })] }), props.badgeNumber > 0 && (_jsx("div", { style: {
+    return (_jsx(TMTooltip, { hideAfterDelay: true, content: props.tooltipContent ?? props.name, children: _jsxs(StyledTMSidebarItemContainer, { $app: app, $isApp: props.isAppIcon, onClick: () => props.onClick?.(props), $isSelected: props.isSelected, children: [_jsxs("div", { children: [_jsx("i", { children: props.icon }), _jsx("p", { children: props.name })] }), props.badgeNumber > 0 && (_jsx("div", { style: {
                         position: 'absolute',
                         top: '4px',
                         right: '4px',

package/lib/components/viewers/TMMidViewer.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { IconLocked, IconMetadata_Computed, IconMetadata_DataList, IconMetadata_Date, IconMetadata_DynamicDataList, IconMetadata_Numerator, IconMetadata_Numeric, IconMetadata_Special, IconMetadata_Text, IconMetadata_User, LocalizeMetadataFormats, SDKUI_Localizator, getCompleteMetadataName, getTIDByMID } from '../../helper';
 import { DcmtTypeListCacheService, LayoutModes, MetadataDataDomains, MetadataDataTypes, MetadataFormats, ObjectClasses, SDK_Globals } from '@topconsultnpm/sdk-ts';
@@ -92,8 +92,11 @@ export const TMMetadataIcon = ({ tid, md, color, layoutMode = LayoutModes.Update
                 break;
         }
     }
+    // color='inherit' serve solo all'icona (eredita il colore dell'editor): il tooltip è renderizzato in overlay,
+    // dove 'inherit' non risolverebbe al colore dell'editor, quindi lì manteniamo la palette normale
+    let tooltipColor = color === 'inherit' ? undefined : color;
     return (_jsx(_Fragment, { children: icon
-            ? _jsx(TMMetadataTooltip, { tid: tid, md: md, layoutMode: layoutMode, color: color, children: icon })
+            ? _jsx(TMMetadataTooltip, { tid: tid, md: md, layoutMode: layoutMode, color: tooltipColor, children: icon })
             : null }));
 };
 export const TMMetadataTooltip = ({ tid, md, color, children, layoutMode = LayoutModes.Update }) => {
@@ -107,7 +110,7 @@ export const TMMetadataTooltip = ({ tid, md, color, children, layoutMode = Layou
     let isNumeratorInArk = md?.dataDomain === MetadataDataDomains.Numerator && layoutMode === LayoutModes.Ark;
     const renderTooltipContent = (tid, md) => {
         return (!md ? null
-            : _jsxs(StyledTooltipContainer, { children: [_jsx(StyledTooltipItem, { "$color": color, children: `${SDK_Globals.useLocalizedName ? md.nameLoc : md.name} (TID: ${tid}, MID: ${md.id})` }), md.description && _jsx(StyledTooltipItem, { "$color": color, children: md.description }), _jsx(StyledTooltipSeparatorItem, { color: color }), md.objectClass === ObjectClasses.Permission && _jsx(StyledTooltipItem, { style: { fontWeight: 600 }, children: 'Tipo documento NON autorizzato' }), _jsx(StyledTooltipSeparatorItem, { color: color }), _jsxs(StyledTooltipItem, { "$color": color, children: [md.dataType, " ", md.dataType == MetadataDataTypes.Varchar ? `(${md.length ?? 0})` : md.dataType == MetadataDataTypes.Number ? `(${md.length ?? 0},${md.scale ?? 0})` : '', md.isPrimaryKey === 1 ? ' (PK)' : ''] }), _jsx(StyledTooltipItem, { style: { color: md.isRequired === 1 && !isNumeratorInArk ? TMColors.error : color }, children: md.isRequired === 1 && !isNumeratorInArk ? SDKUI_Localizator.Required : SDKUI_Localizator.RequiredNOT }), md.dataDomain && _jsx(StyledTooltipItem, { "$color": color, children: md.dataDomain }), md.isLexProt == 1 && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.Yes}` }), md.isLexProt == 2 && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.MetadataFlag}` }), md.isLexProt == 3 && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.Yes} (${SDKUI_Localizator.MetadataFlag})` }), md.isFreeSearchInput && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Search_Free}: ${SDKUI_Localizator.Yes}` }), md.isSpecialSearchOutput && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Search_Special}: ${SDKUI_Localizator.Yes}` }), md.format?.format && md.format.format != MetadataFormats.None && _jsx(StyledTooltipItem, { color: color, children: `${SDKUI_Localizator.Format}: ${LocalizeMetadataFormats(md.format.format)}` }), md.defaultValue && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Default}: ${_setDefaultValueForUI(md.defaultValue)}` }), md.fromTID && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.MetadataRoot}: ${md.isRootMID == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No}` }), md.templateMID && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Template}: ${md.templateMID}` }), md.perm && _jsxs(_Fragment, { children: [_jsx(StyledTooltipItem, { "$color": 'primary', "$marginTop": '5px', children: SDKUI_Localizator.Perms }), _jsx(StyledTooltipSeparatorItem, { color: color }), _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Archive}: ${md.perm.canArchive ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.View_Metadato}: ${md.perm.canView ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Search}: ${md.perm.canSearch ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Update}: ${md.perm.canUpdate ?? SDKUI_Localizator.No}` })] })] }));
+            : _jsxs(StyledTooltipContainer, { children: [_jsx(StyledTooltipItem, { $color: color, children: `${SDK_Globals.useLocalizedName ? md.nameLoc : md.name} (TID: ${tid}, MID: ${md.id})` }), md.description && _jsx(StyledTooltipItem, { $color: color, children: md.description }), _jsx(StyledTooltipSeparatorItem, { color: color }), md.objectClass === ObjectClasses.Permission && _jsx(StyledTooltipItem, { style: { fontWeight: 600 }, children: 'Tipo documento NON autorizzato' }), _jsx(StyledTooltipSeparatorItem, { color: color }), _jsxs(StyledTooltipItem, { $color: color, children: [md.dataType, " ", md.dataType == MetadataDataTypes.Varchar ? `(${md.length ?? 0})` : md.dataType == MetadataDataTypes.Number ? `(${md.length ?? 0},${md.scale ?? 0})` : '', md.isPrimaryKey === 1 ? ' (PK)' : ''] }), _jsx(StyledTooltipItem, { style: { color: md.isRequired === 1 && !isNumeratorInArk ? TMColors.error : color }, children: md.isRequired === 1 && !isNumeratorInArk ? SDKUI_Localizator.Required : SDKUI_Localizator.RequiredNOT }), md.dataDomain && _jsx(StyledTooltipItem, { $color: color, children: md.dataDomain }), md.isLexProt == 1 && _jsx(StyledTooltipItem, { $color: color, children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.Yes}` }), md.isLexProt == 2 && _jsx(StyledTooltipItem, { $color: color, children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.MetadataFlag}` }), md.isLexProt == 3 && _jsx(StyledTooltipItem, { $color: color, children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.Yes} (${SDKUI_Localizator.MetadataFlag})` }), md.isFreeSearchInput && _jsx(StyledTooltipItem, { $color: color, children: `${SDKUI_Localizator.Search_Free}: ${SDKUI_Localizator.Yes}` }), md.isSpecialSearchOutput && _jsx(StyledTooltipItem, { $color: color, children: `${SDKUI_Localizator.Search_Special}: ${SDKUI_Localizator.Yes}` }), md.format?.format && md.format.format != MetadataFormats.None && _jsx(StyledTooltipItem, { color: color, children: `${SDKUI_Localizator.Format}: ${LocalizeMetadataFormats(md.format.format)}` }), md.format?.format === MetadataFormats.CustomRegEx && md.format.formatCustom && _jsx(StyledTooltipItem, { $color: color, children: `${SDKUI_Localizator.PatternRegex}: ${md.format.formatCustom}` }), md.defaultValue && _jsx(StyledTooltipItem, { $color: color, children: `${SDKUI_Localizator.Default}: ${_setDefaultValueForUI(md.defaultValue)}` }), md.fromTID && _jsx(StyledTooltipItem, { $color: color, children: `${SDKUI_Localizator.MetadataRoot}: ${md.isRootMID == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No}` }), md.templateMID && _jsx(StyledTooltipItem, { $color: color, children: `${SDKUI_Localizator.Template}: ${md.templateMID}` }), md.perm && _jsxs(_Fragment, { children: [_jsx(StyledTooltipItem, { $color: 'primary', $marginTop: '5px', children: SDKUI_Localizator.Perms }), _jsx(StyledTooltipSeparatorItem, { color: color }), _jsx(StyledTooltipItem, { $color: color, children: `${SDKUI_Localizator.Archive}: ${md.perm.canArchive ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { $color: color, children: `${SDKUI_Localizator.View_Metadato}: ${md.perm.canView ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { $color: color, children: `${SDKUI_Localizator.Search}: ${md.perm.canSearch ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { $color: color, children: `${SDKUI_Localizator.Update}: ${md.perm.canUpdate ?? SDKUI_Localizator.No}` })] })] }));
     };
     return (_jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMTooltip, { content: renderTooltipContent(tid, md), children: children }) }));
 };

package/lib/components/viewers/TMTidViewer.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { getDTDDisplayNameInfo, IconDcmtType, IconDcmtTypeOnlyMetadata, IconLocked, IconView, isCreateCertificateEnabled, isPdfEditorEnabled, isSign4TopEnabled, LocalizeArchiveConstraints, LocalizeParametricFilterTypes, SDKUI_Localizator, TMImageLibrary } from '../../helper';
+import { getDTDDisplayNameInfo, IconDcmtType, IconDcmtTypeOnlyMetadata, IconLocked, IconView, isCreateCertificateEnabled, isPdfEditorEnabled, isSign4TopEnabled, LocalizeArchiveConstraints, isNotGrantedDTD, LocalizeParametricFilterTypes, SDKUI_Localizator, TMImageLibrary } from '../../helper';
 import { AccessLevels, AccessLevelsEx, ArchiveConstraints, DcmtTypeListCacheService, OwnershipLevels, ParametricFilterTypes, SDK_Globals, SDK_Localizator, TemplateTIDs } from '@topconsultnpm/sdk-ts';
 import TMSpinner from '../base/TMSpinner';
 import { StyledDivHorizontal, StyledTooltipContainer, StyledTooltipItem, StyledTooltipSeparatorItem } from '../base/Styled';
 import TMTooltip from '../base/TMTooltip';
 import { TMColors } from '../../utils/theme';
+import styled, { keyframes } from 'styled-components';
 export var ImageIDList;
 (function (ImageIDList) {
     ImageIDList["arrow_001"] = "arrow_001";
@@ -242,7 +243,7 @@ export const TMDcmtTypeIcon = ({ dtd }) => {
     if (!dtd)
         return null;
     let icon = null;
-    if (dtd.customData2 === "NOTGRANTED")
+    if (isNotGrantedDTD(dtd))
         icon = _jsx(IconLocked, { fontSize: 16 });
     else if (dtd.imageID && dtd.imageID.length > 0)
         icon = _jsx(TMImageLibrary, { imageID: dtd.imageID });
@@ -259,33 +260,77 @@ export const TMDcmtTypeIcon = ({ dtd }) => {
     return (_jsx(TMDcmtTypeTooltip, { dtd: dtd, children: icon }));
 };
 export const TMDcmtTypeTooltip = ({ dtd, children }) => {
-    return (_jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMTooltip, { content: renderDTDTooltipContent(dtd), children: children }) }));
+    return (_jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMTooltip, { allowContentInteraction: true, content: renderDTDTooltipContent(dtd), children: children }) }));
 };
+/** Legge il tipo documento dalle cache dell'SDK senza passare dal mutex. Serve perché
+ *  l'espansione di una cartella nell'albero ricrea tutte le celle: senza una lettura sincrona
+ *  ogni riga tornerebbe a mostrare il testo di "nessuna selezione" fino alla fine delle
+ *  richieste (una per TID, serializzate dal mutex).
+ *  GetCache restituisce le mappe vive usate dall'SDK, quindi le invalidazioni
+ *  (RemoveAllWithMetadata, RemoveAllWithoutMetadata, logout) hanno effetto immediato. */
+const getCachedDTD = (tid, tmSession) => {
+    if (!tid || tid <= 0)
+        return undefined;
+    const accessToken = (tmSession ?? SDK_Globals.tmSession)?.SessionDescr?.accessToken;
+    if (!accessToken)
+        return undefined;
+    // La cache senza metadati è popolata dalla login: copre già i tipi documento autorizzati
+    return DcmtTypeListCacheService.GetCache(false).get(accessToken)?.find(o => o.id === tid)
+        ?? DcmtTypeListCacheService.GetCache(true).get(accessToken)?.find(o => o.id === tid);
+};
+const shimmer = keyframes `
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+`;
+/** Segnaposto animato mostrato al posto del nome durante il caricamento.
+ *  Grigio semitrasparente: leggibile sia su sfondo chiaro che scuro. */
+const StyledTidSkeleton = styled.span `
+    display: inline-block;
+    flex: 0 0 auto;
+    width: 90px;
+    height: 0.9em;
+    border-radius: 4px;
+    background-image: linear-gradient(90deg, rgba(127, 127, 127, 0.12) 25%, rgba(127, 127, 127, 0.28) 50%, rgba(127, 127, 127, 0.12) 75%);
+    background-size: 200% 100%;
+    animation: ${shimmer} 1.4s ease-in-out infinite;
+
+    @media (prefers-reduced-motion: reduce) { animation: none; }
+`;
 const TMTidViewer = ({ tmSession, tid, did, showIcon = false, color, showId = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
-    const [dtd, setDtd] = useState();
+    const accessToken = (tmSession ?? SDK_Globals.tmSession)?.SessionDescr?.accessToken;
+    const [dtd, setDtd] = useState(() => getCachedDTD(tid, tmSession));
+    const [isLoading, setIsLoading] = useState(() => !!tid && tid > 0 && !getCachedDTD(tid, tmSession));
     const fetchData = async (tid, did) => {
         if (!tid || tid <= 0) {
             setDtd(undefined);
+            setIsLoading(false);
             return;
         }
+        const cached = getCachedDTD(tid, tmSession);
+        if (cached)
+            setDtd(cached);
+        setIsLoading(!cached);
         let count = DcmtTypeListCacheService.CacheCount(true, 'all', tmSession);
         if (count <= 0)
             TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.ListDcmtTypeOrView} ...` });
         try {
-            let resultDTD = await DcmtTypeListCacheService.GetAsync(tid);
+            let resultDTD = await DcmtTypeListCacheService.GetAsync(tid, true, tmSession);
             if (!resultDTD) {
-                resultDTD = await DcmtTypeListCacheService.GetWithNotGrantedAsync(tid, did);
+                resultDTD = await DcmtTypeListCacheService.GetWithNotGrantedAsync(tid, did, undefined, true, tmSession);
             }
             setDtd(resultDTD);
         }
         finally {
             if (count <= 0)
                 TMSpinner.hide();
+            setIsLoading(false);
         }
     };
+    // accessToken e non tmSession: la sessione è un oggetto e un'identità nuova a ogni render
+    // del chiamante rifarebbe la richiesta senza motivo
     useEffect(() => {
         fetchData(tid, did);
-    }, [tid, did]);
+    }, [tid, did, accessToken]);
     const displayName = () => {
         if (!dtd)
             return noneSelectionText;
@@ -295,31 +340,47 @@ const TMTidViewer = ({ tmSession, tid, did, showIcon = false, color, showId = fa
             whiteSpace: 'nowrap',
             overflow: 'hidden',
             textOverflow: 'ellipsis'
-        }, children: [showIcon && dtd && _jsx(TMDcmtTypeIcon, { dtd: dtd }), _jsx("p", { title: displayName(), style: {
-                    textAlign: 'left',
-                    marginLeft: showIcon ? '5px' : '',
-                    color: color ?? (dtd?.isView ? 'red' : TMColors.primary),
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    // paddingRight: '10px'
-                }, children: displayName() }), showId && _jsx("p", { style: { padding: '0px 3px' }, children: `(TID: ${tid})` })] }));
+        }, children: [showIcon && dtd && _jsx(TMDcmtTypeIcon, { dtd: dtd }), isLoading && !dtd
+                ? _jsx(StyledTidSkeleton, { title: `${SDKUI_Localizator.Loading} ...`, style: { marginLeft: showIcon ? '5px' : undefined } })
+                : _jsx("p", { title: displayName(), style: {
+                        textAlign: 'left',
+                        margin: 0,
+                        marginLeft: showIcon ? '5px' : '',
+                        color: dtd?.isView ? 'red' : (color ?? TMColors.primary),
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        // paddingRight: '10px'
+                    }, children: displayName() }), showId && _jsx("p", { style: { padding: '0px 3px', margin: 0 }, children: `(TID: ${tid})` })] }));
 };
 export default TMTidViewer;
 export const cellRenderTID = (data, noneSelectionText) => {
     return (_jsx(TMTidViewer, { tid: data.value, noneSelectionText: noneSelectionText }));
 };
-/** Componente per mostrare il metodo di visualizzazione del nome documento (carica i metadati dalla cache se necessario) */
+/** Metodi di visualizzazione già richiesti, per non ricaricare i metadati ad ogni riapertura del tooltip */
+const displayNameMethodCache = new Map();
 const TMDisplayNameMethodItem = ({ dtd }) => {
-    const [displayNameMethod, setDisplayNameMethod] = useState('...');
-    useEffect(() => {
-        const fetchDisplayNameMethod = async () => {
+    const [displayNameMethod, setDisplayNameMethod] = useState(() => dtd.id ? displayNameMethodCache.get(dtd.id) : undefined);
+    const [isLoading, setIsLoading] = useState(false);
+    const onShowClick = async (e) => {
+        /* Un click qualsiasi chiude il tooltip: senza questo il risultato non sarebbe mai visibile */
+        e.stopPropagation();
+        if (isLoading || displayNameMethod)
+            return;
+        setIsLoading(true);
+        try {
             const method = await getDTDDisplayNameInfo(dtd);
+            if (dtd.id)
+                displayNameMethodCache.set(dtd.id, method);
             setDisplayNameMethod(method);
-        };
-        fetchDisplayNameMethod();
-    }, [dtd]);
-    return _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.DisplayNameMethod}: ${displayNameMethod}` });
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return (_jsxs(StyledTooltipItem, { children: [`${SDKUI_Localizator.DisplayNameMethod}: `, displayNameMethod ?? (isLoading
+                ? `${SDKUI_Localizator.Loading} ...`
+                : _jsx("span", { style: { color: TMColors.primary, cursor: 'pointer', textDecoration: 'underline' }, onClick: onShowClick, children: SDKUI_Localizator.Details }))] }));
 };
 export const renderDTDTooltipContent = (dtd) => {
     const mapAccessLevelToLocalizedString = (level) => {
@@ -341,13 +402,13 @@ export const renderDTDTooltipContent = (dtd) => {
         }
     };
     return (!dtd ? null
-        : _jsxs(StyledTooltipContainer, { children: [_jsx(StyledTooltipItem, { children: `${SDK_Globals.useLocalizedName ? dtd.nameLoc : dtd.name} (${dtd.isView ? 'VID' : 'TID'}: ${dtd.id}, RootTID: ${dtd.rootTID ?? 0})` }), dtd.description && _jsx(StyledTooltipItem, { children: dtd.description }), _jsx(StyledTooltipSeparatorItem, {}), dtd.customData2 === "NOTGRANTED"
+        : _jsxs(StyledTooltipContainer, { children: [_jsx(StyledTooltipItem, { children: `${SDK_Globals.useLocalizedName ? dtd.nameLoc : dtd.name} (${dtd.isView ? 'VID' : 'TID'}: ${dtd.id}, RootTID: ${dtd.rootTID ?? 0})` }), dtd.description && _jsx(StyledTooltipItem, { children: dtd.description }), _jsx(StyledTooltipSeparatorItem, {}), isNotGrantedDTD(dtd)
                     ? _jsx(StyledTooltipItem, { style: { fontWeight: 600 }, children: 'Tipo documento NON autorizzato' })
                     :
                         _jsxs(_Fragment, { children: [_jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.ArchiveConstraint}: ${LocalizeArchiveConstraints(dtd.archiveConstraint)}` }), dtd.isView && dtd.parametricFilterType != ParametricFilterTypes.None && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.ParametricFilter}: ${LocalizeParametricFilterTypes(dtd.parametricFilterType)}` }), dtd.isView && dtd.withCheckOption && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.ViewWithCheckOption}: ${SDKUI_Localizator.Yes}` }), dtd.isLexProt && dtd.isLexProt > 0 && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.Yes}` }), dtd.isFreeSearchable && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Search_Free}: ${SDKUI_Localizator.Yes}` }), dtd.templateTID && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Template}: ${dtd.templateTID}` }), dtd.traceTID && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Tracing}: ${SDKUI_Localizator.Yes} - ${dtd.templateTID == TemplateTIDs.Trace_DcmtType ? SDKUI_Localizator.Destination : SDKUI_Localizator.Source} ${dtd.traceTID < 0 ? SDKUI_Localizator.Disabled : ''}` }), dtd.wfAppr && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.WorkflowApproval}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.BlogCase}: ${dtd.hasBlog ? SDKUI_Localizator.Yes : SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.CheckIn}: ${dtd.cico ? SDKUI_Localizator.Yes : SDKUI_Localizator.No}` }), dtd.perm ?
-                                    _jsxs(_Fragment, { children: [_jsx(StyledTooltipItem, { "$color": 'primary', "$marginTop": '5px', children: SDKUI_Localizator.Perms }), _jsx(StyledTooltipSeparatorItem, {}), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Archive}: ${mapAccessLevelToLocalizedString(dtd.perm.canArchive)}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.View_Metadato}: ${mapAccessLevelToLocalizedString(dtd.perm.canView)}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Search}: ${mapAccessLevelToLocalizedString(dtd.perm.canSearch)}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Update}: ${mapAccessLevelToLocalizedString(dtd.perm.canUpdate)}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.RetrieveFile}: ${mapAccessLevelToLocalizedString(dtd.perm.canRetrieveFile)}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.AddOrSubstFile}: ${mapAccessLevelToLocalizedString(dtd.perm.canSubstFile)}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.LogDelete}: ${mapAccessLevelToLocalizedString(dtd.perm.canLogicalDelete)}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.PhysDelete}: ${mapAccessLevelToLocalizedString(dtd.perm.canPhysicalDelete)}` }), dtd.hasBlog && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Blog_Read}: ${mapAccessLevelToLocalizedString(dtd.perm.canReadBlog)}` }), dtd.hasBlog && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Blog_Write}: ${mapAccessLevelToLocalizedString(dtd.perm.canWriteBlog)}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.CheckIn}: ${mapAccessLevelToLocalizedString(dtd.perm.canCICO)}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.ChronologyDelete}: ${mapAccessLevelToLocalizedString(dtd.perm.canDelChron)}` })] })
+                                    _jsxs(_Fragment, { children: [_jsx(StyledTooltipItem, { $color: 'primary', $marginTop: '5px', children: SDKUI_Localizator.Perms }), _jsx(StyledTooltipSeparatorItem, {}), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Archive}: ${mapAccessLevelToLocalizedString(dtd.perm.canArchive)}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.View_Metadato}: ${mapAccessLevelToLocalizedString(dtd.perm.canView)}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Search}: ${mapAccessLevelToLocalizedString(dtd.perm.canSearch)}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Update}: ${mapAccessLevelToLocalizedString(dtd.perm.canUpdate)}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.RetrieveFile}: ${mapAccessLevelToLocalizedString(dtd.perm.canRetrieveFile)}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.AddOrSubstFile}: ${mapAccessLevelToLocalizedString(dtd.perm.canSubstFile)}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.LogDelete}: ${mapAccessLevelToLocalizedString(dtd.perm.canLogicalDelete)}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.PhysDelete}: ${mapAccessLevelToLocalizedString(dtd.perm.canPhysicalDelete)}` }), dtd.hasBlog && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Blog_Read}: ${mapAccessLevelToLocalizedString(dtd.perm.canReadBlog)}` }), dtd.hasBlog && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Blog_Write}: ${mapAccessLevelToLocalizedString(dtd.perm.canWriteBlog)}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.CheckIn}: ${mapAccessLevelToLocalizedString(dtd.perm.canCICO)}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.ChronologyDelete}: ${mapAccessLevelToLocalizedString(dtd.perm.canDelChron)}` })] })
                                     : dtd.ownershipLevel == OwnershipLevels.DirectOwner || dtd.ownershipLevel == OwnershipLevels.IndirectOwner ?
-                                        _jsxs(_Fragment, { children: [_jsx(StyledTooltipItem, { "$color": 'primary', "$marginTop": '5px', children: SDKUI_Localizator.Perms }), _jsx(StyledTooltipSeparatorItem, {}), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Archive}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.View_Metadato}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Search}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Update}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.RetrieveFile}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.AddOrSubstFile}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.LogDelete}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.PhysDelete}: ${SDKUI_Localizator.Yes}` }), dtd.hasBlog && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Blog_Read}: ${SDKUI_Localizator.Yes}` }), dtd.hasBlog && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Blog_Write}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.CheckIn}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.ChronologyDelete}: ${SDKUI_Localizator.Yes}` })] })
+                                        _jsxs(_Fragment, { children: [_jsx(StyledTooltipItem, { $color: 'primary', $marginTop: '5px', children: SDKUI_Localizator.Perms }), _jsx(StyledTooltipSeparatorItem, {}), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Archive}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.View_Metadato}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Search}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Update}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.RetrieveFile}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.AddOrSubstFile}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.LogDelete}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.PhysDelete}: ${SDKUI_Localizator.Yes}` }), dtd.hasBlog && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Blog_Read}: ${SDKUI_Localizator.Yes}` }), dtd.hasBlog && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Blog_Write}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.CheckIn}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.ChronologyDelete}: ${SDKUI_Localizator.Yes}` })] })
                                         : _jsx(_Fragment, {}), (dtd.widgets && dtd.widgets.length > 0) ? (() => {
                                     const enabledWidgets = [
                                         isSign4TopEnabled(dtd.widgets) ? 'Sign4Top' : null,

package/lib/components/wizard/TMStepIndicator.js

@@ -141,7 +141,7 @@ const StepIndicator = ({ steps, currentStepIndex, stepValidityStatuses }) => {
         : 0;
     const errors = stepValidityStatuses[currentStepIndex].filter(v => v.ResultType === ResultTypes.ERROR);
     const isCurrentStepError = errors.length > 0;
-    return (_jsxs(IndicatorContainer, { children: [_jsxs(StepBar, { children: [steps.length > 1 && (_jsxs(LineContainer, { "$numSteps": steps.length, children: [_jsx(BaseLine, {}), _jsx(ProgressLine, { "$widthPercentage": progressPercentage })] })), steps.map((step, index) => {
+    return (_jsxs(IndicatorContainer, { children: [_jsxs(StepBar, { children: [steps.length > 1 && (_jsxs(LineContainer, { $numSteps: steps.length, children: [_jsx(BaseLine, {}), _jsx(ProgressLine, { $widthPercentage: progressPercentage })] })), steps.map((step, index) => {
                         const isCompleted = index < currentStepIndex;
                         const isCurrent = index === currentStepIndex;
                         // CORREZIONE: Controlla se l'array di ValidationItem per lo step contiene almeno un errore
@@ -159,7 +159,7 @@ const StepIndicator = ({ steps, currentStepIndex, stepValidityStatuses }) => {
                         else {
                             content = index + 1;
                         }
-                        return (_jsx(StepItem, { children: _jsx(StepRhombusContainer, { "$isCompleted": isCompleted, "$isCurrent": isCurrent, "$isError": displayError, children: _jsx(StepContent, { "$isCompleted": isCompleted, "$isCurrent": isCurrent, "$isError": displayError, children: content }) }) }, index));
-                    })] }), _jsxs(StepTitle, { "$isError": isCurrentStepError, children: [steps[currentStepIndex]?.title, isCurrentStepError && (_jsx(IconWarning, { className: "error-icon" }))] })] }));
+                        return (_jsx(StepItem, { children: _jsx(StepRhombusContainer, { $isCompleted: isCompleted, $isCurrent: isCurrent, $isError: displayError, children: _jsx(StepContent, { $isCompleted: isCompleted, $isCurrent: isCurrent, $isError: displayError, children: content }) }) }, index));
+                    })] }), _jsxs(StepTitle, { $isError: isCurrentStepError, children: [steps[currentStepIndex]?.title, isCurrentStepError && (_jsx(IconWarning, { className: "error-icon" }))] })] }));
 };
 export default StepIndicator;