npm - @topconsultnpm/sdkui-react - Versions diffs - 6.20.0-dev1.13 → 6.20.0-dev1.131 - Mend

@topconsultnpm/sdkui-react 6.20.0-dev1.13 → 6.20.0-dev1.131

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

package/lib/components/query/TMQueryEditor.js CHANGED Viewed

@@ -3,7 +3,7 @@ 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';
 import Accordion, { Item } from 'devextreme-react/accordion';
-import { SDKUI_Localizator, IconSearch, IconCount, getQueryCountAsync, calcIsModified, IconClear, IconAddCircleOutline, IconDotsVerticalCircleOutline, IconHide, IconShow, IconDraggabledots, genUniqueId, LocalizeQueryOperators, LocalizeQueryFunctions, LocalizeQueryJoinTypes, IconArchiveDoc, IconArrowRight, svgToString, SDKUI_Globals } from '../../helper';
+import { SDKUI_Localizator, IconSearch, IconCount, getQueryCountAsync, calcIsModified, IconClear, IconAddCircleOutline, IconDotsVerticalCircleOutline, IconHide, IconShow, IconDraggabledots, genUniqueId, LocalizeQueryOperators, LocalizeQueryFunctions, LocalizeQueryJoinTypes, IconArchiveDoc, IconArrowRight, SDKUI_Globals } from '../../helper';
 import { displayMetadataValue, getDcmtTypesByQdAsync, getTIDsByQd, IsParametricQuery, prepareQdForSearchAsync } from '../../helper/queryHelper';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { FormModes, SearchResultContext } from '../../ts';
@@ -27,7 +27,7 @@ import { useApplyForm } from '../../hooks/useForm';
 import ShowAlert from '../base/TMAlert';
 import { TMDynDataListItemChooserForm } from '../choosers/TMDynDataListItemChooser';
 import TMMetadataEditor from '../editors/TMMetadataEditor';
-import { ContextMenu } from 'devextreme-react';
+import { ContextMenu } from '../NewComponents/ContextMenu';
 import { useQueryParametersDialog } from '../../hooks/useQueryParametersDialog';
 import TMSearchResult from '../features/search/TMSearchResult';
 export const StyledRowItem = styled.div ` display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin-bottom: 5px; gap: 3px; `;
@@ -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([]);
@@ -244,11 +244,11 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
     };
     const getJoinTypesMenuItems = (index) => {
         let items = [
-            { text: LocalizeQueryJoinTypes(JoinTypes.InnerJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.InnerJoin, index) },
-            { text: LocalizeQueryJoinTypes(JoinTypes.LeftOuterJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.LeftOuterJoin, index) },
-            { text: LocalizeQueryJoinTypes(JoinTypes.RightOuterJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.RightOuterJoin, index) },
-            { text: LocalizeQueryJoinTypes(JoinTypes.FullOuterJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.FullOuterJoin, index) },
-            { text: LocalizeQueryJoinTypes(JoinTypes.CrossJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.CrossJoin, index) }
+            { name: LocalizeQueryJoinTypes(JoinTypes.InnerJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.InnerJoin, index) },
+            { name: LocalizeQueryJoinTypes(JoinTypes.LeftOuterJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.LeftOuterJoin, index) },
+            { name: LocalizeQueryJoinTypes(JoinTypes.RightOuterJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.RightOuterJoin, index) },
+            { name: LocalizeQueryJoinTypes(JoinTypes.FullOuterJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.FullOuterJoin, index) },
+            { name: LocalizeQueryJoinTypes(JoinTypes.CrossJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.CrossJoin, index) }
         ];
         return items;
     };
@@ -335,24 +335,24 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
     };
     const getQueryFunctionsMenuItems = (si, index) => {
         let items = [];
-        items.push({ text: LocalizeQueryFunctions(QueryFunctions.None), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.None, index) });
-        items.push({ text: LocalizeQueryFunctions(QueryFunctions.Count), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Count, index) });
-        items.push({ text: LocalizeQueryFunctions(QueryFunctions.Min), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Min, index) });
-        items.push({ text: LocalizeQueryFunctions(QueryFunctions.Max), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Max, index) });
+        items.push({ name: LocalizeQueryFunctions(QueryFunctions.None), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.None, index) });
+        items.push({ name: LocalizeQueryFunctions(QueryFunctions.Count), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Count, index) });
+        items.push({ name: LocalizeQueryFunctions(QueryFunctions.Min), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Min, index) });
+        items.push({ name: LocalizeQueryFunctions(QueryFunctions.Max), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Max, index) });
         let dataType = getMetadataDataType(si.tid, si.mid);
         if (dataType == MetadataDataTypes.Number)
-            items.push({ text: LocalizeQueryFunctions(QueryFunctions.Sum), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Sum, index) });
+            items.push({ name: LocalizeQueryFunctions(QueryFunctions.Sum), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Sum, index) });
         return items;
     };
     const getSelectMenuItems = (index) => {
         let items = [];
-        items.push({ text: SDKUI_Localizator.AddAbove, onClick: () => onAdd_SelectItem(index) });
-        items.push({ text: SDKUI_Localizator.AddBelow, onClick: () => onAdd_SelectItem(index + 1) });
+        items.push({ name: SDKUI_Localizator.AddAbove, onClick: () => onAdd_SelectItem(index) });
+        items.push({ name: SDKUI_Localizator.AddBelow, onClick: () => onAdd_SelectItem(index + 1) });
         for (const tid_alias of qdTIDs) {
-            items.push({ text: `${SDKUI_Localizator.AddAlls} ${dcmtTypesList.length > 1 ? `(${getDisplayAlias(getDcmtTypeName(tid_alias.tid), tid_alias.alias)})` : ""}`, onClick: () => onAddAll_SelectItem(tid_alias) });
+            items.push({ name: `${SDKUI_Localizator.AddAlls} ${dcmtTypesList.length > 1 ? `(${getDisplayAlias(getDcmtTypeName(tid_alias.tid), tid_alias.alias)})` : ""}`, onClick: () => onAddAll_SelectItem(tid_alias) });
         }
-        items.push({ text: SDKUI_Localizator.Remove, onClick: () => onRemove_SelectItem(index) });
-        items.push({ text: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, select: undefined }) });
+        items.push({ name: SDKUI_Localizator.Remove, onClick: () => onRemove_SelectItem(index) });
+        items.push({ name: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, select: undefined }) });
         return items;
     };
     // #endregion
@@ -441,59 +441,59 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
     const onRemove_WhereItem = (index) => { setFormData({ ...formData, where: formData?.where?.filter((o, i) => i !== index) }); };
     const getQueryOperatorsMenuItems = (wi, index) => {
         let items = [];
-        items.push({ text: LocalizeQueryOperators(QueryOperators.Equal), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Equal, index) });
-        items.push({ text: LocalizeQueryOperators(QueryOperators.NotEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotEqual, index) });
-        items.push({ text: LocalizeQueryOperators(QueryOperators.IsNull), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.IsNull, index) });
-        items.push({ text: LocalizeQueryOperators(QueryOperators.IsNotNull), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.IsNotNull, index) });
-        items.push({ text: LocalizeQueryOperators(QueryOperators.In), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.In, index) });
-        items.push({ text: LocalizeQueryOperators(QueryOperators.NotIn), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotIn, index) });
+        items.push({ name: LocalizeQueryOperators(QueryOperators.Equal), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Equal, index) });
+        items.push({ name: LocalizeQueryOperators(QueryOperators.NotEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotEqual, index) });
+        items.push({ name: LocalizeQueryOperators(QueryOperators.IsNull), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.IsNull, index) });
+        items.push({ name: LocalizeQueryOperators(QueryOperators.IsNotNull), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.IsNotNull, index) });
+        items.push({ name: LocalizeQueryOperators(QueryOperators.In), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.In, index) });
+        items.push({ name: LocalizeQueryOperators(QueryOperators.NotIn), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotIn, index) });
         let mdDataType = getMetadataDataType(wi.tid, wi.mid);
         if (mdDataType != MetadataDataTypes.Varchar) {
-            items.push({ text: LocalizeQueryOperators(QueryOperators.Greater), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Greater, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.GreaterOrEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.GreaterOrEqual, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.Less), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Less, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.LessOrEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LessOrEqual, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.BetweenExclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BetweenExclusive, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.BetweenInclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BetweenInclusive, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.OutsideExclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.OutsideExclusive, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.OutsideInclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.OutsideInclusive, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.Greater), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Greater, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.GreaterOrEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.GreaterOrEqual, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.Less), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Less, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.LessOrEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LessOrEqual, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.BetweenExclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BetweenExclusive, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.BetweenInclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BetweenInclusive, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.OutsideExclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.OutsideExclusive, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.OutsideInclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.OutsideInclusive, index) });
         }
         else {
-            items.push({ text: LocalizeQueryOperators(QueryOperators.Contain), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Contain, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.NotContain), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotContain, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.BeginWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BeginWith, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.NotBeginWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotBeginWith, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.EndWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.EndWith, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.NotEndWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotEndWith, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.Like), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Like, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.NotLike), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotLike, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.Contain), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Contain, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.NotContain), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotContain, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.BeginWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BeginWith, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.NotBeginWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotBeginWith, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.EndWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.EndWith, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.NotEndWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotEndWith, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.Like), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Like, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.NotLike), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotLike, index) });
         }
-        items.push({ text: LocalizeQueryOperators(QueryOperators.Custom), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Custom, index) });
+        items.push({ name: LocalizeQueryOperators(QueryOperators.Custom), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Custom, index) });
         if (mdDataType == MetadataDataTypes.DateTime) {
             items.push({
-                text: "Operatori speciali", items: [
-                    { text: LocalizeQueryOperators(QueryOperators.Yesterday), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Yesterday, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.Today), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Today, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.Tomorrow), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Tomorrow, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.PreviousWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousWeek, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.ThisWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisWeek, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.NextWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextWeek, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.PreviousMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousMonth, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.ThisMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisMonth, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.NextMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextMonth, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.PreviousYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousYear, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.ThisYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisYear, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.NextYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextYear, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.LastXHours), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXHours, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.NextXHours), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXHours, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.LastXDays), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXDays, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.NextXDays), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXDays, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.LastXWeeks), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXWeeks, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.NextXWeeks), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXWeeks, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.LastXMonths), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXMonths, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.NextXMonths), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXMonths, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.LastXYears), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXYears, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.NextXYears), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXYears, index) }
+                name: "Operatori speciali", submenu: [
+                    { name: LocalizeQueryOperators(QueryOperators.Yesterday), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Yesterday, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.Today), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Today, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.Tomorrow), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Tomorrow, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.PreviousWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousWeek, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.ThisWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisWeek, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.NextWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextWeek, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.PreviousMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousMonth, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.ThisMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisMonth, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.NextMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextMonth, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.PreviousYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousYear, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.ThisYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisYear, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.NextYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextYear, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.LastXHours), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXHours, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.NextXHours), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXHours, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.LastXDays), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXDays, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.NextXDays), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXDays, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.LastXWeeks), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXWeeks, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.NextXWeeks), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXWeeks, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.LastXMonths), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXMonths, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.NextXMonths), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXMonths, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.LastXYears), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXYears, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.NextXYears), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXYears, index) }
                 ]
             });
         }
@@ -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);
@@ -713,23 +715,23 @@ 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: svgToString(showId ? _jsx(IconHide, { color: TMColors.button_icon }) : _jsx(IconShow, { color: TMColors.button_icon })), text: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show, onClick: () => setShowId(!showId) },
-                                                                { icon: svgToString(showCompleteMetadataName ? _jsx(IconHide, { color: TMColors.primary }) : _jsx(IconShow, { color: TMColors.primary })), text: 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) => {
+                                                                { 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) => {
                                                 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: [
-                                                                        { text: SDKUI_Localizator.AddAbove, onClick: () => onAdd_JoinItem(index) },
-                                                                        { text: SDKUI_Localizator.AddBelow, onClick: () => onAdd_JoinItem(index + 1) },
-                                                                        { text: SDKUI_Localizator.AddDefinition, onClick: () => onAdd_OnJoinItem(index, 0) },
-                                                                        { text: SDKUI_Localizator.Remove, onClick: () => onRemove_JoinItem(index) },
-                                                                        { text: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, join: undefined }) }
+                                                                        { name: SDKUI_Localizator.AddAbove, onClick: () => onAdd_JoinItem(index) },
+                                                                        { name: SDKUI_Localizator.AddBelow, onClick: () => onAdd_JoinItem(index + 1) },
+                                                                        { name: SDKUI_Localizator.AddDefinition, onClick: () => onAdd_OnJoinItem(index, 0) },
+                                                                        { name: SDKUI_Localizator.Remove, onClick: () => onRemove_JoinItem(index) },
+                                                                        { name: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, join: undefined }) }
                                                                     ] }), _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, color: 'green', borderRadius: borderRadius, content: _jsx(StyledItemWrapper, { children: LocalizeQueryJoinTypes(ji.joinType) }), items: getJoinTypesMenuItems(index) }), _jsx(TMDcmtTypeChooser, { disabled: isReadOnly, showEditButton: false, placeHolder: `<${SDKUI_Localizator.DcmtTypeSelect} ...>`, borderRadius: borderRadius, ShowOnlySAP: ShowOnlySAP, openEditorOnSummaryClick: true, showBorder: false, showId: showId, backgroundColor: getColorIndex({ tid: ji.tid, alias: ji.alias }), values: ji.tid ? [ji.tid] : [], onValueChanged: (newValues) => onChange_JoinItem_TID(newValues[0], index) }), ji.alias &&
                                                                     _jsx(StyledItemWrapper, { style: { fontStyle: 'italic', color: TMColors.primary }, children: `AS ${getDisplayAlias(getDcmtTypeName(ji.tid), ji.alias)}` })] }), ji.on?.map((onItem, indexOn) => {
                                                             return (_jsxs(StyledRowItem, { style: { marginLeft: '40px' }, children: [!isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_OnJoinItem(index, indexOn) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OnJoinItem(index, indexOn + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: [
-                                                                            { text: SDKUI_Localizator.AddAbove, onClick: () => onAdd_OnJoinItem(index, indexOn) },
-                                                                            { text: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OnJoinItem(index, indexOn + 1) },
-                                                                            { text: SDKUI_Localizator.Remove, onClick: () => onRemove_OnJoinItem(index, indexOn) },
+                                                                            { name: SDKUI_Localizator.AddAbove, onClick: () => onAdd_OnJoinItem(index, indexOn) },
+                                                                            { name: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OnJoinItem(index, indexOn + 1) },
+                                                                            { name: SDKUI_Localizator.Remove, onClick: () => onRemove_OnJoinItem(index, indexOn) },
                                                                             {
-                                                                                text: SDKUI_Localizator.RemoveAll, onClick: () => {
+                                                                                name: SDKUI_Localizator.RemoveAll, onClick: () => {
                                                                                     if (!formData.join)
                                                                                         return;
                                                                                     const joinCopy = formData?.join?.map((ji) => { return { ...ji }; }) ?? [];
@@ -737,41 +739,41 @@ 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) => ({ text: `${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}`));
+                                                            : _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 &&
                                                 _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: [
-                                                                { text: SDKUI_Localizator.AddAbove, onClick: () => onAdd_WhereItem(index) },
-                                                                { text: SDKUI_Localizator.AddBelow, onClick: () => onAdd_WhereItem(index + 1) },
-                                                                { text: SDKUI_Localizator.Remove, onClick: () => onRemove_WhereItem(index) },
-                                                                { text: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, where: undefined }) },
+                                                                { name: SDKUI_Localizator.AddAbove, onClick: () => onAdd_WhereItem(index) },
+                                                                { name: SDKUI_Localizator.AddBelow, onClick: () => onAdd_WhereItem(index + 1) },
+                                                                { name: SDKUI_Localizator.Remove, onClick: () => onRemove_WhereItem(index) },
+                                                                { name: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, where: undefined }) },
                                                                 {
-                                                                    text: "Imposta parametro", items: [
-                                                                        { text: "{@UserName}", onClick: () => onChange_WhereItem_Values("{@UserName}", undefined, index) },
-                                                                        { text: "{@UserID}", onClick: () => onChange_WhereItem_Values("{@UserID}", undefined, index) },
-                                                                        { text: "{@QueryParam...N}", onClick: () => onChange_WhereItem_Values(calcQueryParamN(), undefined, index) }
+                                                                    name: "Imposta parametro", submenu: [
+                                                                        { name: "{@UserName}", onClick: () => onChange_WhereItem_Values("{@UserName}", undefined, index) },
+                                                                        { name: "{@UserID}", onClick: () => onChange_WhereItem_Values("{@UserID}", undefined, index) },
+                                                                        { name: "{@QueryParam...N}", onClick: () => onChange_WhereItem_Values(calcQueryParamN(), undefined, index) }
                                                                     ]
                                                                 },
                                                             ] }), _jsx(TMQdDropDownMenu, { disabled: index == 0, color: 'green', content: _jsx("div", { style: { fontSize: '1rem' }, children: wi.or ? 'OR' : 'AND' }), items: [
-                                                                { text: 'AND', onClick: () => onChange_WhereItem_Or(false, index) },
-                                                                { text: '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}`));
+                                                                { 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 &&
                                                 _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: [
-                                                                { text: SDKUI_Localizator.AddAbove, onClick: () => onAdd_OrderByItem(index) },
-                                                                { text: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OrderByItem(index + 1) },
-                                                                { text: SDKUI_Localizator.Remove, onClick: () => onRemove_OrderByItem(index) },
-                                                                { text: 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: [
-                                                                { text: 'ASC', onClick: () => onChange_OrderByItem_Asc(true, oi, index) },
-                                                                { text: 'DESC', onClick: () => onChange_OrderByItem_Asc(false, oi, index) }
+                                                                { name: SDKUI_Localizator.AddAbove, onClick: () => onAdd_OrderByItem(index) },
+                                                                { 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), 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, " "] })] }));
 };
@@ -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;
@@ -997,5 +1001,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 (_jsxs(_Fragment, { children: [_jsx(StyledContent, { id: `idContainer${id}`, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, children: content }), _jsx(ContextMenu, { target: `#idContainer${id}`, dataSource: items, showEvent: 'click' })] }));
+    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/settings/SettingsAppearance.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-declare const SettingsAppearance: ({ landingPagesOptions, permissions }: {
+declare const SettingsAppearance: ({ landingPagesOptions, permissions, showConfirmPopup }: {
     landingPagesOptions?: {
         display: string;
         value: string;
@@ -10,5 +10,6 @@ declare const SettingsAppearance: ({ landingPagesOptions, permissions }: {
         dossiersLicense: boolean;
         workFlowLicense: boolean;
     };
+    showConfirmPopup?: (title: string, onConfirm: () => void) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default SettingsAppearance;

package/lib/components/settings/SettingsAppearance.js CHANGED Viewed

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
-import TMLayoutContainer from '../base/TMLayout';
+import { useMemo } from 'react';
 import TMDropDown from '../editors/TMDropDown';
 import TMCheckBox from '../editors/TMCheckBox';
 import TMButton from '../base/TMButton';
 import { LandingPages, SDKUI_Globals, SDKUI_Localizator, ThemeSettings } from '../../helper';
+import { useSettingsFeedback } from '../../hooks/useSettingsFeedback';
+import TMTooltip from '../base/TMTooltip';
 const fontSizes = [
     { value: "10px", display: "10px" },
     { value: "11px", display: "11px" },
@@ -22,9 +23,18 @@ const fontFamilies = [
     { value: "Inter", display: "Inter" },
     { value: "Roboto", display: "Roboto" }
 ];
-const SettingsAppearance = ({ landingPagesOptions, permissions = { canArchive: true, canSearch: true, dossiersLicense: true, wgGroupLicense: true, workFlowLicense: true } }) => {
-    const [, setForceUpdate] = useState(0); // Dummy state to force re-renders
-    const triggerUIUpdate = () => setForceUpdate((prev) => prev + 1); // Increment dummy state to re-render
+const SettingsAppearance = ({ landingPagesOptions, permissions = { canArchive: true, canSearch: true, dossiersLicense: true, wgGroupLicense: true, workFlowLicense: true }, showConfirmPopup }) => {
+    const { showSavedBadge, lastChanged, triggerUIUpdate, closeBadge } = useSettingsFeedback();
+    const handleRestoreClick = () => {
+        if (!showConfirmPopup) {
+            return;
+        }
+        showConfirmPopup(SDKUI_Localizator.ConfirmRestoreDefaultSettings, () => {
+            SDKUI_Globals.userSettings.themeSettings = new ThemeSettings();
+            SDKUI_Globals.userSettings.landingPage = LandingPages.DASHBOARD;
+            triggerUIUpdate(SDKUI_Localizator.Restore, 'Impostazioni predefinite', true);
+        });
+    };
     const filteredLandingPageOptopns = useMemo(() => {
         let options = landingPagesOptions ?? [];
         if (!permissions?.canArchive) {
@@ -44,30 +54,89 @@ const SettingsAppearance = ({ landingPagesOptions, permissions = { canArchive: t
         }
         return options;
     }, [permissions?.canArchive, permissions?.canSearch, permissions?.wgGroupLicense, permissions?.dossiersLicense, permissions?.workFlowLicense, landingPagesOptions]);
-    return (_jsxs(TMLayoutContainer, { children: [landingPagesOptions && _jsx("p", { style: { fontSize: '1.h1rem', fontWeight: 'bold', marginBottom: '5px' }, children: SDKUI_Localizator.LandingPage }), landingPagesOptions && _jsx(TMDropDown, { dataSource: filteredLandingPageOptopns, value: SDKUI_Globals.userSettings.landingPage, width: '230px', onValueChanged: (e) => {
-                    SDKUI_Globals.userSettings.landingPage = e.target.value;
-                    triggerUIUpdate();
-                } }), _jsx("p", { style: { fontSize: '1.h1rem', fontWeight: 'bold', marginTop: '10px' }, children: 'Font' }), _jsx(TMDropDown, { label: SDKUI_Localizator.Name, dataSource: fontFamilies, width: '230px', value: SDKUI_Globals.userSettings.themeSettings.fontFamily, onValueChanged: (e) => {
-                    let newFamily = e.target.value;
-                    SDKUI_Globals.userSettings.themeSettings.fontFamily = newFamily;
-                    triggerUIUpdate();
-                } }), _jsx(TMDropDown, { label: SDKUI_Localizator.Size, dataSource: fontSizes, width: '230px', value: SDKUI_Globals.userSettings.themeSettings.fontSize, onValueChanged: (e) => {
-                    let newpx = e.target.value;
-                    SDKUI_Globals.userSettings.themeSettings.fontSize = newpx;
-                    triggerUIUpdate();
-                } }), _jsx("p", { style: { fontSize: '1rem', fontWeight: 'bold', marginTop: '10px', marginBottom: '5px' }, children: SDKUI_Localizator.Grids }), _jsx(TMCheckBox, { label: SDKUI_Localizator.ShowRowSeparatingLines, value: SDKUI_Globals.userSettings.themeSettings.gridSettings.showRowLines, onValueChanged: (newValue) => {
-                    SDKUI_Globals.userSettings.themeSettings.gridSettings.showRowLines = newValue;
-                    triggerUIUpdate();
-                } }), _jsx(TMCheckBox, { label: SDKUI_Localizator.ShowColumnSeparatingLines, value: SDKUI_Globals.userSettings.themeSettings.gridSettings.showColumnLines, onValueChanged: (newValue) => {
-                    SDKUI_Globals.userSettings.themeSettings.gridSettings.showColumnLines = newValue;
-                    triggerUIUpdate();
-                } }), _jsx(TMCheckBox, { label: SDKUI_Localizator.UseNativeScrollbar, value: SDKUI_Globals.userSettings.themeSettings.gridSettings.useNativeScrollbar, onValueChanged: (newValue) => {
-                    SDKUI_Globals.userSettings.themeSettings.gridSettings.useNativeScrollbar = newValue;
-                    triggerUIUpdate();
-                } }), _jsx(TMButton, { elementStyle: { marginTop: '10px' }, caption: SDKUI_Localizator.Restore, showTooltip: false, onClick: () => {
-                    SDKUI_Globals.userSettings.themeSettings = new ThemeSettings();
-                    SDKUI_Globals.userSettings.landingPage = LandingPages.DASHBOARD;
-                    triggerUIUpdate();
-                } })] }));
+    return (_jsxs("div", { style: { width: "100%", height: "100%", display: "flex", flexDirection: "column", position: "relative" }, children: [_jsxs("div", { style: { flex: 1, overflowY: "auto" }, children: [_jsxs("div", { style: {
+                            backgroundColor: "rgba(var(--primary-rgb, 33, 150, 243), 0.04)",
+                            borderLeft: "3px solid var(--primary-color, #2196f3)",
+                            borderRadius: "4px",
+                            padding: "10px 12px",
+                            marginBottom: "4px"
+                        }, children: [_jsxs("div", { style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: "6px",
+                                    marginBottom: "4px"
+                                }, children: [_jsx("i", { className: "dx-icon-font", style: { fontSize: "1.1rem", color: "var(--primary-color, #2196f3)" } }), _jsx("p", { style: { fontSize: '1.05rem', fontWeight: '600', margin: 0, color: "var(--text-primary, #333)" }, children: "Font" })] }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [_jsx(TMDropDown, { label: SDKUI_Localizator.Name, dataSource: fontFamilies, width: '100%', value: SDKUI_Globals.userSettings.themeSettings.fontFamily, onValueChanged: (e) => {
+                                            let newFamily = e.target.value;
+                                            SDKUI_Globals.userSettings.themeSettings.fontFamily = newFamily;
+                                            triggerUIUpdate(SDKUI_Localizator.Name, newFamily);
+                                        } }), _jsx(TMDropDown, { label: SDKUI_Localizator.Size, dataSource: fontSizes, width: '100%', value: SDKUI_Globals.userSettings.themeSettings.fontSize, onValueChanged: (e) => {
+                                            let newpx = e.target.value;
+                                            SDKUI_Globals.userSettings.themeSettings.fontSize = newpx;
+                                            triggerUIUpdate(SDKUI_Localizator.Size, newpx);
+                                        } })] })] }), _jsxs("div", { style: {
+                            backgroundColor: "rgba(var(--success-rgb, 76, 175, 80), 0.04)",
+                            borderLeft: "3px solid var(--success-color, #4caf50)",
+                            borderRadius: "4px",
+                            padding: "10px 12px",
+                            marginBottom: "4px"
+                        }, children: [_jsxs("div", { style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: "6px",
+                                    marginBottom: "4px"
+                                }, children: [_jsx("i", { className: "dx-icon-tableproperties", style: { fontSize: "1.1rem", color: "var(--success-color, #4caf50)" } }), _jsx("p", { style: { fontSize: '1.05rem', fontWeight: '600', margin: 0, color: "var(--text-primary, #333)" }, children: SDKUI_Localizator.Grids })] }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "5px" }, children: [_jsx(TMCheckBox, { label: SDKUI_Localizator.ShowRowSeparatingLines, value: SDKUI_Globals.userSettings.themeSettings.gridSettings.showRowLines, onValueChanged: (newValue) => {
+                                            SDKUI_Globals.userSettings.themeSettings.gridSettings.showRowLines = newValue;
+                                            triggerUIUpdate(SDKUI_Localizator.ShowRowSeparatingLines, newValue ? 'Attivo' : 'Non attivo');
+                                        } }), _jsx(TMCheckBox, { label: SDKUI_Localizator.ShowColumnSeparatingLines, value: SDKUI_Globals.userSettings.themeSettings.gridSettings.showColumnLines, onValueChanged: (newValue) => {
+                                            SDKUI_Globals.userSettings.themeSettings.gridSettings.showColumnLines = newValue;
+                                            triggerUIUpdate(SDKUI_Localizator.ShowColumnSeparatingLines, newValue ? 'Attivo' : 'Non attivo');
+                                        } }), _jsx(TMCheckBox, { label: SDKUI_Localizator.UseNativeScrollbar, value: SDKUI_Globals.userSettings.themeSettings.gridSettings.useNativeScrollbar, onValueChanged: (newValue) => {
+                                            SDKUI_Globals.userSettings.themeSettings.gridSettings.useNativeScrollbar = newValue;
+                                            triggerUIUpdate(SDKUI_Localizator.UseNativeScrollbar, newValue ? 'Attivo' : 'Non attivo');
+                                        } })] })] }), landingPagesOptions && (_jsxs("div", { style: {
+                            backgroundColor: "rgba(var(--warning-rgb, 255, 152, 0), 0.04)",
+                            borderLeft: "3px solid var(--warning-color, #ff9800)",
+                            borderRadius: "4px",
+                            padding: "10px 12px"
+                        }, children: [_jsxs("div", { style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: "6px",
+                                    marginBottom: "4px"
+                                }, children: [_jsx("i", { className: "dx-icon-home", style: { fontSize: "1.1rem", color: "var(--warning-color, #ff9800)" } }), _jsx("p", { style: { fontSize: '1.05rem', fontWeight: '600', margin: 0, color: "var(--text-primary, #333)" }, children: SDKUI_Localizator.LandingPage })] }), _jsx(TMDropDown, { dataSource: filteredLandingPageOptopns, value: SDKUI_Globals.userSettings.landingPage, width: '100%', onValueChanged: (e) => {
+                                    const selectedOption = filteredLandingPageOptopns.find(opt => opt.value === e.target.value);
+                                    SDKUI_Globals.userSettings.landingPage = e.target.value;
+                                    triggerUIUpdate(SDKUI_Localizator.LandingPage, selectedOption?.display || e.target.value);
+                                } })] }))] }), _jsxs("div", { style: { borderTop: "1px solid #e0e0e0", flexShrink: 0, paddingTop: "5px", display: "flex", flexDirection: "column", alignItems: "flex-end" }, children: [_jsx(TMButton, { elementStyle: { marginTop: '0px' }, caption: SDKUI_Localizator.Restore, showTooltip: false, onClick: handleRestoreClick }), showSavedBadge && (_jsxs("div", { style: {
+                            marginTop: "5px",
+                            backgroundColor: "#4caf50",
+                            color: "white",
+                            padding: "7px 12px",
+                            fontSize: "0.95rem",
+                            borderRadius: "4px",
+                            boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "10px",
+                            width: "100%",
+                            maxWidth: "350px",
+                            boxSizing: "border-box"
+                        }, children: [_jsx("i", { className: "dx-icon-save", style: { fontSize: "1rem", flexShrink: 0 } }), _jsx("div", { style: {
+                                    flex: 1,
+                                    minWidth: 0,
+                                    overflow: "hidden"
+                                }, children: _jsxs("div", { style: {
+                                        display: "inline-flex",
+                                        alignItems: "center",
+                                        gap: "5px",
+                                        whiteSpace: "nowrap",
+                                        overflow: "hidden",
+                                        textOverflow: "ellipsis"
+                                    }, children: [_jsx("span", { children: SDKUI_Localizator.SettingSavedSuccessfully }), _jsx(TMTooltip, { content: `${lastChanged.label}: ${lastChanged.value}`, children: _jsx("i", { className: "dx-icon-info" }) })] }) }), _jsx("i", { className: "dx-icon-close", style: {
+                                    fontSize: "0.9rem",
+                                    flexShrink: 0,
+                                    cursor: "pointer",
+                                    opacity: 0.8
+                                }, onClick: closeBadge })] }))] })] }));
 };
 export default SettingsAppearance;