@topconsultnpm/sdkui-react 6.20.0-dev1.99 → 6.20.0-dev2.1

package/lib/components/features/tasks/TMTasksUtils.js

@@ -297,7 +297,20 @@ newTasks // Array of new tasks to merge
     return Array.from(taskMap.values());
 };
 export const getOriginLabel = (pdg, ID1Name) => {
-    return pdg ? (ID1Name ?? '') : SDKUI_Localizator.NoSource;
+    let label = ID1Name ?? SDKUI_Localizator.NoSource;
+    try {
+        if (typeof label === 'string' && label.length > 0) {
+            // Rimuove: (TID: 123), (DID: 456), TID: 123, DID: 456
+            label = label.replace(/\s*\(\s*\b(?:TID|DID):\s*\d+\s*\)|\s*\b(?:TID|DID):\s*\d+/gi, '');
+            // Rimuove eventuali spazi multipli rimasti
+            label = label.replace(/\s{2,}/g, ' ').trim();
+        }
+    }
+    catch {
+        label = ID1Name ?? SDKUI_Localizator.NoSource;
+    }
+    // Se pdg esiste ritorna la label (anche se vuota), altrimenti ritorna sempre NoSource
+    return pdg ? label : SDKUI_Localizator.NoSource;
 };
 export const taskValidatorAsync = async (taskDescriptor) => {
     let vil = [];

package/lib/components/features/workflow/TMWorkflowPopup.js

@@ -263,7 +263,7 @@ export const WorkflowEndInstanceModal = ({ selectedInstances, onClose, onComplet
             ShowAlert({
                 mode: 'success',
                 position: 'TOP_RIGHT',
-                title: 'Terminazione istanze',
+                title: SDKUI_Localizator.WorkflowEndInstance,
                 message: `${selectedInstances.length} ${selectedInstances.length === 1 ? 'istanza terminata' : 'istanze terminate'} con successo`,
                 duration: 3000
             });
@@ -277,9 +277,10 @@ export const WorkflowEndInstanceModal = ({ selectedInstances, onClose, onComplet
             TMSpinner.hide();
         }
     };
-    const itemCount = selectedInstances.length > 0 ? `(${selectedInstances.length} ${selectedInstances.length === 1 ? 'istanza' : 'istanze'})` : '';
-    const title = `Termina istanza ${itemCount}`;
-    return (_jsx(TMModal, { title: title, onClose: onClose, width: '600px', height: '270px', isModal: true, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: "Motivazione (obbligatorio):" }), _jsx(StyledTextArea, { "$isValid": !disable, value: commentValue, onChange: (e) => setCommentValue(e.target.value), placeholder: "Inserisci il motivo della terminazione...", maxLength: 200 }), _jsxs(CharacterCounter, { children: [commentValue.length, "/200"] })] }), _jsx(StyledModalFooter, { children: _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconStop, {}), caption: "Termina istanza", width: '150px', disabled: disable, onClick: () => !disable && endInstancesAsync(), advancedColor: TMColors.error }) })] }) }));
+    const title = selectedInstances.length === 1
+        ? `${SDKUI_Localizator.WorkflowEndInstance} (DID: ${selectedInstances[0].did})`
+        : `${SDKUI_Localizator.WorkflowEndInstance} (${selectedInstances.length} istanze)`;
+    return (_jsx(TMModal, { title: title, onClose: onClose, width: '600px', height: '270px', isModal: true, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: "Motivazione (obbligatorio):" }), _jsx(StyledTextArea, { "$isValid": !disable, value: commentValue, onChange: (e) => setCommentValue(e.target.value), placeholder: "Inserisci il motivo della terminazione...", maxLength: 200 }), _jsxs(CharacterCounter, { children: [commentValue.length, "/200"] })] }), _jsx(StyledModalFooter, { children: _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconStop, {}), caption: SDKUI_Localizator.WorkflowEndInstance, width: '150px', disabled: disable, onClick: () => !disable && endInstancesAsync(), advancedColor: TMColors.error }) })] }) }));
 };
 export const WorkFlowMoreInfoPopUp = ({ DID = 0, TID = 0, deviceType = DeviceType.DESKTOP, onClose, onCompleted }) => {
     const [users, setUsers] = useState([]);

package/lib/components/features/workflow/diagram/DiagramItemComponent.js

@@ -70,6 +70,8 @@ const StyledDiagramItem = styled.g `
     fill: #333;
     text-anchor: middle;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     pointer-events: none;
   }
 `;

package/lib/components/features/workflow/diagram/DiagramItemForm.js

@@ -409,7 +409,7 @@ const DiagramItemForm = ({ itemToEdit, wf, onClose, onApply }) => {
             return qd;
         };
         const qdForRecipientsEditor = localItem.QD ?? newQD();
-        return (_jsxs(_Fragment, { children: [_jsx(TMLocalizedTextBox, { label: SDKUI_Localizator.Description, value: localItem.Description, value_IT: localItem.Description_IT, value_EN: localItem.Description_EN, value_FR: localItem.Description_FR, value_PT: localItem.Description_PT, value_ES: localItem.Description_ES, value_DE: localItem.Description_DE, isModifiedWhen: localItem.Description !== localItemOrig.Description, validationItems: validationItems.filter(v => v.PropertyName === DiagramItemProps.Description), onValueChanged: handleLocalizedDescriptionChange }), _jsx(TMTextBox, { label: "SetID", value: localItem.ID ?? '', readOnly: true }), _jsx(WorkitemRecipientsEditor, { tos: localItem.Tos ?? '', mTID: wf?.MTID, qd: qdForRecipientsEditor, onTosChange: handleTosChange, onQDChange: handleSetRuleQDChange }), _jsx(TMVilViewer, { vil: validationItems.filter(v => v.PropertyName === DiagramItemProps.Tos) }), _jsxs(FlexContainer, { children: [_jsx(TMDropDown, { label: SDKUI_Localizator.WorkflowRecipientSetRule, elementStyle: { width: '320px' }, dataSource: SET_RULE_DATASOURCE, value: localItem.SetRule, isModifiedWhen: localItem.SetRule !== localItemOrig.SetRule, onValueChanged: (e) => { handleSetRuleChange(e.target.value); } }), _jsx(TMCheckBox, { value: localItem.AllowZeroTos ?? 0, label: SDKUI_Localizator.WorkflowAllowZeroTos, isModifiedWhen: localItem.AllowZeroTos !== localItemOrig.AllowZeroTos, onValueChanged: handleAllowZeroTosChange })] }), localItem.Type === DiagramItemTypes.ExecTask &&
+        return (_jsxs(_Fragment, { children: [_jsx(TMLocalizedTextBox, { label: SDKUI_Localizator.Description, value: localItem.Description, value_IT: localItem.Description_IT, value_EN: localItem.Description_EN, value_FR: localItem.Description_FR, value_PT: localItem.Description_PT, value_ES: localItem.Description_ES, value_DE: localItem.Description_DE, tid: wf?.MTID, isModifiedWhen: localItem.Description !== localItemOrig.Description, validationItems: validationItems.filter(v => v.PropertyName === DiagramItemProps.Description), onValueChanged: handleLocalizedDescriptionChange }), _jsx(TMTextBox, { label: "SetID", value: localItem.ID ?? '', readOnly: true }), _jsx(WorkitemRecipientsEditor, { tos: localItem.Tos ?? '', mTID: wf?.MTID, qd: qdForRecipientsEditor, onTosChange: handleTosChange, onQDChange: handleSetRuleQDChange }), _jsx(TMVilViewer, { vil: validationItems.filter(v => v.PropertyName === DiagramItemProps.Tos) }), _jsxs(FlexContainer, { children: [_jsx(TMDropDown, { label: SDKUI_Localizator.WorkflowRecipientSetRule, elementStyle: { width: '320px' }, dataSource: SET_RULE_DATASOURCE, value: localItem.SetRule, isModifiedWhen: localItem.SetRule !== localItemOrig.SetRule, onValueChanged: (e) => { handleSetRuleChange(e.target.value); } }), _jsx(TMCheckBox, { value: localItem.AllowZeroTos ?? 0, label: SDKUI_Localizator.WorkflowAllowZeroTos, isModifiedWhen: localItem.AllowZeroTos !== localItemOrig.AllowZeroTos, onValueChanged: handleAllowZeroTosChange })] }), localItem.Type === DiagramItemTypes.ExecTask &&
                     _jsxs(BoxContainer, { children: [_jsx(HeaderContainer, { children: _jsx("span", { children: SDKUI_Localizator.Application }) }), renderAppFields()] })] }));
     };
     // Function to render UpdateDcmt-specific fields

package/lib/components/features/workflow/diagram/WFDiagram.js

@@ -1822,7 +1822,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
     }, [isFullScreen]);
     const diagramContent = (_jsxs(CanvasContainer, { onDoubleClick: handleCanvasDoubleClick, children: [_jsx("input", { ref: fileInputRef, type: "file", accept: ".xml" // Filtra per file XML
                 , onChange: handleFileChange, style: { display: 'none' } }), SDK_Globals.tmSession?.SessionDescr?.appModuleID === AppModules.SURFER ?
-                _jsx(TMFloatingMenuBar, { containerRef: diagramRef, defaultPosition: { x: 45, y: 85 }, disbaleConfigMode: true, defaultItems: [
+                _jsx(TMFloatingMenuBar, { containerRef: diagramRef, defaultPosition: { x: 45, y: 85 }, enableConfigMode: false, fixedItems: [
                         { icon: _jsx(IconZoomIn, {}), name: SDKUI_Localizator.ZoomIn, disabled: isAutoZoomEnabled, onClick: () => { handleZoomIn(); }, id: 'zoom-in', isPinned: true },
                         { icon: _jsx(IconZoomOut, {}), name: SDKUI_Localizator.ZoomOut, disabled: isAutoZoomEnabled, onClick: () => { handleZoomOut(); }, id: 'zoom-out', isPinned: true },
                         { icon: _jsx(IconZoomAuto, {}), name: 'AutoZoom', onClick: () => { handleToggleAutoZoom(); }, id: 'zoom-auto', isPinned: true, isToggle: isAutoZoomEnabled },

package/lib/components/forms/Login/TMLoginForm.js

@@ -264,7 +264,7 @@ const TMLoginForm = (props) => {
             { value: AuthenticationModes.TopMediaWithMFA, display: LOGINLocalizator.TopMediaWithMFA },
             { value: AuthenticationModes.TopMediaOnBehalfOf, display: SDKUI_Localizator.AuthMode_OnBehalfOf },
             { value: AuthenticationModes.WindowsThroughTopMedia, display: SDKUI_Localizator.AuthMode_WindowsViaTopMedia },
-            { value: AuthenticationModes.MSAzure, display: 'MSAzure' }];
+            { value: AuthenticationModes.MSAzure, display: 'Microsoft Entra ID' }];
     }, [props.cultureID]);
     const accessPointAdditionalIcons = useMemo(() => {
         return [

package/lib/components/grids/TMValidationItemsList.js

@@ -14,6 +14,8 @@ const StyledValidationItemsTabs = styled.div `
     border-bottom: 1px solid $primary;
     width: 100%;
     user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
     background-color: ${TMColors.primary};
     z-index: 20;
     border-top: 1px solid #122C4C;
@@ -44,12 +46,16 @@ const StyledMessageIcon = styled.div `
 const StyledMessageResultType = styled.div `
     width: 50px;
     user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
     margin-right: 20px;
 `;
 const StyledMessageElement = styled.div `
     width: 150px;
     text-align: left;
     user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
     margin-right: 20px;
 `;
 const StyledMessageText = styled.div `

package/lib/components/index.d.ts

@@ -30,6 +30,7 @@ export { default as TMSummary } from './editors/TMSummary';
 export { default as TMTextBox } from './editors/TMTextBox';
 export { default as TMTextArea } from './editors/TMTextArea';
 export { default as TMTextExpression } from './editors/TMTextExpression';
+export { default as TMMetadataTextBox } from './editors/TMMetadataTextBox';
 export { default as TMCheckBox } from './editors/TMCheckBox';
 export { default as TMRadioButton } from './editors/TMRadioButton';
 export { default as TMDateBox } from './editors/TMDateBox';

package/lib/components/index.js

@@ -32,6 +32,7 @@ export { default as TMSummary } from './editors/TMSummary';
 export { default as TMTextBox } from './editors/TMTextBox';
 export { default as TMTextArea } from './editors/TMTextArea';
 export { default as TMTextExpression } from './editors/TMTextExpression';
+export { default as TMMetadataTextBox } from './editors/TMMetadataTextBox';
 export { default as TMCheckBox } from './editors/TMCheckBox';
 export { default as TMRadioButton } from './editors/TMRadioButton';
 export { default as TMDateBox } from './editors/TMDateBox';

package/lib/components/layout/panelManager/TMPanelManagerContext.js

@@ -107,11 +107,19 @@ export const TMPanelManagerProvider = (props) => {
             });
         }
         else {
-            let updated = { ...initialVisibility };
-            Object.entries(initialVisibility).forEach(([id, isVisible]) => {
-                updated = adjustPanelVisibilityAndSize(id, isVisible, updated);
-            });
-            setPanelVisibility(updated);
+            if (isPersistenceEnabled) {
+                // If persistence is enabled, visibility and dimensions are already synced from persisted state, so just set them directly
+                setPanelVisibility(initialVisibility);
+            }
+            else {
+                // If persistence is not enabled, recalculate visibility and dimensions based on the initial visibility, applying the hierarchy logic
+                let updated = { ...initialVisibility };
+                Object.entries(initialVisibility).forEach(([id, isVisible]) => {
+                    updated = adjustPanelVisibilityAndSize(id, isVisible, updated);
+                });
+                // Update panel visibility state with recalculated values
+                setPanelVisibility(updated);
+            }
         }
     }, [isMobile]);
     // Function to maximize a panel (and its parent panels)

package/lib/components/query/TMQueryEditor.d.ts

@@ -46,6 +46,10 @@ interface ITMQueryEditor extends ITMApplyFormProps<QueryDescriptor> {
     onFromTIDChanged?: (tid: number) => void;
     onQDChanged?: (qd: QueryDescriptor) => void;
     ShowOnlySAP?: boolean;
+    updateIsModalOpen?: (isOpen: boolean) => void;
+    showSearchResultSidebar?: boolean;
+    showToppyDraggableHelpCenter?: boolean;
+    toppyHelpCenterUsePortal?: boolean;
 }
 declare const TMQueryEditor: React.FunctionComponent<ITMQueryEditor>;
 export default TMQueryEditor;

package/lib/components/query/TMQueryEditor.js

@@ -62,7 +62,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 }) => {
+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, 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([]);
@@ -596,7 +596,9 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
     };
     // #endregion
     // #region Ricerca 
-    const renderResultSearchForm = _jsx(TMSearchResult, { context: SearchResultContext.METADATA_SEARCH, allowFloatingBar: false, onClose: () => { setShowResultSearch(false); }, searchResults: resultSearch });
+    const renderResultSearchForm = (_jsx(TMSearchResult, { context: SearchResultContext.METADATA_SEARCH, allowFloatingBar: false, onClose: () => {
+            setShowResultSearch(false);
+        }, searchResults: resultSearch, showSearchResultSidebar: showSearchResultSidebar, showToppyDraggableHelpCenter: showToppyDraggableHelpCenter, toppyHelpCenterUsePortal: toppyHelpCenterUsePortal }));
     const onSearchAsync = async (qdInput) => {
         try {
             let qdSearch = await prepareQdForSearchAsync(qdInput);
@@ -715,7 +717,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: [
                                                                 { 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]); } })] }), formData?.join?.map((ji, index) => {
+                                                            ] }) }), _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) => {
                                                 return (_jsxs("div", { style: { width: 'max-content', padding: isReadOnly ? '0px 20px' : 0 }, children: [_jsxs(StyledRowItem, { onDragEnd: dragEnd, onDragOver: dragOver, onDrop: (e) => dropJoin(e, ji), children: [!isReadOnly && _jsx(StyledDraggableDiv, { draggable: true, onDragStart: (e) => dragStart(e, ji), 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_JoinItem(index) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_JoinItem(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_JoinItem(index) },
                                                                         { name: SDKUI_Localizator.AddBelow, onClick: () => onAdd_JoinItem(index + 1) },
@@ -737,13 +739,13 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
                                                                                     setFormData({ ...formData, join: joinCopy });
                                                                                 }
                                                                             }
-                                                                        ] }), _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); } }), _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); } })] }, 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 })] }, 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 &&
                                                 _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); } }), (!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}`));
+                                                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 &&
                                                 _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: [
@@ -761,7 +763,7 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
                                                             ] }), _jsx(TMQdDropDownMenu, { disabled: index == 0, color: 'green', content: _jsx("div", { style: { fontSize: '1rem' }, children: wi.or ? 'OR' : 'AND' }), items: [
                                                                 { 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); } }), _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); } }), _jsx(TMQdEditableItem, { value: wi.rightBrackets, allowedPattern: /\)/g, backgroundColor: colorBrackets, onValueChanged: (value) => { onChange_WhereItem_Brackets(value, false, index); } })] }, `${wi.tid}_${wi.mid}_${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 &&
                                                 _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: [
@@ -769,11 +771,11 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
                                                                 { name: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OrderByItem(index + 1) },
                                                                 { name: SDKUI_Localizator.Remove, onClick: () => onRemove_OrderByItem(index) },
                                                                 { name: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, orderBy: undefined }) },
-                                                            ] }), _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, showId: showId, borderRadius: borderRadius, backgroundColor: getColorIndex({ tid: oi.tid, alias: oi.alias }), qd: formData, values: [{ tid: oi.tid, mid: oi.mid, aliasTID: oi.alias }], onValueChanged: (values) => onChange_OrderByItem_MID(values[0], index) }), _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, borderRadius: borderRadius, content: _jsx(StyledItemWrapper, { children: oi.asc ? 'ASC' : 'DESC' }), items: [
+                                                            ] }), _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, showId: showId, borderRadius: borderRadius, backgroundColor: getColorIndex({ tid: oi.tid, alias: oi.alias }), qd: formData, values: [{ tid: oi.tid, mid: oi.mid, aliasTID: oi.alias }], onValueChanged: (values) => onChange_OrderByItem_MID(values[0], index), updateIsModalOpen: updateIsModalOpen }), _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, borderRadius: borderRadius, content: _jsx(StyledItemWrapper, { children: oi.asc ? 'ASC' : 'DESC' }), items: [
                                                                 { 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, { 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 }) => {
@@ -795,7 +797,7 @@ const TMQdEditableItem = ({ value, placeHolder, width, backgroundColor, allowedP
             :
                 _jsx(StyledItemWrapper, { onClick: () => setIsComponentVisible(true), style: { backgroundColor: backgroundColor, cursor: 'pointer' }, children: value ?? placeHolder }) }));
 };
-const TMQdWhereItemValue = ({ whereItem, index, queryParamsDynDataList, onlyEditing = false, onValueChanged, onCascadeRefreshDynDataLists }) => {
+const TMQdWhereItemValue = ({ whereItem, index, queryParamsDynDataList, onlyEditing = false, onValueChanged, onCascadeRefreshDynDataLists, updateIsModalOpen }) => {
     let EditingModes;
     (function (EditingModes) {
         EditingModes[EditingModes["None"] = 0] = "None";
@@ -943,7 +945,7 @@ const TMQdWhereItemValue = ({ whereItem, index, queryParamsDynDataList, onlyEdit
     };
     const mdValueEmptyDescr = `<${SDKUI_Localizator.Search_EnterValue}...>`;
     return (_jsxs("div", { ref: ref, id: containerId, style: { width: isEditing && whereItem.operator == QueryOperators.Custom && !onlyEditing ? "100%" : undefined }, children: [(isEditing || onlyEditing) &&
-                _jsxs(StyledRowItem, { children: [showValue1 && _jsx(TMMetadataEditor, { tid: whereItem.tid, mid: whereItem.mid, layoutMode: LayoutModes.None, isEditable: isEditableList, value: whereItem.value1, queryOperator: whereItem.operator, autoFocus: !onlyEditing, containerElement: containerElement, onValueChange: (value) => setCurrentValue1(value), onValueChanged: (value) => { normalizeValue(value, true); } }), showValue2 && _jsx(TMMetadataEditor, { tid: whereItem.tid, mid: whereItem.mid, layoutMode: LayoutModes.None, isEditable: isEditableList, value: whereItem.value1, queryOperator: whereItem.operator, autoFocus: !onlyEditing, containerElement: containerElement, onValueChange: (value) => setCurrentValue2(value), onValueChanged: (value) => { normalizeValue(value, false); } })] }), !isEditing && !onlyEditing && (showValue1 || showValue2) &&
+                _jsxs(StyledRowItem, { children: [showValue1 && _jsx(TMMetadataEditor, { tid: whereItem.tid, mid: whereItem.mid, layoutMode: LayoutModes.None, isEditable: isEditableList, value: whereItem.value1, queryOperator: whereItem.operator, autoFocus: !onlyEditing, containerElement: containerElement, onValueChange: (value) => setCurrentValue1(value), onValueChanged: (value) => { normalizeValue(value, true); }, updateIsModalOpen: updateIsModalOpen }), showValue2 && _jsx(TMMetadataEditor, { tid: whereItem.tid, mid: whereItem.mid, layoutMode: LayoutModes.None, isEditable: isEditableList, value: whereItem.value1, queryOperator: whereItem.operator, autoFocus: !onlyEditing, containerElement: containerElement, onValueChange: (value) => setCurrentValue2(value), onValueChanged: (value) => { normalizeValue(value, false); }, updateIsModalOpen: updateIsModalOpen })] }), !isEditing && !onlyEditing && (showValue1 || showValue2) &&
                 _jsxs(StyledDivHorizontal, { children: [(editingMode == EditingModes.Chooser) &&
                             _jsxs(_Fragment, { children: [showDataListChooseForm && !isEditableList &&
                                         _jsx(TMDataListItemChooserForm, { height: '500px', width: '450px', allowMultipleSelection: whereItem.operator == QueryOperators.In || whereItem.operator == QueryOperators.NotIn, dataListId: md?.dataListID, selectedIDs: whereItem.value1?.split(',').map((item) => !item.startsWith("'") ? item : item.slice(1, -1)) ?? [], onClose: () => setShowDataListChooseForm(false), onChoose: (IDs) => { IDs && normalizeValue(IDs.length == 1 ? IDs[0] : IDs.map((item) => `${item}`).join(","), true); } }), showDynDataListChooseForm && !isEditableList &&
@@ -985,6 +987,8 @@ const StyledContent = styled.div `
     opacity: ${props => props.$disabled ? 0.4 : 1};
     pointer-events: ${props => props.$disabled ? 'none' : ''};
     user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
     display: flex;
     align-items: center;
 

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 { useState, useEffect, useRef, useMemo } from 'react';
 import six from '../../assets/six.png';
-import { getAvatarColor, IconCloseOutline, IconCopy, IconSearch, openApps, SDKUI_Localizator } from '../../helper';
+import { getAvatarColor, IconCloseOutline, IconCopy, openApps, SDKUI_Localizator } from '../../helper';
 import styled, { keyframes } from 'styled-components';
 import { SDK_Globals, AuthenticationModes, AppModules, UserLevels, CultureIDs } from '@topconsultnpm/sdk-ts';
 import { TMColors } from '../../utils/theme';
@@ -87,7 +87,7 @@ 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(IconSearch, { fontSize: 12, color: '#00000060', style: { position: 'absolute', width: '20px', height: '20px', left: '5px', top: '5px', zIndex: 1 } }), _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 [appRoutes, setAppRoutes] = useState();
@@ -302,9 +302,9 @@ const StyledLogo = styled.img `
 `;
 const StyledHeaderContainer = styled.div ` 
     position:fixed; 
-    width: 100%; 
-    height: 60px; 
-    background-color:transparent; 
+    height:60px; 
+    background: transparent;
+    background-size: 200%;
     opacity: 1; 
     display: flex; 
     flex-direction: row; 
@@ -381,8 +381,8 @@ const StyledHeaderIcon = styled.div `
         filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
     }
 `;
-const StyledSearchBarContainer = styled.div ` position: relative; height:30px; width: 100%; max-width: ${props => props.$isMobile ? '65%' : '650px'}; margin-left: ${props => props.$isMobile ? '10px' : '50px'}; `;
-const StyledSearchBar = styled.input ` background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #dbdbdb; border-radius: 5px; padding: 5px 30px; width:100%; transition: 100ms linear; &:focus{ outline: none; border-bottom: 2px solid ${TMColors.primary}; } `;
+const StyledSearchBarContainer = styled.div ` position: relative; height:35px; width: 100%; max-width: ${props => props.$isMobile ? '65%' : '650px'}; margin-left: ${props => props.$isMobile ? '10px' : '50px'}; `;
+const StyledSearchBar = styled.input ` background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #dbdbdb; border-radius: 5px; padding: 8px 30px 8px 20px; width:100%; transition: 100ms linear; &:focus{ outline: none; border-bottom: 2px solid ${TMColors.primary}; } `;
 const StyledHeaderAppText = styled.h2 ` text-align: left; letter-spacing: 0px; color: ${TMColors.primary}; opacity: 1; `;
 const AppMenuButton = styled.div `
   width: 90px;
@@ -400,6 +400,8 @@ const AppMenuButton = styled.div `
   cursor: pointer;
   box-shadow: 0 2px 8px #2459a41a;
   user-select: none;
+  -webkit-touch-callout: none;
+    -webkit-user-select: none;
   gap: 5px;
   transition:
     transform 0.18s cubic-bezier(.4,0,.2,1),
@@ -445,6 +447,8 @@ const UserAvatar = styled.div `
     font-weight: 600;
     letter-spacing: 0.5px;
     user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 `;
 const UserAvatarLarge = styled(UserAvatar) `

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

@@ -9,7 +9,6 @@ export interface AppRoute {
     type?: AppRouteType;
 }
 interface ITMSidebar {
-    /** List of TMSidebarItem components that make up the menu */
     items: JSX.Element[];
     height?: string;
     width?: string;

package/lib/components/sidebar/TMSidebar.js

@@ -1,61 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
-import { AccessLevelsEx, DcmtTypeListCacheService, SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { AppModules, SDK_Globals } from '@topconsultnpm/sdk-ts';
 import { ScrollView } from 'devextreme-react';
 import { TMColors } from '../../utils/theme';
-import TMSpinner from '../base/TMSpinner';
-import { TMExceptionBoxManager } from '../base/TMPopUp';
 const StyledTMSidebarContainer = styled.div `
-    top: ${props => props.$top || '53px'};
+    top: ${props => props.$top || '70px'};
     left: ${props => props.$left || '0px'};
     width: ${props => props.$width || '50px'};
-    height: ${props => props.$height || 'calc(100% - 88px)'};
-    background: ${() => TMColors.primaryColor} 0% 0% no-repeat padding-box;
-    box-shadow: 0px 3px 6px #00000029;
-    border-radius: 0;
+    height: ${props => props.$height || 'calc(100% - 90px)'};
+    background: linear-gradient(180deg, ${() => TMColors.primaryColor} 0%, ${props => props.$appName === AppModules.DESIGNER ? '#351525' : props.$appName === AppModules.ORCHESTRATOR ? '#0a3d23' : '#0a3d23'} 100%);
+    box-shadow: 2px 0 8px rgba(0,0,0,0.08);
+    border-radius: 0px 10px 10px 0px;
     opacity: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-    padding: 10px 0px;
+    padding: 20px 0px;
     position: absolute;
-    border-top-right-radius: 10px;
-    border-bottom-right-radius: 10px;
     overflow: hidden;
-`;
-const FixedBottomContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-    bottom: 10px;
+    z-index: 100;
 `;
 const TMSidebar = ({ items, height, borderRightRadius, left, top, width }) => {
-    const [canArchive, setCanArhive] = useState(false);
-    const [canSearch, setCanSearch] = useState(false);
-    useEffect(() => {
-        getAllDcmtTypesAsync();
-    }, []);
-    const getAllDcmtTypesAsync = async () => {
-        try {
-            TMSpinner.show();
-            const res = await DcmtTypeListCacheService.GetAllWithoutMetadataAsync();
-            if (!res)
-                return;
-            if (res.some(r => r.perm?.canArchive === AccessLevelsEx.Yes))
-                setCanArhive(true);
-            if (res.some(r => r.perm?.canSearch === AccessLevelsEx.Yes))
-                setCanSearch(true);
-        }
-        catch (e) {
-            TMExceptionBoxManager.show({ exception: e });
-        }
-        finally {
-            TMSpinner.hide();
-        }
-    };
-    return (_jsxs(StyledTMSidebarContainer, { "$borderRightRadius": borderRightRadius, "$left": left, "$top": top, "$width": width, "$appName": SDK_Globals.appModule, "$height": height, children: [_jsx(ScrollView, { height: "100%", width: "100%", style: { padding: "5px 0 0 5px" }, useNative: true, children: items.filter(item => item.props.type !== 'app') }), _jsx(FixedBottomContainer, { children: items.filter(item => item.props.type === 'app') })] }));
+    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",
+                    gap: "3px",
+                    width: "100%"
+                }, children: items.filter(item => item.props.type !== 'app') }) }) }));
 };
 export default TMSidebar;

package/lib/components/sidebar/TMSidebarItem.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import TMTooltip from '../base/TMTooltip';
 import { SDK_Globals } from '@topconsultnpm/sdk-ts';
-import { TMColors } from '../../utils/theme';
 var ApplicationThemeColor;
 (function (ApplicationThemeColor) {
     ApplicationThemeColor["SURFER"] = "#1d6f42";
@@ -11,29 +10,49 @@ var ApplicationThemeColor;
     ApplicationThemeColor["DESIGNER"] = "#482234";
 })(ApplicationThemeColor || (ApplicationThemeColor = {}));
 const StyledTMSidebarItemContainer = styled.div `
-    margin-bottom: 10px;
-    background-color: transparent;
-    padding: 5px 0 0 5px;
-    transition: all 200ms ease;
-    user-select: none;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
     cursor: pointer;
-    color:  ${(props) => props.$isSelected ? TMColors.primaryColor : '#fff'};
-    background-color: ${props => props.$isSelected ? 'white' : 'transparent'} ;
-    border-radius: 3px;
-    width: 32px;
-    height: 32px;
+    color: #fff;
+    position: relative;
+    transition: background-color 200ms ease;
+    user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    background-color: ${props => props.$isSelected ? 'rgba(255,255,255,0.35)' : 'transparent'};
 
     p {
         display: none;
     }
 
-    &:hover {
-        background-color: ${props => !props.$isApp && 'white'};
-        color: ${props => !props.$isApp && TMColors.primaryColor};
-    }
+    ${props => !props.$isApp && css `
+        &:hover {
+            background-color: rgba(255,255,255,0.35);
+        }
+    `}
 `;
 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), style: { position: 'relative' }, "$isSelected": props.isSelected, children: [_jsxs("div", { children: [_jsx("i", { children: props.icon }), _jsx("p", { children: props.name })] }), props.badgeNumber > 0 && _jsx("div", { style: { width: '22px', height: '22px', backgroundColor: '#f09c0a', position: 'absolute', borderRadius: '22px', top: -6, right: -6, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1rem', fontWeight: 'bold' }, children: props.badgeNumber })] }) }));
+    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',
+                        background: '#f09c0a',
+                        color: '#fff',
+                        fontSize: '10px',
+                        minWidth: '16px',
+                        height: '16px',
+                        borderRadius: '8px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        padding: '0 4px',
+                        pointerEvents: 'none',
+                        fontWeight: 'bold'
+                    }, children: props.badgeNumber }))] }) }));
 };
 export default TMSidebarItem;

package/lib/helper/SDKUI_Globals.d.ts

@@ -47,6 +47,9 @@ export declare class ThemeSettings {
         gridSettings: DataGridSettings;
     };
 }
+export declare const DEFAULT_PREVIEW_THRESHOLD = 500;
+export declare const DEFAULT_PAGE_SIZE = 100;
+export declare const DEFAULT_MAX_DCMTS_TO_BE_RETURNED = 200;
 export declare class SearchSettings {
     autoFindReferences: ObjectClasses[];
     invoiceRetrieveFormat: InvoiceRetrieveFormats;

package/lib/helper/SDKUI_Globals.js

@@ -90,6 +90,9 @@ export class ThemeSettings {
         };
     }
 }
+export const DEFAULT_PREVIEW_THRESHOLD = 500; // KB
+export const DEFAULT_PAGE_SIZE = 100;
+export const DEFAULT_MAX_DCMTS_TO_BE_RETURNED = 200;
 export class SearchSettings {
     constructor() {
         this.autoFindReferences = [];
@@ -97,9 +100,9 @@ export class SearchSettings {
         this.orderRetrieveFormat = OrderRetrieveFormats.NSO_HTML;
         this.mruTIDs = [];
         this.defaultTree = -1;
-        this.previewThreshold = 500; // KB
-        this.pageSize = 100;
-        this.maxDcmtsToBeReturned = 200;
+        this.previewThreshold = DEFAULT_PREVIEW_THRESHOLD;
+        this.pageSize = DEFAULT_PAGE_SIZE;
+        this.maxDcmtsToBeReturned = DEFAULT_MAX_DCMTS_TO_BE_RETURNED;
         this.floatingMenuBar = new FloatingMenuBarSettings();
         this.panelLayout = {};
     }