@topconsultnpm/sdkui-react-beta 6.11.111 → 6.11.113

package/lib/components/choosers/TMDynDataListItemChooser.js

@@ -27,8 +27,10 @@ const TMDynDataListItemChooser = ({ tid, md, titleForm, openChooserBySingleClick
             }
         }
         setDynDl(d);
-        if (!IsParametricQuery(d?.qd) && !dataSource)
+        if (!IsParametricQuery(d?.qd) && !dataSource) {
+            setDataSource(undefined);
             loadData().then((result) => { setDataSource(result); });
+        }
     }, [md]);
     useEffect(() => {
         if (!tid)
@@ -41,11 +43,6 @@ const TMDynDataListItemChooser = ({ tid, md, titleForm, openChooserBySingleClick
         }
         loadData().then((result) => {
             setDataSource(result);
-            if (values && values.length > 0) {
-                let description = result?.dtdResult?.rows?.filter(o => o[dynDl?.selectItemForValue ?? 0] == values?.[0])?.[0]?.[dynDl?.selectItemForDescription ?? 0];
-                if (!description)
-                    onValueChanged?.(undefined);
-            }
         });
     }, [queryParamsDynDataList, dynDl]);
     const loadData = async () => {
@@ -77,7 +74,7 @@ const TMDynDataListItemChooser = ({ tid, md, titleForm, openChooserBySingleClick
             _jsx(TMTooltip, { content: SDKUI_Localizator.ValueNotPresent, children: _jsx(IconWarning, { color: TMColors.warning }) });
     };
     const renderTemplate = () => {
-        return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px' }, children: [_jsxs(StyledDivHorizontal, { children: [getIcon(), _jsx("p", { style: { marginLeft: '5px' }, children: getDescription() })] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
+        return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px' }, children: [dataSource && _jsxs(StyledDivHorizontal, { children: [getIcon(), _jsx("p", { style: { marginLeft: '5px' }, children: getDescription() })] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
     return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { placeHolder: placeHolder, icon: icon, labelColor: labelColor, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, readOnly: readOnly, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, openEditorOnSummaryClick: openChooserBySingleClick, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
                 _jsx(TMDynDataListItemChooserForm, { TID: tid, MID: md?.id, dynDL: dynDl, title: titleForm, allowMultipleSelection: allowMultipleSelection, searchResult: dataSource, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => {

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface IHtmlContentDisplay {
+    markup: string;
+}
+declare const TMHtmlContentDisplay: React.FC<IHtmlContentDisplay>;
+export default TMHtmlContentDisplay;

package/lib/components/editors/TMHtmlContentDisplay.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+const Wrapper = styled.div `
+    ul li {
+        list-style-position: inside;
+    }
+    ol li {
+        list-style-position: inside;
+    }
+`;
+const TMHtmlContentDisplay = ({ markup }) => {
+    return (_jsx(Wrapper, { children: _jsx("div", { dangerouslySetInnerHTML: { __html: markup } }) }));
+};
+export default TMHtmlContentDisplay;

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

@@ -0,0 +1,29 @@
+import { ValidationItem } from '@topconsultnpm/sdk-ts-beta';
+export interface ITMHtmlEditor {
+    /** Width of the editor (e.g., '100%', '500px') */
+    width?: string;
+    /** Height of the editor (e.g., '300px') */
+    height?: string;
+    /** Initial or current value of the editor content as an HTML string */
+    value?: string;
+    /** Callback function triggered when the content value changes */
+    onValueChanged?: (e: {
+        value: string;
+    }) => void;
+    /** If true, the editor is in read-only mode and content cannot be edited */
+    readOnly?: boolean;
+    /** Configuration for mention functionality (e.g., @mentions) */
+    mentionsConfig?: Array<{
+        dataSource: Array<{
+            text: string;
+            icon?: string;
+        }>;
+        searchExpr: string;
+        displayExpr: string;
+        valueExpr: string;
+    }>;
+    /** List of validation rules or checks to apply to the editor content */
+    validationItems?: Array<ValidationItem>;
+}
+declare const TMHtmlEditor: (props: ITMHtmlEditor) => import("react/jsx-runtime").JSX.Element;
+export default TMHtmlEditor;

package/lib/components/editors/TMHtmlEditor.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import HtmlEditor, { Toolbar, Item } from 'devextreme-react/html-editor';
+import TMVilViewer from '../base/TMVilViewer';
+import TMTooltip from '../base/TMTooltip';
+import TMButton from '../base/TMButton';
+const TMHtmlEditor = (props) => {
+    const { width = "100%", height = "100%", readOnly = false, value = "", mentionsConfig, onValueChanged, validationItems } = props;
+    const editorRef = useRef(null); // Create a ref for the HtmlEditor
+    const [isEditorEnabled, setIsEditorEnabled] = useState(false);
+    const handlePaste = (e) => {
+        const clipboardData = e.clipboardData || window.clipboardData;
+        const pastedText = clipboardData.getData('text/plain'); // Get the plain text
+        e.preventDefault(); // Prevent default paste behavior
+        setMarkup(pastedText); // Set the pasted text as plain text
+        onValueChangeCallback(pastedText); // Call the value change callback
+    };
+    useEffect(() => {
+        const editor = editorRef.current?.instance()?.element();
+        if (editor) {
+            // Attach paste event listener to the editor's root DOM element
+            editor.addEventListener('paste', handlePaste);
+        }
+        // Cleanup the event listener when component unmounts
+        return () => {
+            if (editor) {
+                editor.removeEventListener('paste', handlePaste);
+            }
+        };
+    }, []);
+    const [markup, setMarkup] = useState(value);
+    useEffect(() => {
+        // Initialize markup with the value prop
+        setMarkup(value);
+    }, [value]);
+    useEffect(() => {
+        if (!isEditorEnabled) {
+            // When switching to plain text mode, strip HTML tags
+            const doc = new DOMParser().parseFromString(markup, 'text/html');
+            setMarkup(doc.body.textContent || "");
+        }
+    }, [isEditorEnabled]);
+    const onValueChangeCallback = (text) => {
+        setMarkup(text);
+        if (onValueChanged) {
+            onValueChanged({ value: text });
+        }
+    };
+    const hasValidationErrors = useMemo(() => {
+        return validationItems && validationItems.length > 0;
+    }, [validationItems]);
+    const toggleEditorMode = () => {
+        setIsEditorEnabled((prev) => !prev);
+    };
+    return (_jsxs("div", { children: [_jsx("div", { style: { position: 'absolute', top: '10px', right: '10px', zIndex: 10 }, children: _jsx(TMTooltip, { content: isEditorEnabled ? "Nascondi opzioni di formattazione" : "Mostra opzioni di formattazione", children: _jsx(TMButton, { btnStyle: "toolbar", onClick: toggleEditorMode, icon: isEditorEnabled ? _jsx("i", { className: 'dx-icon-eyeclose' }) : _jsx("i", { className: 'dx-icon-eyeopen' }) }) }) }), _jsx("div", { style: { borderWidth: '1px', borderStyle: 'solid', borderColor: hasValidationErrors ? "red" : "#e0e0e0 #e0e0e0 #616161", }, children: !isEditorEnabled ? (_jsx("textarea", { placeholder: "Digita un messaggio...", value: markup, onChange: (e) => onValueChangeCallback(e.target.value), maxLength: 1000, style: {
+                        width,
+                        height,
+                        border: '1px solid #ddd',
+                        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                        resize: 'none',
+                        padding: '10px',
+                        outline: 'none',
+                        paddingRight: "40px"
+                    } })) : (_jsx(HtmlEditor, { ref: editorRef, width: width, height: height, value: markup, onValueChange: onValueChangeCallback, readOnly: readOnly, mentions: mentionsConfig, style: { overflow: 'hidden', outline: "none" }, children: !readOnly && (_jsxs(Toolbar, { multiline: false, children: [_jsx(Item, { name: "undo" }), _jsx(Item, { name: "redo" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "bold" }), _jsx(Item, { name: "italic" }), _jsx(Item, { name: "underline" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "alignLeft" }), _jsx(Item, { name: "alignCenter" }), _jsx(Item, { name: "alignRight" }), _jsx(Item, { name: "alignJustify" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "orderedList" }), _jsx(Item, { name: "bulletList" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "color" }), _jsx(Item, { name: "background" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "link" })] })) })) }), _jsx(TMVilViewer, { vil: validationItems })] }));
+};
+export default TMHtmlEditor;

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

@@ -7,7 +7,7 @@ interface ITMMetadataEditorProps {
     value: string | undefined;
     queryParamsDynDataList?: string[];
     autoFocus?: boolean;
-    containerElement: Element | undefined;
+    containerElement?: Element;
     disabled?: boolean;
     validationItems?: ValidationItem[];
     isLexProt?: number;
@@ -26,8 +26,4 @@ interface ITMMetadataEditorProps {
 }
 declare const TMMetadataEditor: React.FC<ITMMetadataEditorProps>;
 export default TMMetadataEditor;
-export declare const MetadataEditorContextMenu: React.MemoExoticComponent<({ target, menuItems }: {
-    target: string;
-    menuItems: any[];
-}) => import("react/jsx-runtime").JSX.Element>;
 export declare const useMetadataEditableList: () => [(mid: number | undefined) => boolean, (mid: number | undefined) => void];

package/lib/components/editors/TMMetadataEditor.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { MetadataDataDomains, MetadataDataTypes, DcmtTypeListCacheService, LayoutModes, AccessLevels, PlatformObjectValidator, QueryOperators, SDK_Globals, AppModules, MetadataFormats } from '@topconsultnpm/sdk-ts-beta';
 import { TMColors } from '../../utils/theme';
 import TMDataListItemChooser from '../choosers/TMDataListItemChooser';
@@ -10,7 +10,6 @@ import TMTextBox from './TMTextBox';
 import { TMMetadataIcon } from '../viewers/TMMidViewer';
 import TMTextArea from './TMTextArea';
 import { DateDisplayTypes } from '../../helper/Globalization';
-import ContextMenu from "devextreme-react/cjs/context-menu";
 const renderMetadataIcon = (tid, md, layoutMode, isMetadataSelected) => {
     return (_jsx(TMMetadataIcon, { isMetadataSelected: isMetadataSelected, layoutMode: layoutMode, md: md, tid: tid }));
 };
@@ -111,9 +110,6 @@ const TMMetadataEditor = ({ isSelected = false, customLabel, isReadOnly, isLexPr
     }
 };
 export default TMMetadataEditor;
-export const MetadataEditorContextMenu = React.memo(({ target, menuItems }) => {
-    return (_jsx(ContextMenu, { dataSource: menuItems, target: `${target}` }));
-});
 export const useMetadataEditableList = () => {
     const [editableList, setEditableList] = useState([]);
     const addOrRemoveEditableList = (mid) => {

package/lib/components/editors/TMMetadataValues.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useState } from "react";
 import styled from "styled-components";
 import { AccessLevels, DcmtTypeListCacheService, LayoutModes, MetadataDataDomains, MetadataDataTypes, MetadataValueDescriptor, SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
-import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty } from "../../helper";
+import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty, deepCompare } from "../../helper";
 import { TMColors } from "../../utils/theme";
 import TMButton from "../base/TMButton";
 import TMDropDownMenu from "../base/TMDropDownMenu";
@@ -27,10 +27,10 @@ export var AdvancedMenuButtons;
 })(AdvancedMenuButtons || (AdvancedMenuButtons = {}));
 const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerms = true, showAdvancedMenu = false, customMenuItems = [], showNullValueCheckBoxes, isOpenDistinctValues = false, openChooserBySingleClick, selectedMID, onFocusedItemChanged, layoutMode = LayoutModes.Update, metadataValues = [], metadataValuesOrig = [], TID, onValueChanged, onAdvancedMenuClick, validationItems }) => {
     const [dynDataListsToBeRefreshed, setDynDataListsToBeRefreshed] = useState([]);
-    const [calcDynDataListsToBeRefreshed, setCalcDynDataListsToBeRefreshed] = useState();
     const [currentDTD, setCurrentDTD] = useState();
     const [isEditableList, addOrRemoveEditableList] = useMetadataEditableList();
     const [selectedItem, setSelectedItem] = useState(undefined);
+    const [prevMetadataValues, setPrevMetadataValues] = useState([]);
     const onChangeHandler = (newValue, mid) => {
         let newValues = structuredClone(metadataValues);
         const item = newValues.find(value => value.mid === mid);
@@ -48,8 +48,6 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 dynDLToBeRefreshed = dynDataListsToBeRefreshed.find(o => o.midStarter === item?.mid);
             }
         }
-        let md = currentDTD?.metadata?.find(o => o.id == mid);
-        setCalcDynDataListsToBeRefreshed(md?.dataDomain === MetadataDataDomains.DynamicDataList);
         onValueChanged?.(newValues);
     };
     const editorValidationHandler = (mid) => {
@@ -73,29 +71,31 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
     useEffect(() => {
         DcmtTypeListCacheService.GetAsync(TID, true).then((resultDTD) => {
             setCurrentDTD(resultDTD);
-            setCalcDynDataListsToBeRefreshed(true);
         });
     }, [TID]);
     useEffect(() => {
         if (metadataValues.length <= 0)
             return;
-        if (calcDynDataListsToBeRefreshed && currentDTD?.id == TID) {
-            loadDynDataListToBeRefreshedCascadeAsync(TID, metadataValues).then((result) => {
-                setDynDataListsToBeRefreshed(result);
-                setCalcDynDataListsToBeRefreshed(false);
-            });
-        }
-    }, [JSON.stringify(metadataValues)]);
-    const loadDynDataListToBeRefreshedCascadeAsync = async (tid, mds) => {
+        if (!currentDTD)
+            return;
+        //if no dynamic data list has changed we do not call APIs
+        if (deepCompare(metadataValues.filter(o => o.md?.dataDomain === MetadataDataDomains.DynamicDataList), prevMetadataValues.filter(o => o.md?.dataDomain === MetadataDataDomains.DynamicDataList)))
+            return;
+        setPrevMetadataValues(metadataValues);
+        loadDynDataListToBeRefreshedCascadeAsync(TID, metadataValues).then((result) => {
+            setDynDataListsToBeRefreshed(result);
+        });
+    }, [metadataValues, currentDTD]);
+    const loadDynDataListToBeRefreshedCascadeAsync = async (tid, mvdList) => {
         if (!tid)
             return [];
-        if (mds.length <= 0)
+        if (mvdList.length <= 0)
             return [];
         let dynDLToBeRefreshed = [];
-        for (const m of mds) {
+        for (const m of mvdList) {
             if (!m.value)
                 continue;
-            let data = await getDataDynDataListsToBeRefreshedAsync(tid, m.mid, [m.value ?? ""], dynDLToBeRefreshed.find(o => o.mid == m.mid)?.queryParams ?? []);
+            let data = await getDataDynDataListsToBeRefreshedAsync(tid, m.mid, m.value, dynDLToBeRefreshed.find(o => o.mid == m.mid)?.queryParams ?? []);
             if (!data)
                 continue;
             for (const item of data)
@@ -103,11 +103,13 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         }
         return dynDLToBeRefreshed;
     };
-    const getDataDynDataListsToBeRefreshedAsync = async (tid, mid, values, qParams) => {
+    const getDataDynDataListsToBeRefreshedAsync = async (tid, mid, value, qParams) => {
         if (!tid)
             return;
         if (!mid)
             return;
+        if (stringIsNullOrEmpty(value))
+            return;
         let md = currentDTD?.metadata?.find(o => o.id == mid);
         if (md?.dataDomain !== MetadataDataDomains.DynamicDataList)
             return;
@@ -127,25 +129,23 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             return;
         let toBeRefreshed = [];
         let dynDlDataSource = await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(tid, mid, layoutMode, qParams);
-        if (values && values.length > 0) {
-            if (!d.onValueChanged_DynDataListsToBeRefreshed)
-                return;
-            let row = dynDlDataSource?.dtdResult?.rows?.filter(o => o[d.selectItemForValue ?? 0] == values?.[0]);
-            if (!row || row.length <= 0)
-                return;
-            for (const t of d.onValueChanged_DynDataListsToBeRefreshed) {
-                let mid = t.item1;
-                let queryParams = [];
-                if ((t.item2 ?? 0) >= 0)
-                    queryParams.push(row[0][t.item2 ?? 0]);
-                if ((t.item3 ?? 0) >= 0)
-                    queryParams.push(row[0][t.item3 ?? 0]);
-                if ((t.item4 ?? 0) >= 0)
-                    queryParams.push(row[0][t.item4 ?? 0]);
-                if ((t.item5 ?? 0) >= 0)
-                    queryParams.push(row[0][t.item5 ?? 0]);
-                toBeRefreshed.push({ mid: mid, queryParams: queryParams, midStarter: md?.id });
-            }
+        if (!d.onValueChanged_DynDataListsToBeRefreshed)
+            return;
+        let row = dynDlDataSource?.dtdResult?.rows?.filter(o => o[d.selectItemForValue ?? 0] == value);
+        if (!row || row.length <= 0)
+            return;
+        for (const t of d.onValueChanged_DynDataListsToBeRefreshed) {
+            let mid = t.item1;
+            let queryParams = [];
+            if ((t.item2 ?? 0) >= 0)
+                queryParams.push(row[0][t.item2 ?? 0]);
+            if ((t.item3 ?? 0) >= 0)
+                queryParams.push(row[0][t.item3 ?? 0]);
+            if ((t.item4 ?? 0) >= 0)
+                queryParams.push(row[0][t.item4 ?? 0]);
+            if ((t.item5 ?? 0) >= 0)
+                queryParams.push(row[0][t.item5 ?? 0]);
+            toBeRefreshed.push({ mid: mid, queryParams: queryParams, midStarter: md?.id });
         }
         return toBeRefreshed;
     };
@@ -180,7 +180,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                             if (mvd)
                                 mvd.isSelected = newValue;
                             onValueChanged?.(newValues);
-                        } }), _jsxs("div", { style: { position: 'relative', height: '100%', width: '100%', opacity: showNullValueCheckBoxes && item.isNull ? 0.4 : 1 }, children: [_jsx(TMMetadataEditor, { tid: TID, mid: item.mid, layoutMode: layoutMode, isLexProt: item.isLexProt, isSelected: isOpenDistinctValues && item.mid === selectedMID, isModifiedWhen: (item?.value ?? '') !== (metadataValuesOrig.find(m => m.mid === item.mid)?.value ?? ''), isReadOnly: showNullValueCheckBoxes ? item.isNull : undefined, isEditable: isEditable(item.mid) || item.isEditable, validationItems: editorValidationHandler(item.mid ?? 0), value: metadataValues.find(m => m.mid === item.mid)?.value, openChooserBySingleClick: openChooserBySingleClick, onValueChanged: (newValue) => onChangeHandler(newValue, item.mid ?? 0), onValueChange: (newValue) => onChangeHandler(newValue, item.mid ?? 0), containerElement: undefined, queryParamsDynDataList: dynDataListsToBeRefreshed.find(o => o.mid == item.mid)?.queryParams ?? [], onCascadeRefreshDynDataLists: (ddlToBeRefreshed) => {
+                        } }), _jsxs("div", { style: { position: 'relative', height: '100%', width: '100%', opacity: showNullValueCheckBoxes && item.isNull ? 0.4 : 1 }, children: [_jsx(TMMetadataEditor, { tid: TID, mid: item.mid, layoutMode: layoutMode, isLexProt: item.isLexProt, isSelected: isOpenDistinctValues && item.mid === selectedMID, isModifiedWhen: (item.value ?? '') !== (metadataValuesOrig.find(m => m.mid === item.mid)?.value ?? ''), isReadOnly: showNullValueCheckBoxes ? item.isNull : undefined, isEditable: isEditable(item.mid) || item.isEditable, validationItems: editorValidationHandler(item.mid ?? 0), value: item.value, openChooserBySingleClick: openChooserBySingleClick, onValueChanged: (newValue) => { onChangeHandler(newValue, item.mid ?? 0); }, onValueChange: (newValue) => { onChangeHandler(newValue, item.mid ?? 0); }, queryParamsDynDataList: dynDataListsToBeRefreshed.find(o => o.mid == item.mid)?.queryParams ?? [], onCascadeRefreshDynDataLists: (ddlToBeRefreshed) => {
                                 let newDynDataListsToBeRefreshed = [];
                                 for (const item of dynDataListsToBeRefreshed) {
                                     let index = ddlToBeRefreshed.findIndex(o => o.mid == item.mid || (o.mid == -1 && o.midStarter == item.midStarter));
@@ -234,7 +234,7 @@ const StyledMetadataValuesContainer = styled.div `
     display: flex; 
     flex-direction: column; 
     width: 100%; 
-    height: calc(100%); 
+    height: 100%; 
     overflow: auto;
     padding: 0 10px 10px 10px;
 `;

package/lib/components/index.d.ts

@@ -46,7 +46,6 @@ export * from './base/TMTab';
 export { default as TMHeader } from "./sidebar/TMHeader";
 export { default as TMSidebar } from "./sidebar/TMSidebar";
 export { default as TMSidebarItem } from "./sidebar/TMSidebarItem";
-export { default as TMSplitterLayout } from "./splitter/TMSplitterLayout";
 export { default as TMLoginForm } from "./forms/Login/TMLoginForm";
 export { default as TMChangePassword } from "./forms/Login/ChangePassword";
 export { default as TMSaveForm } from "./forms/TMSaveForm";

package/lib/components/index.js

@@ -53,7 +53,6 @@ export * from './base/TMTab';
 export { default as TMHeader } from "./sidebar/TMHeader";
 export { default as TMSidebar } from "./sidebar/TMSidebar";
 export { default as TMSidebarItem } from "./sidebar/TMSidebarItem";
-export { default as TMSplitterLayout } from "./splitter/TMSplitterLayout";
 //form
 export { default as TMLoginForm } from "./forms/Login/TMLoginForm";
 export { default as TMChangePassword } from "./forms/Login/ChangePassword";

package/lib/helper/SDKUI_Localizator.d.ts

@@ -107,6 +107,7 @@ export declare class SDKUI_Localizator {
     static get Error(): "Fehler" | "Error" | "Erreur" | "Erro" | "Errore";
     static get ErrorParsingFileContent(): "Fehler beim Parsen des Dateiinhalts. Stellen Sie sicher, dass die Datei im richtigen Format vorliegt." | "Error parsing the file content. Ensure the file is in the correct format." | "Error al analizar el contenido del archivo. Asegúrese de que el archivo esté en el formato correcto." | "Erreur lors de l'analyse du contenu du fichier. Assurez-vous que le fichier est dans le bon format." | "Erro ao analisar o conteúdo do arquivo. Certifique-se de que o arquivo está no formato correto." | "Errore durante l'analisi del contenuto del file. Assicurati che il file sia nel formato corretto.";
     static get EvaluateResult(): "Bewerten Sie das Ergebnis" | "Evaluate result" | "Valorar el resultado" | "Évalue les résultats" | "Avalia os resultados" | "Valuta il risultato";
+    static get ExpertMode(): "Expertenmodus" | "Expert mode" | "Modo experto" | "Mode expert" | "Modo especialista" | "Modalità esperto";
     static get Export(): "Exportieren" | "Export" | "Exportar" | "Exporter" | "Esporta";
     static get ExportMRN(): "Exportieren MRN" | "Export MRN" | "Exportar MRN" | "Exporter MRN";
     static get ExportMRNDayBack(): "Anzahl der Tage für die Exportdatenwiederherstellung (MRN)" | "Number of days for export data recovery (MRN)" | "Número de días para la recuperación de datos de exportación (MRN)" | "Nombre de jours pour la récupération des données d'exportation (MRN)" | "Número de dias para recuperação de dados de exportação (MRN)" | "Numero di giorni per il recupero dei dati di Export (MRN)";
@@ -315,6 +316,7 @@ export declare class SDKUI_Localizator {
     static get SortBy(): "Sortieren nach" | "Sort by" | "Ordenar por" | "Trier par" | "Ordinamento";
     static get Source(): "Ursprung" | "Source" | "Origen" | "Origem" | "Origine";
     static get SpecialOperators(): "Spezielle Operatoren" | "Special operators" | "Operadores especiales" | "Opérateurs spéciaux" | "Os operadores especiais" | "Operatori speciali";
+    static get StandardMode(): "Standardmodus" | "Standard mode" | "Modo estándar" | "Mode standard" | "Modo padrão" | "Modalità standard";
     static get Start(): "Zum Booten" | "Start" | "Arrancar" | "Pour démarrer" | "Para inicializar" | "Avviare";
     static get Statistics(): "Statistiken" | "Statistics" | "Estadística" | "Statistiques" | "Estatísticas" | "Statistiche";
     static get Summary(): "Zusammenfassung" | "Summary" | "Resumen" | "Résumé" | "Resumo" | "Riepilogo";

package/lib/helper/SDKUI_Localizator.js

@@ -1031,6 +1031,16 @@ export class SDKUI_Localizator {
             default: return "Valuta il risultato";
         }
     }
+    static get ExpertMode() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Expertenmodus";
+            case CultureIDs.En_US: return "Expert mode";
+            case CultureIDs.Es_ES: return "Modo experto";
+            case CultureIDs.Fr_FR: return "Mode expert";
+            case CultureIDs.Pt_PT: return "Modo especialista";
+            default: return "Modalità esperto";
+        }
+    }
     static get Export() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Exportieren";
@@ -3108,6 +3118,16 @@ export class SDKUI_Localizator {
             default: return "Operatori speciali";
         }
     }
+    static get StandardMode() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Standardmodus";
+            case CultureIDs.En_US: return "Standard mode";
+            case CultureIDs.Es_ES: return "Modo estándar";
+            case CultureIDs.Fr_FR: return "Mode standard";
+            case CultureIDs.Pt_PT: return "Modo padrão";
+            default: return "Modalità standard";
+        }
+    }
     static get Start() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Zum Booten";

package/lib/stories/TMHtmlEditor.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta;
+export default _default;
+export declare const HtmlEditor: any;

package/lib/stories/TMHtmlEditor.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { sortArgTypes } from './TMStoriesUtils';
+import TMHtmlEditor from '../components/editors/TMHtmlEditor';
+export default {
+    // The title will determine how the component appears in the sidebar of Storybook
+    title: 'Components/TMHtmlEditor',
+    // Specifies the component that is being documented in this story
+    component: TMHtmlEditor,
+    tags: ['autodocs'],
+    // Tags for categorizing the component within Storybook
+    argTypes: sortArgTypes({}),
+};
+/******* 1. Default Template and Default TMHtmlEditor *******/
+const Template = (args) => _jsx(TMHtmlEditor, { ...args });
+export const HtmlEditor = Template.bind({});
+HtmlEditor.args = {};

package/package.json

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

package/lib/components/splitter/TMSplitterLayout.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-interface ITMSplitterLayoutProps {
-    vertical?: boolean;
-    percentage?: boolean;
-    primaryIndex?: number;
-    primaryMinSize?: number;
-    secondaryInitialSize?: number;
-    secondaryMinSize?: number;
-    height?: string;
-    width?: string;
-    onDragStart?: () => void;
-    onDragEnd?: () => void;
-    onSecondaryPaneSizeChange?: (size: number) => void;
-    children?: React.ReactNode[];
-}
-declare const TMSplitterLayout: React.FC<ITMSplitterLayoutProps>;
-export default TMSplitterLayout;

package/lib/components/splitter/TMSplitterLayout.js

@@ -1,215 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Questo componente è stato realizzato partendo da :
-// https://www.npmjs.com/package/react-splitter-layout
-import React, { useState, useEffect, useRef } from 'react';
-import styled from 'styled-components';
-import { TMColors } from '../../utils/theme';
-const clearSelection = () => {
-    if (window.getSelection) {
-        const selection = window.getSelection();
-        if (selection) {
-            selection.removeAllRanges();
-        }
-        // } else if (document.selection) {
-        //   document.selection.empty();
-    }
-};
-const DEFAULT_SPLITTER_SIZE = 4;
-const StyledPane = styled.div.attrs(({ $isPrimary, $isVertical, $size, $unit }) => ({
-    style: {
-        flex: $isPrimary ? '1 1 auto' : '0 0 auto',
-        height: $isVertical && !$isPrimary ? `${$size}${$unit}` : '',
-        width: !$isVertical && !$isPrimary ? `${$size}${$unit}` : '',
-    }
-})) `
-  position: relative;
-  overflow: auto;
-`;
-const StyledContainer = styled.div `
-  position: absolute;
-  display: flex;
-  flex-direction: ${(props) => props.$isVertical ? 'column' : 'row'};
-  width: ${(props) => props.$width ?? '100%'};
-  height: ${(props) => props.$height ?? '100%'};
-  overflow: hidden;
-  ${(props) => props.$isResizing ? `cursor: ${props.$isVertical ? 'row-resize' : 'col-resize'}` : ''};
-`;
-const StyledSplitter = styled.div `
-  ${(props) => props.$isVertical ? '' : 'flex: 0 0 auto;'};
-  width: ${(props) => props.$isVertical ? '100%' : '2px'};
-  height: ${(props) => props.$isVertical ? '2px' : '100%'};
-  margin-left: ${(props) => props.$isVertical ? '0' : '2px'};
-  margin-right: ${(props) => props.$isVertical ? '0' : '2px'};
-  margin-top: ${(props) => props.$isVertical ? '2px' : '0'};
-  margin-bottom: ${(props) => props.$isVertical ? '2px' : '0'};
-  cursor: ${(props) => props.$isVertical ? 'row-resize' : 'col-resize'};
-  background-color: ${(props) => props.$isResizing ? TMColors.primary : '#ccc'};
-
-  &:hover {
-      color: ${TMColors.primary};
-  }
-`;
-const TMSplitterLayout = ({ vertical = false, percentage = false, primaryIndex = 0, primaryMinSize = 0, secondaryInitialSize, secondaryMinSize = 0, height = "100%", width = "100%", onDragStart, onDragEnd, onSecondaryPaneSizeChange, children = [], }) => {
-    const [secondaryPaneSize, setSecondaryPaneSize] = useState(0);
-    const [resizing, setResizing] = useState(false);
-    const containerRef = useRef(null);
-    const splitterRef = useRef(null);
-    const getSecondaryPaneSize = (containerRect, splitterRect, clientPosition, offsetMouse) => {
-        if (!containerRect || !splitterRect) {
-            return 0; // Return a default value or handle the case as appropriate
-        }
-        let totalSize;
-        let splitterSize;
-        let offset;
-        if (vertical) {
-            totalSize = containerRect.height;
-            splitterSize = splitterRect.height;
-            offset = clientPosition.top - containerRect.top;
-        }
-        else {
-            totalSize = containerRect.width;
-            splitterSize = splitterRect.width;
-            offset = clientPosition.left - containerRect.left;
-        }
-        if (offsetMouse) {
-            offset -= splitterSize / 2;
-        }
-        if (offset < 0) {
-            offset = 0;
-        }
-        else if (offset > totalSize - splitterSize) {
-            offset = totalSize - splitterSize;
-        }
-        let secondaryPaneSize;
-        if (primaryIndex === 1) {
-            secondaryPaneSize = offset;
-        }
-        else {
-            secondaryPaneSize = totalSize - splitterSize - offset;
-        }
-        let primaryPaneSize = totalSize - splitterSize - secondaryPaneSize;
-        if (percentage) {
-            secondaryPaneSize = (secondaryPaneSize * 100) / totalSize;
-            primaryPaneSize = (primaryPaneSize * 100) / totalSize;
-            splitterSize = (splitterSize * 100) / totalSize;
-            totalSize = 100;
-        }
-        let l_primaryMinSize = primaryMinSize;
-        let l_secondaryMinSize = secondaryMinSize;
-        if (primaryPaneSize < l_primaryMinSize) {
-            secondaryPaneSize = Math.max(secondaryPaneSize - (l_primaryMinSize - primaryPaneSize), 0);
-        }
-        else if (secondaryPaneSize < l_secondaryMinSize) {
-            secondaryPaneSize = Math.min(totalSize - splitterSize - l_primaryMinSize, l_secondaryMinSize);
-        }
-        return secondaryPaneSize;
-    };
-    const handleResize = () => {
-        if (splitterRef && !percentage) {
-            const containerRect = containerRef.current?.getBoundingClientRect();
-            const splitterRect = splitterRef.current?.getBoundingClientRect();
-            const secondaryPaneSize = getSecondaryPaneSize(containerRect, splitterRect, {
-                left: splitterRect?.left,
-                top: splitterRect?.top
-            }, false);
-            setSecondaryPaneSize(secondaryPaneSize);
-        }
-    };
-    const handleMouseMove = (e) => {
-        if (resizing) {
-            const containerRect = containerRef.current?.getBoundingClientRect();
-            const splitterRect = splitterRef.current?.getBoundingClientRect();
-            const secondaryPaneSize = getSecondaryPaneSize(containerRect, splitterRect, {
-                left: e.clientX,
-                top: e.clientY
-            }, true);
-            clearSelection();
-            setSecondaryPaneSize(secondaryPaneSize);
-        }
-    };
-    const handleTouchMove = (e) => {
-        handleMouseMove(e.changedTouches[0]);
-    };
-    const handleSplitterMouseDown = () => {
-        clearSelection();
-        setResizing(true);
-    };
-    const handleMouseUp = () => {
-        setResizing((prevResizing) => (prevResizing ? false : prevResizing));
-    };
-    useEffect(() => {
-        const secondaryPaneSizeCalculation = () => {
-            if (splitterRef.current && !percentage) {
-                const containerRect = containerRef.current?.getBoundingClientRect();
-                const splitterRect = splitterRef.current.getBoundingClientRect();
-                const newSecondaryPaneSize = getSecondaryPaneSize(containerRect, splitterRect, { left: splitterRect.left, top: splitterRect.top }, false);
-                setSecondaryPaneSize(newSecondaryPaneSize);
-            }
-        };
-        window.addEventListener('resize', handleResize);
-        let initialSecondaryPaneSize;
-        if (typeof secondaryInitialSize !== 'undefined') {
-            initialSecondaryPaneSize = secondaryInitialSize;
-        }
-        else {
-            const containerRect = containerRef.current?.getBoundingClientRect();
-            const splitterRect = splitterRef.current?.getBoundingClientRect() || { width: DEFAULT_SPLITTER_SIZE, height: DEFAULT_SPLITTER_SIZE };
-            initialSecondaryPaneSize = getSecondaryPaneSize(containerRect, splitterRect, {
-                left: containerRect.left + (containerRect.width - splitterRect.width) / 2,
-                top: containerRect.top + (containerRect.height - splitterRect.height) / 2,
-            }, false);
-        }
-        setSecondaryPaneSize(initialSecondaryPaneSize);
-        // Call the calculation function initially
-        secondaryPaneSizeCalculation();
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, [secondaryInitialSize, percentage]);
-    useEffect(() => {
-        if (secondaryPaneSize !== 0 && onSecondaryPaneSizeChange) {
-            onSecondaryPaneSizeChange(secondaryPaneSize);
-        }
-        if (resizing) {
-            if (onDragStart) {
-                onDragStart();
-            }
-        }
-        else if (onDragEnd) {
-            onDragEnd();
-        }
-    }, [secondaryPaneSize, resizing]);
-    const childrenArray = React.Children.toArray(children).slice(0, 2);
-    if (childrenArray.length === 0) {
-        childrenArray.push(_jsx("div", {}));
-    }
-    else if (childrenArray.length === 1) {
-        if (primaryIndex == 0)
-            childrenArray.push(_jsx("div", {}));
-        else
-            childrenArray.unshift(_jsx("div", {}));
-    }
-    const thereAreChildrenEmpty = () => {
-        return childrenArray.length == 2 && (elementIsEmpty(childrenArray[0]) || elementIsEmpty(childrenArray[1]));
-    };
-    const elementIsEmpty = (child) => {
-        return Boolean(Object.keys(child.props).length === 0);
-    };
-    const wrappedChildren = childrenArray.map((child, i) => {
-        let primary = true;
-        let size = null;
-        let unit = percentage ? '%' : 'px';
-        if (childrenArray.length > 1 && i !== primaryIndex) {
-            primary = false;
-            size = secondaryPaneSize;
-        }
-        if (elementIsEmpty(child)) {
-            size = 0;
-            unit = "%";
-        }
-        return (_jsx(StyledPane, { "$isPrimary": primary, "$isVertical": vertical, "$size": size || 0, "$unit": percentage ? '%' : 'px', children: child }));
-    });
-    return (_jsxs(StyledContainer, { "$isResizing": resizing, "$isVertical": vertical, "$height": height, "$width": width, ref: containerRef, onMouseMove: handleMouseMove, onTouchMove: handleTouchMove, onMouseUp: handleMouseUp, onTouchEnd: handleMouseUp, children: [wrappedChildren[0], !thereAreChildrenEmpty() &&
-                _jsx(StyledSplitter, { "$isResizing": resizing, "$isVertical": vertical, role: "separator", ref: splitterRef, onMouseDown: handleSplitterMouseDown, onTouchStart: handleSplitterMouseDown }), wrappedChildren.length > 1 && wrappedChildren[1]] }));
-};
-export default TMSplitterLayout;