@topconsultnpm/sdkui-react 6.19.0-dev1.61 → 6.19.0-dev1.63

package/lib/components/base/TMPopUp.js

@@ -152,24 +152,11 @@ const ResponsiveMessageText = styled.div `
         line-height: 1.1;
     }
 `;
-const ResponsiveButton = styled(TMButton) `
-    font-size: ${props => props.fontSize || 'clamp(12px, 2vw, 1.1rem)'} !important;
-    padding: clamp(2px, 1vw, 8px) clamp(4px, 2vw, 12px) !important;
-    min-width: clamp(30px, 10vw, 60px) !important;
-    white-space: nowrap !important;
-    
-    @media (max-width: 200px) {
-        padding: 2px 4px !important;
-        min-width: 25px !important;
-        font-size: 8px !important;
-    }
-    
-    @media (max-width: 150px) {
-        padding: 1px 3px !important;
-        min-width: 20px !important;
-        font-size: 7px !important;
-    }
-`;
+// ResponsiveButton wrapper component to avoid circular dependency
+const ResponsiveButton = (props) => {
+    const { fontSize: customFontSize, ...otherProps } = props;
+    return _jsx(TMButton, { fontSize: customFontSize || 'clamp(12px, 2vw, 1.1rem)', padding: "clamp(2px, 1vw, 8px) clamp(4px, 2vw, 12px)", width: "clamp(30px, 10vw, 60px)", ...otherProps });
+};
 const ResponsiveMessageBody = ({ message, isMobile, MessageToolbar, showToppy }) => {
     return (_jsxs(ResponsiveMessageContainer, { children: [_jsxs(ResponsiveMessageContent, { "$isMobile": isMobile, children: [showToppy && _jsx(ResponsiveToppyImage, { "$isMobile": isMobile, src: toppy, alt: "Toppy" }), _jsx(ResponsiveMessageText, { "$isMobile": isMobile, children: typeof message === 'string' ? _jsx(Message, { msg: message }) : message })] }), _jsx(MessageToolbar, {})] }));
 };

package/lib/components/features/tasks/TMTaskForm.d.ts

@@ -16,6 +16,7 @@ export interface TMTaskFormProps {
     visualizedTasks: Array<TaskDescriptor>;
     currentTask: TaskDescriptor | null;
     setCurrentTask?: React.Dispatch<React.SetStateAction<TaskDescriptor | null>>;
+    isContextualCreate?: boolean;
     selectedRowKeys: Array<number>;
     handleFocusedRowKeyChange?: (row: TaskDescriptor | undefined) => void;
     onStatusChanged?: () => void;

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

@@ -62,26 +62,30 @@ const TMTaskForm = (props) => {
     const { refreshWorkflowApprove } = useWorkflowApprove();
     const validator = async (taskDescriptor) => { return await taskValidatorAsync(taskDescriptor); };
     // Destructure the props object to extract individual properties
-    const { id, title, isModal, formMode, visualizedTasks, editTaskCallback, currentTask, setCurrentTask, selectedRowKeys, handleFocusedRowKeyChange, onStatusChanged, onSaved, onClose, onCancel, taskContext, startDate, endDate, showBackButton = true, hasNavigation = true, width = "100%", height = "100%", usersList, onOpenS4TViewerRequest, s4TViewerDialogComponent, allTasks, getAllTasks, deleteTaskByIdsCallback, addTaskCallback, handleNavigateToWGs, handleNavigateToDossiers } = props;
+    const { id, title, isModal, formMode, visualizedTasks, editTaskCallback, currentTask, setCurrentTask, isContextualCreate = false, selectedRowKeys, handleFocusedRowKeyChange, onStatusChanged, onSaved, onClose, onCancel, taskContext, startDate, endDate, showBackButton = true, hasNavigation = true, width = "100%", height = "100%", usersList, onOpenS4TViewerRequest, s4TViewerDialogComponent, allTasks, getAllTasks, deleteTaskByIdsCallback, addTaskCallback, handleNavigateToWGs, handleNavigateToDossiers } = props;
     const sfo = new SaveFormOptions();
     sfo.objClass = ObjectClasses.Task;
     const customizeFormData = (task) => {
-        if (taskContext?.document && formMode === FormModes.Create) {
+        if (!isContextualCreate)
+            return task;
+        if (formMode !== FormModes.Create)
+            return task;
+        if (taskContext?.document) {
             task.pdG = PdGs.DT;
             task.iD1 = taskContext.document.tid;
             task.iD2 = taskContext.document.did;
         }
-        else if (taskContext?.workingGroup && formMode === FormModes.Create) {
+        else if (taskContext?.workingGroup) {
             task.pdG = PdGs.WG;
             task.iD1 = taskContext.workingGroup.id;
         }
-        else if (taskContext?.dossier && formMode === FormModes.Create) {
+        else if (taskContext?.dossier) {
             task.pdG = PdGs.CF;
             task.iD1 = taskContext.dossier.id;
             if (currentTask)
                 task.name = currentTask.name;
         }
-        else if (taskContext?.workItem && formMode === FormModes.Create) {
+        else if (taskContext?.workItem) {
             task.pdG = PdGs.DT;
             task.iD1 = taskContext.workItem.tid;
             task.iD2 = taskContext.workItem.did;
@@ -315,7 +319,7 @@ const TMTaskForm = (props) => {
                                         && !areDifferentIDs(formData?.toID, SDK_Globals.tmSession?.SessionDescr?.userID))
                                         && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs("div", { style: { width: '100%', display: 'flex', alignItems: 'center', color: "#2559A5" }, children: [_jsx("i", { className: "dx-icon-info", style: { fontSize: 20 } }), "\u00A0", _jsx("span", { children: SDKUI_Localizator.PersonalTaskAssignmentMessage })] }) }), (!areDifferentIDs(formData?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID)
                                         && areDifferentIDs(formData?.toID, SDK_Globals.tmSession?.SessionDescr?.userID))
-                                        && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs("div", { style: { width: '100%', display: 'flex', alignItems: 'center', color: "#2559A5" }, children: [_jsx("i", { className: "dx-icon-info", style: { fontSize: 20 } }), "\u00A0", _jsx("span", { children: SDKUI_Localizator.TaskAssignedToUserMessage.replaceParams(users.find(user => user.id === formData?.toID)?.name ?? '-') })] }) }), (formMode === FormModes.Create && taskContext && taskContext.workingGroup && taskContext.workingGroup.id) && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%', display: 'flex', alignItems: 'center', color: "#000", marginTop: 10 }, children: _jsxs(TMTooltip, { content: getOriginLabel(PdGs.WG, taskContext.workingGroup.name), children: [_jsx("span", { children: getPdgsIconMap().get(PdGs.WG) }), "\u00A0", _jsx("span", { children: getOriginLabel(PdGs.WG, taskContext.workingGroup.name) })] }) }) }), (formMode === FormModes.Create && taskContext && taskContext.dossier && taskContext.dossier.id) && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%', display: 'flex', alignItems: 'center', color: "#000", marginTop: 10 }, children: _jsxs(TMTooltip, { content: getOriginLabel(PdGs.CF, taskContext.dossier.name), children: [_jsx("span", { children: getPdgsIconMap().get(PdGs.CF) }), "\u00A0", _jsx("span", { children: getOriginLabel(PdGs.CF, taskContext.dossier.name) })] }) }) }), (formMode === FormModes.Create && taskContext && taskContext.document && taskContext.document.tid && taskContext.document.did && taskContext.document.name) && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%', display: 'flex', alignItems: 'center', color: "#000", marginTop: 10 }, children: _jsxs(TMTooltip, { content: getOriginLabel(PdGs.DT, taskContext.document.name), children: [_jsx("span", { children: getPdgsIconMap().get(PdGs.DT) }), "\u00A0", _jsx("span", { children: getOriginLabel(PdGs.DT, taskContext.document.name) })] }) }) }), (formMode === FormModes.Create && taskContext && taskContext.workItem && taskContext.workItem.tid && taskContext.workItem.did && taskContext.workItem.name) && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%', display: 'flex', alignItems: 'center', color: "#000", marginTop: 10 }, children: _jsxs(TMTooltip, { content: getOriginLabel(PdGs.DT, taskContext.workItem.name), children: [_jsx("span", { children: getPdgsIconMap().get(PdGs.DT) }), "\u00A0", _jsx("span", { children: getOriginLabel(PdGs.DT, taskContext.workItem.name) })] }) }) }), formMode === FormModes.Update && formData?.pdG && formData?.iD1Name && (_jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => (_jsx("div", { style: {
+                                        && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs("div", { style: { width: '100%', display: 'flex', alignItems: 'center', color: "#2559A5" }, children: [_jsx("i", { className: "dx-icon-info", style: { fontSize: 20 } }), "\u00A0", _jsx("span", { children: SDKUI_Localizator.TaskAssignedToUserMessage.replaceParams(users.find(user => user.id === formData?.toID)?.name ?? '-') })] }) }), (formMode === FormModes.Create && isContextualCreate && taskContext && taskContext.workingGroup && taskContext.workingGroup.id) && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%', display: 'flex', alignItems: 'center', color: "#000", marginTop: 10 }, children: _jsxs(TMTooltip, { content: getOriginLabel(PdGs.WG, taskContext.workingGroup.name), children: [_jsx("span", { children: getPdgsIconMap().get(PdGs.WG) }), "\u00A0", _jsx("span", { children: getOriginLabel(PdGs.WG, taskContext.workingGroup.name) })] }) }) }), (formMode === FormModes.Create && isContextualCreate && taskContext && taskContext.dossier && taskContext.dossier.id) && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%', display: 'flex', alignItems: 'center', color: "#000", marginTop: 10 }, children: _jsxs(TMTooltip, { content: getOriginLabel(PdGs.CF, taskContext.dossier.name), children: [_jsx("span", { children: getPdgsIconMap().get(PdGs.CF) }), "\u00A0", _jsx("span", { children: getOriginLabel(PdGs.CF, taskContext.dossier.name) })] }) }) }), (formMode === FormModes.Create && isContextualCreate && taskContext && taskContext.document && taskContext.document.tid && taskContext.document.did && taskContext.document.name) && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%', display: 'flex', alignItems: 'center', color: "#000", marginTop: 10 }, children: _jsxs(TMTooltip, { content: getOriginLabel(PdGs.DT, taskContext.document.name), children: [_jsx("span", { children: getPdgsIconMap().get(PdGs.DT) }), "\u00A0", _jsx("span", { children: getOriginLabel(PdGs.DT, taskContext.document.name) })] }) }) }), (formMode === FormModes.Create && isContextualCreate && taskContext && taskContext.workItem && taskContext.workItem.tid && taskContext.workItem.did && taskContext.workItem.name) && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%', display: 'flex', alignItems: 'center', color: "#000", marginTop: 10 }, children: _jsxs(TMTooltip, { content: getOriginLabel(PdGs.DT, taskContext.workItem.name), children: [_jsx("span", { children: getPdgsIconMap().get(PdGs.DT) }), "\u00A0", _jsx("span", { children: getOriginLabel(PdGs.DT, taskContext.workItem.name) })] }) }) }), formMode === FormModes.Update && formData?.pdG && formData?.iD1Name && (_jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => (_jsx("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'row',
                                                 width: '100%',

package/lib/components/features/tasks/TMTasksUtils.d.ts

@@ -99,7 +99,7 @@ export declare const gotoPDGExtendedLabel: (gotoVisible: boolean, pdg: PdGs, iD1
 export declare const convertToSchedulerAppointments: (tasks: Array<TaskDescriptor>) => Array<Appointment>;
 export declare const formatDate: (date: Date) => string;
 export declare const areDifferentIDs: (fromID: number | undefined, userID: number | undefined) => boolean;
-export declare const createTasksMenuItems: (taskDescriptor: TaskDescriptor | undefined, showId: boolean, setShowId: React.Dispatch<React.SetStateAction<boolean>>, showSearch: boolean, setShowSearch: React.Dispatch<React.SetStateAction<boolean>>, openTaskForm: (formMode: FormModes, task?: TaskDescriptor) => void, editTaskCallback: (rowId: number | undefined) => void, duplicateTaskCallback: (rowId: number | undefined) => void, onDeleteCallback: (rowIds: Array<number>) => void, markAsStatus: (rowIds: Array<number>, status: Task_States) => void, getAllTasks: () => Promise<void>, fromWG: boolean, showContextualWG: boolean, setShowContextualWG: React.Dispatch<React.SetStateAction<boolean>>, fromDossier: boolean, showContextualDossier: boolean, setShowContextualDossier: React.Dispatch<React.SetStateAction<boolean>>, fromDocument: boolean, showContextualDocument: boolean, setShowContextualDocument: React.Dispatch<React.SetStateAction<boolean>>, showGoToToday: boolean, handleGoToToday?: () => void, fromDatagrid?: boolean) => Array<TMDataGridContextMenuItem>;
+export declare const createTasksMenuItems: (taskDescriptor: TaskDescriptor | undefined, showId: boolean, setShowId: React.Dispatch<React.SetStateAction<boolean>>, showSearch: boolean, setShowSearch: React.Dispatch<React.SetStateAction<boolean>>, openTaskForm: (formMode: FormModes, task?: TaskDescriptor, isContextual?: boolean) => void, openEditTaskForm: (rowId: number | undefined) => void, openDuplicateTaskForm: (rowId: number | undefined) => void, onDeleteCallback: (rowIds: Array<number>) => void, markAsStatus: (rowIds: Array<number>, status: Task_States) => void, getAllTasks: () => Promise<void>, fromWG: boolean, showContextualWG: boolean, setShowContextualWG: React.Dispatch<React.SetStateAction<boolean>>, fromDossier: boolean, showContextualDossier: boolean, setShowContextualDossier: React.Dispatch<React.SetStateAction<boolean>>, fromDocument: boolean, showContextualDocument: boolean, setShowContextualDocument: React.Dispatch<React.SetStateAction<boolean>>, showGoToToday: boolean, handleGoToToday?: () => void, fromDatagrid?: boolean) => Array<TMDataGridContextMenuItem>;
 export declare const checkIfNew: (fromId: number | undefined, isNew: number | undefined) => boolean;
 export declare const getNewTaskCount: (tasks: Array<TaskDescriptor>) => number;
 export declare const isTaskAssignedToAnotherUser: (task: TaskDescriptor) => boolean;

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

@@ -381,7 +381,7 @@ export const areDifferentIDs = (fromID, userID) => {
     }
     return false;
 };
-export const createTasksMenuItems = (taskDescriptor, showId, setShowId, showSearch, setShowSearch, openTaskForm, editTaskCallback, duplicateTaskCallback, onDeleteCallback, markAsStatus, getAllTasks, fromWG, showContextualWG, setShowContextualWG, fromDossier, showContextualDossier, setShowContextualDossier, fromDocument, showContextualDocument, setShowContextualDocument, showGoToToday, handleGoToToday, fromDatagrid = true) => {
+export const createTasksMenuItems = (taskDescriptor, showId, setShowId, showSearch, setShowSearch, openTaskForm, openEditTaskForm, openDuplicateTaskForm, onDeleteCallback, markAsStatus, getAllTasks, fromWG, showContextualWG, setShowContextualWG, fromDossier, showContextualDossier, setShowContextualDossier, fromDocument, showContextualDocument, setShowContextualDocument, showGoToToday, handleGoToToday, fromDatagrid = true) => {
     const isTaskDescriptorDefined = taskDescriptor !== undefined;
     const isTaskFromAnotherUser = isTaskDescriptorDefined && areDifferentIDs(taskDescriptor.fromID, SDK_Globals.tmSession?.SessionDescr?.userID);
     const menuItems = [
@@ -389,26 +389,26 @@ export const createTasksMenuItems = (taskDescriptor, showId, setShowId, showSear
             id: 'createContextualTask',
             text: SDKUI_Localizator.CreateContextualTask,
             icon: 'plus',
-            onClick: () => { openTaskForm(FormModes.Create); },
+            onClick: () => { openTaskForm(FormModes.Create, undefined, true); },
             disabled: false
         },
         {
             text: SDKUI_Localizator.Create,
             icon: 'plus',
-            onClick: () => { openTaskForm(FormModes.Create); },
+            onClick: () => { openTaskForm(FormModes.Create, undefined, false); },
             disabled: false
         },
         {
             text: SDKUI_Localizator.Update,
             icon: 'edit',
-            onClick: editTaskCallback,
+            onClick: openEditTaskForm,
             operationType: 'singleRow',
             disabled: fromDatagrid ? false : !isTaskDescriptorDefined
         },
         {
             text: SDKUI_Localizator.Duplicate,
             icon: 'copy',
-            onClick: duplicateTaskCallback,
+            onClick: openDuplicateTaskForm,
             operationType: 'singleRow',
             disabled: fromDatagrid ? isTaskFromAnotherUser : !isTaskDescriptorDefined || isTaskFromAnotherUser
         },

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

@@ -52,6 +52,7 @@ const TMTasksView = (props) => {
     const [waitPanelValuePrimary, setWaitPanelValuePrimary] = useState(0);
     // State variable to define the maximum value for the primary progress indicator in the wait panel.
     const [waitPanelMaxValuePrimary, setWaitPanelMaxValuePrimary] = useState(0);
+    const [isContextualCreate, setIsContextualCreate] = useState(false);
     // This function open the task form for editing a selected task
     const editTaskAgendaCallback = (rowId) => {
         if (rowId === undefined)
@@ -78,8 +79,7 @@ const TMTasksView = (props) => {
     const agendaCalendarItems = useCallback(() => {
         const taskDescriptor = visualizedTasks.find(task => task.id === focusedRowKey);
         return [
-            ...createTasksMenuItems(taskDescriptor, showId, setShowId, showSearch, setShowSearch, () => { }, // openTaskForm,
-            () => { if (focusedRowKey)
+            ...createTasksMenuItems(taskDescriptor, showId, setShowId, showSearch, setShowSearch, () => { openTaskFormCallback(FormModes.Create); }, () => { if (focusedRowKey)
                 editTaskAgendaCallback(focusedRowKey); }, () => { if (focusedRowKey)
                 onDuplicateAgendaCallback(focusedRowKey); }, () => { if (focusedRowKey)
                 onDeleteCallback([focusedRowKey]); }, (rowIds, status) => { if (focusedRowKey)
@@ -103,9 +103,10 @@ const TMTasksView = (props) => {
         setShowTaskForm(false);
     }, []);
     // Callback function to open the task form in a specific mode
-    const openTaskFormCallback = useCallback((mode, task) => {
+    const openTaskFormCallback = useCallback((mode, task, isContextual) => {
         setFormMode(mode);
         setShowTaskForm(true);
+        setIsContextualCreate(isContextual ?? false);
         // If a task is provided, set it as the current task to be processed
         if (task)
             setCurrentTask(task);
@@ -308,7 +309,7 @@ const TMTasksView = (props) => {
             return;
         if (e.target === 'content') {
             e.items = e.items || [];
-            e.items = createTasksMenuItems(e.row?.data, showId, setShowId, showSearch, setShowSearch, () => { openTaskFormCallback(FormModes.Create); }, () => { openTaskFormCallback(FormModes.Update, e.row?.data); }, () => { openTaskFormCallback(FormModes.Duplicate, e.row?.data); }, onDeleteCallback, markAsStatus, getAllTasks, taskContext?.workingGroup?.id !== undefined, showContextualWG, setShowContextualWG, taskContext?.dossier?.id !== undefined, showContextualDossier, setShowContextualDossier, taskContext?.document?.tid !== undefined && taskContext?.document?.did !== undefined, showContextualDocument, setShowContextualDocument, false);
+            e.items = createTasksMenuItems(e.row?.data, showId, setShowId, showSearch, setShowSearch, openTaskFormCallback, () => { openTaskFormCallback(FormModes.Update, e.row?.data); }, () => { openTaskFormCallback(FormModes.Duplicate, e.row?.data); }, onDeleteCallback, markAsStatus, getAllTasks, taskContext?.workingGroup?.id !== undefined, showContextualWG, setShowContextualWG, taskContext?.dossier?.id !== undefined, showContextualDossier, setShowContextualDossier, taskContext?.document?.tid !== undefined && taskContext?.document?.did !== undefined, showContextualDocument, setShowContextualDocument, false);
         }
     };
     const RenderCustomHeader = ({ data }) => { return _jsx("p", { style: { color: TEXT_NOT_SELECTED_COLOR }, children: data.column.caption }); };
@@ -530,7 +531,7 @@ const TMTasksView = (props) => {
                                 _jsxs(_Fragment, { children: [activeComponent === TaskView.CALENDAR_TASK && getFromOrToCalendarElement(visualizedTasks, false, true), activeComponent === TaskView.AGENDA_TASK && getFromOrToAgendaElement(visualizedTasks, false, true), activeComponent === TaskView.LIST_TASK && getFromOrToDatagridElement(visualizedTasks, false, true)] }) : '' }), _jsx(Item, { title: SDKUI_Localizator.AllFemale, icon: "fields", tabRender: (params) => {
                                 return _jsxs(StyledTabItem, { "$isSelected": activeTabIndex === AssignedTab.All, children: [_jsxs(TMTooltip, { content: SDKUI_Localizator.AllFemale, children: [_jsx("i", { className: `dx-icon-${params.icon}` }), "\u00A0", params.title, " ", (allTasksFilteredCount > 0) ? `(${allTasksFilteredCount})` : ''] }), newTaskCount > 0 && (_jsx(TMTooltip, { content: SDKUI_Localizator.NewAssignedActivitiesNumber + ": " + newTaskCount, children: _jsx(TMCountBadge, { children: newTaskCount }) }))] });
                             }, render: () => activeTabIndex === AssignedTab.All ?
-                                _jsxs(_Fragment, { children: [activeComponent === TaskView.CALENDAR_TASK && getFromOrToCalendarElement(visualizedTasks, true, true), activeComponent === TaskView.AGENDA_TASK && getFromOrToAgendaElement(visualizedTasks, true, true), activeComponent === TaskView.LIST_TASK && getFromOrToDatagridElement(visualizedTasks, true, true)] }) : '' })] }) }), showTaskForm && _jsx(TMTaskForm, { id: currentTask?.id ?? -1, width: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), height: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), title: SDKUI_Localizator.Widget_Activities, isModal: true, formMode: formMode ?? FormModes.Create, visualizedTasks: visualizedTasks, currentTask: currentTask, setCurrentTask: setCurrentTask, selectedRowKeys: selectedRowKeys, handleFocusedRowKeyChange: handleFocusedRowChange, taskContext: taskContext, usersList: usersList, onStatusChanged: () => { }, onClose: closeTaskFormCallback, onCancel: closeTaskFormCallback, showBackButton: false, onSaved: onSavedCallback, startDate: calendarStartDate, endDate: calendarEndDate, onOpenS4TViewerRequest: onOpenS4TViewerRequest, s4TViewerDialogComponent: s4TViewerDialogComponent, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGsWrapper, handleNavigateToDossiers: handleNavigateToDossiersWrapper }), _jsx("button", { style: {
+                                _jsxs(_Fragment, { children: [activeComponent === TaskView.CALENDAR_TASK && getFromOrToCalendarElement(visualizedTasks, true, true), activeComponent === TaskView.AGENDA_TASK && getFromOrToAgendaElement(visualizedTasks, true, true), activeComponent === TaskView.LIST_TASK && getFromOrToDatagridElement(visualizedTasks, true, true)] }) : '' })] }) }), showTaskForm && _jsx(TMTaskForm, { id: currentTask?.id ?? -1, width: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), height: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), title: SDKUI_Localizator.Widget_Activities, isModal: true, formMode: formMode ?? FormModes.Create, visualizedTasks: visualizedTasks, currentTask: currentTask, setCurrentTask: setCurrentTask, isContextualCreate: isContextualCreate, selectedRowKeys: selectedRowKeys, handleFocusedRowKeyChange: handleFocusedRowChange, taskContext: taskContext, usersList: usersList, onStatusChanged: () => { }, onClose: closeTaskFormCallback, onCancel: closeTaskFormCallback, showBackButton: false, onSaved: onSavedCallback, startDate: calendarStartDate, endDate: calendarEndDate, onOpenS4TViewerRequest: onOpenS4TViewerRequest, s4TViewerDialogComponent: s4TViewerDialogComponent, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGsWrapper, handleNavigateToDossiers: handleNavigateToDossiersWrapper }), _jsx("button", { style: {
                     position: 'absolute',
                     bottom: hasFilters ? '90px' : '18px',
                     right: '20px',

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

@@ -65,9 +65,10 @@ const FloatingMenu = styled.div `
   transform: translateY(5px);
   align-items: center; /* Centra i pulsanti orizzontalmente */
 `;
-const FloatingMenuButton = styled(TMButton) `
-  width: 100%; /* Rende i pulsanti interni larghi quanto il menu */
-`;
+// FloatingMenuButton wrapper component to avoid circular dependency
+const FloatingMenuButton = (props) => {
+    return _jsx(TMButton, { width: "100%", ...props });
+};
 const RecipientList = ({ recipients, title, tid, qd, onAdd, onRemove, onQDChange }) => {
     const [uiState, setUiState] = useState({
         isMenuOpen: false,

package/package.json

@@ -1,54 +1,54 @@
 {
-    "name": "@topconsultnpm/sdkui-react",
-    "version": "6.19.0-dev1.61",
-    "description": "",
-    "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1",
-        "clean": "powershell Remove-Item lib/ -recurse",
-        "copy-files": "copyfiles -u 1 src/assets/*.* src/assets/ImageLibrary/*.* src/assets/thumbnails/*.* src/assets/IconsS4t/*.* src/assets/Metadata/*.* src/css/tm-sdkui.css lib/",
-        "tm-build": "npm run clean && tsc && npm run copy-files",
-        "tm-watch": "tsc -w",
-        "tm-publish": "npm publish --tag latest",
-        "storybook": "storybook dev -p 6006",
-        "build-storybook": "storybook build"
-    },
-    "author": "TopConsult",
-    "license": "ISC",
-    "devDependencies": {
-        "@chromatic-com/storybook": "^4.0.1",
-        "@storybook/addon-docs": "^9.0.18",
-        "@storybook/addon-onboarding": "^9.0.18",
-        "@storybook/react-vite": "^9.0.18",
-        "@types/htmlparser2": "^3.10.7",
-        "@types/node": "^20.2.5",
-        "@types/react": "^18.2.7",
-        "@types/react-dom": "^18.2.4",
-        "copyfiles": "^2.4.1",
-        "esbuild": "^0.25.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "storybook": "^9.0.18",
-        "typescript": "^5.9.3",
-        "vite": "^6.1.1"
-    },
-    "main": "dist/cjs/index.js",
-    "types": "./index.d.ts",
-    "module": "lib/esm/index.js",
-    "files": [
-        "dist",
-        "lib"
-    ],
-    "dependencies": {
-        "@topconsultnpm/sdk-ts": "6.19.0-dev1.11",
-        "buffer": "^6.0.3",
-        "devextreme": "25.1.4",
-        "devextreme-react": "25.1.4",
-        "exceljs": "^4.4.0",
-        "htmlparser2": "^10.0.0",
-        "react-router-dom": "^6.15.0",
-        "styled-components": "^6.1.1"
-    },
-    "overrides": {
-        "esbuild": "^0.25.0"
-    }
+  "name": "@topconsultnpm/sdkui-react",
+  "version": "6.19.0-dev1.63",
+  "description": "",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "clean": "powershell Remove-Item lib/ -recurse",
+    "copy-files": "copyfiles -u 1 src/assets/*.* src/assets/ImageLibrary/*.* src/assets/thumbnails/*.* src/assets/IconsS4t/*.* src/assets/Metadata/*.* src/css/tm-sdkui.css lib/",
+    "tm-build": "npm run clean && tsc && npm run copy-files",
+    "tm-watch": "tsc -w",
+    "tm-publish": "npm publish --tag latest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "author": "TopConsult",
+  "license": "ISC",
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.3",
+    "@storybook/addon-docs": "^10.1.0",
+    "@storybook/addon-onboarding": "^10.1.0",
+    "@storybook/react-vite": "^10.1.0",
+    "@types/htmlparser2": "^3.10.7",
+    "@types/node": "^20.2.5",
+    "@types/react": "^18.2.7",
+    "@types/react-dom": "^18.2.4",
+    "copyfiles": "^2.4.1",
+    "esbuild": "^0.25.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^10.1.0",
+    "typescript": "^5.9.3",
+    "vite": "^6.1.1"
+  },
+  "main": "dist/cjs/index.js",
+  "types": "./index.d.ts",
+  "module": "lib/esm/index.js",
+  "files": [
+    "dist",
+    "lib"
+  ],
+  "dependencies": {
+    "@topconsultnpm/sdk-ts": "6.19.0-dev1.11",
+    "buffer": "^6.0.3",
+    "devextreme": "25.1.4",
+    "devextreme-react": "25.1.4",
+    "exceljs": "^4.4.0",
+    "htmlparser2": "^10.0.0",
+    "react-router-dom": "^6.15.0",
+    "styled-components": "^6.1.1"
+  },
+  "overrides": {
+    "esbuild": "^0.25.0"
+  }
 }

package/lib/stories/TMButton.stories.d.ts

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

package/lib/stories/TMButton.stories.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import TMButton from '../components/base/TMButton';
-import { TMDeviceProvider } from '../components/base/TMDeviceProvider';
-import { IconCheck } from '../helper';
-import { sortArgTypes } from './TMStoriesUtils';
-export default {
-    // The title will determine how the component appears in the sidebar of Storybook
-    title: 'Components/TMButton',
-    // Specifies the component that is being documented in this story
-    component: TMButton,
-    decorators: [(Story) => (_jsxs(TMDeviceProvider, { children: [" ", _jsx(Story, {}), " "] })),],
-    tags: ['autodocs'],
-    // Tags for categorizing the component within Storybook
-    argTypes: sortArgTypes({
-        color: { description: 'The color of the button' },
-    }),
-};
-/******* 1. Default Template and Default TMButton *******/
-const Template = (args) => _jsx(TMButton, { ...args });
-export const NormalTMButton = Template.bind({});
-NormalTMButton.args = {
-    caption: 'Click Me!',
-    btnStyle: 'normal',
-    icon: _jsx(IconCheck, {}),
-    width: '120px',
-    height: '40px',
-    showTooltip: false,
-    onClick: () => alert('NormalButton clicked!')
-};

package/lib/stories/TMDataGrid.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta } from '@storybook/react-vite';
-import 'devextreme/dist/css/dx.fluent.blue.light.compact.css';
-declare const _default: Meta;
-export default _default;
-export declare const DefaultTMDatagrid: any;
-/******* 2. Default Template and Datagrid with Search Panel to Right *******/
-export declare const TMDatagridWithSearchPanelToRight: any;
-/******* 3. Default Template and Datagrid with Counter enable *******/
-export declare const TMDatagridWithCounters: any;

package/lib/stories/TMDataGrid.stories.js

@@ -1,310 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from 'react';
-import { TMDataGrid, TMDeviceProvider } from '../components';
-import { TMDataGridPageSize } from '../components/base/TMDataGrid';
-// Importing the DevExtreme library's Material Design theme in light blue color scheme
-import 'devextreme/dist/css/dx.fluent.blue.light.compact.css';
-// Importing custom styles for the tm-sdkui library
-// import '/lib/css/tm-sdkui.css';
-import { sortArgTypes } from './TMStoriesUtils';
-const generateData = (count) => {
-    const data = [];
-    for (let i = 1; i <= count; i++) {
-        data.push({
-            id: i,
-            name: `User ${i}`,
-            email: `user${i}@example.com`,
-            phone: `+1-555-000${i % 1000}`,
-            city: `City ${i % 100}`,
-            age: 20 + (i % 50),
-            gender: i % 2 === 0 ? "Male" : "Female",
-            address: `Street ${i}`,
-            country: `Country ${i % 5}`,
-            zipCode: `12345-${i % 100}`,
-            state: `State ${i % 10}`,
-            occupation: `Occupation ${i % 3}`,
-            company: `Company ${i % 10}`,
-            socialSecurityNumber: `SSN-${i % 10000}`,
-            birthDate: `199${(i % 30) + 1}-01-01`,
-            maritalStatus: i % 2 === 0 ? "Single" : "Married",
-            hobby: `Hobby ${i % 5}`,
-            profilePicture: `https://example.com/pic${i}.jpg`,
-            lastLogin: `2025-02-0${i % 10}`,
-            creditScore: 600 + (i % 400),
-            loyaltyPoints: i % 1000,
-            referralCode: `REF${i % 1000}`,
-            preferredLanguage: `Language ${i % 5}`,
-            subscriptionStatus: i % 2 === 0 ? "Active" : "Inactive",
-            device: `Device ${i % 5}`,
-            lastPurchaseDate: `2025-01-0${i % 10}`,
-            shippingAddress: `Address ${i}`,
-            preferredPaymentMethod: `Payment ${i % 3}`,
-            totalSpent: 100 + (i * 10),
-            referralCount: i % 50,
-            notes: `Notes about user ${i}`,
-            lastUpdated: `2025-02-0${i % 10}`,
-            emergencyContact: `Emergency ${i % 5}`,
-            jobTitle: `Job ${i % 10}`,
-            vehicle: `Vehicle ${i % 4}`,
-            bloodType: i % 4 === 0 ? "O" : i % 4 === 1 ? "A" : i % 4 === 2 ? "B" : "AB",
-            pet: i % 2 === 0 ? "Dog" : "Cat",
-            subscriptionPlan: `Plan ${i % 3}`,
-            favoriteColor: `Color ${i % 7}`,
-        });
-    }
-    return data;
-};
-// Default export for Storybook configuration for TMDataGrid component
-export default {
-    // The title will determine how the component appears in the sidebar of Storybook
-    title: 'Components/TMDataGrid',
-    // Specifies the component that is being documented in this story
-    component: TMDataGrid,
-    decorators: [(Story) => (_jsxs(TMDeviceProvider, { children: [" ", _jsx(Story, {}), " "] })),],
-    // Tags for categorizing the component within Storybook
-    tags: ['autodocs'],
-    // Description
-    description: 'A responsive, customizable data grid component for displaying tabular data efficiently.',
-    argTypes: sortArgTypes({
-        accessKey: {
-            description: "Specifies the shortcut key that sets focus on the UI component",
-            control: { type: 'text' },
-            type: { name: "string", required: false },
-        },
-        activeStateEnabled: {
-            description: "Specifies whether the UI component changes its visual state as a result of user interaction"
-        },
-        allowColumnReordering: {
-            description: "Specifies whether a user can reorder columns"
-        },
-        allowColumnResizing: {
-            description: "Specifies whether a user can resize columns"
-        },
-        autoNavigateToFocusedRow: {
-            description: "Automatically scrolls the component to the focused row when the focusedRowKey is changed. Incompatible with infinite scrolling mode"
-        },
-        cacheEnabled: {
-            description: "Specifies whether data should be cached"
-        },
-        cellHintEnabled: {
-            description: "Enables a hint that appears when a user hovers the mouse pointer over a cell with truncated content"
-        },
-        columnAutoWidth: {
-            description: "Specifies whether columns should adjust their widths to the content"
-        },
-        columnChooser: {
-            description: "Configures the column chooser"
-        },
-        columnFixing: {
-            description: "Configures column fixing"
-        },
-        columnHidingEnabled: {
-            description: "Specifies whether the UI component should hide columns to adapt to the screen or container size. Ignored if allowColumnResizing is true and columnResizingMode is 'widget'"
-        },
-        columnMinWidth: {
-            description: "Specifies the minimum width of columns"
-        },
-        columnResizingMode: {
-            description: "Specifies how the UI component resizes columns. Applies only if allowColumnResizing is true"
-        },
-        columns: {
-            description: "An array of grid columns"
-        },
-        columnWidth: {
-            description: "Specifies the width for all data columns. Has a lower priority than the column.width property"
-        },
-        customizeColumns: {
-            description: "Customizes columns after they are created"
-        },
-        dataRowComponent: {
-            description: "An alias for the dataRowTemplate property specified in React. Accepts a custom component"
-        },
-        dataRowRender: {
-            description: "An alias for the dataRowTemplate property specified in React. Accepts a rendering function"
-        },
-        dataRowTemplate: {
-            description: "Specifies a custom template for data rows"
-        },
-        dataSource: {
-            description: "Binds the UI component to data"
-        },
-        dateSerializationFormat: {
-            description: "Specifies the format in which date-time values should be sent to the server"
-        },
-        disabled: {
-            description: "Specifies whether the UI component responds to user interaction"
-        },
-        editing: {
-            description: "Configures editing"
-        },
-        elementAttr: {
-            description: "Specifies the global attributes to be attached to the UI component's container element"
-        },
-        errorRowEnabled: {
-            description: "Indicates whether to show the error row"
-        },
-        export: {
-            description: "Configures client-side exporting"
-        },
-        filterBuilder: {
-            description: "Configures the integrated filter builder"
-        },
-        filterBuilderPopup: {
-            description: "Configures the popup in which the integrated filter builder is shown"
-        },
-        filterPanel: {
-            description: "Configures the filter panel"
-        },
-        filterRow: {
-            description: "Configures the filter row"
-        },
-        filterSyncEnabled: {
-            description: "Specifies whether to synchronize the filter row, header filter, and filter builder"
-        },
-        filterValue: {
-            description: "Specifies a filter expression"
-        },
-        focusedColumnIndex: {
-            description: "The index of the column that contains the focused data cell"
-        },
-        focusedRowEnabled: {
-            description: "Specifies whether the focused row feature is enabled"
-        },
-        focusedRowIndex: {
-            description: "Specifies or indicates the focused data row's index"
-        },
-        focusedRowKey: {
-            description: "Specifies initially or currently focused grid row's key"
-        },
-        grouping: {
-            description: "Configures grouping"
-        },
-        groupPanel: {
-            description: "Configures the group panel"
-        },
-        headerFilter: {
-            description: "Configures the header filter feature"
-        },
-        height: {
-            description: "Specifies the UI component's height"
-        },
-        highlightChanges: {
-            description: "Specifies whether to highlight rows and cells with edited data. repaintChangesOnly should be true"
-        },
-        hint: {
-            description: "Specifies text for a hint that appears when a user pauses on the UI component"
-        },
-        hoverStateEnabled: {
-            description: "Specifies whether to highlight rows when a user moves the mouse pointer over them"
-        },
-        keyboardNavigation: {
-            description: "Configures keyboard navigation"
-        },
-        keyExpr: {
-            description: "Specifies the key property (or properties) that provide key values to access data items"
-        },
-        loadPanel: {
-            description: "Configures the load panel"
-        },
-        masterDetail: {
-            description: "Allows you to build a master-detail interface in the grid"
-        },
-        noDataText: {
-            description: "Specifies a text string shown when the DataGrid does not display any data"
-        },
-        pager: {
-            description: "Configures the pager"
-        },
-        paging: {
-            description: "Configures paging"
-        },
-        remoteOperations: {
-            description: "Notifies the DataGrid of the server's data processing operations"
-        },
-        renderAsync: {
-            description: "Specifies whether to render the filter row, command columns, and columns with showEditorAlways set to true after other elements"
-        },
-        rowAlternationEnabled: {
-            description: "Specifies whether rows should be shaded differently"
-        },
-        rowDragging: {
-            description: "Configures row reordering using drag and drop gestures"
-        },
-        rtlEnabled: {
-            description: "Switches the UI component to a right-to-left representation"
-        },
-        scrolling: {
-            description: "Configures scrolling"
-        },
-        searchPanel: {
-            description: "Configures the search panel"
-        },
-        selectedRowKeys: {
-            description: "Allows you to select rows or determine which rows are selected"
-        },
-        selection: {
-            description: "Configures runtime selection"
-        },
-        selectionFilter: {
-            description: "Specifies filters for the rows that must be selected initially"
-        },
-        showBorders: {
-            description: "Specifies whether the outer borders of the UI component are visible"
-        },
-        showColumnHeaders: {
-            description: "Specifies whether column headers are visible"
-        },
-        showColumnLines: {
-            description: "Specifies whether vertical lines that separate one column from another are visible"
-        },
-        showRowLines: {
-            description: "Specifies whether horizontal lines that separate one row from another are visible"
-        },
-        stateStoring: {
-            description: "Configures state storing"
-        },
-        summary: {
-            description: "Specifies the properties of the grid summary"
-        },
-        tabIndex: {
-            description: "Specifies the number of the element when the Tab key is used for navigating"
-        },
-        toolbar: {
-            description: "Configures the toolbar"
-        },
-        visible: {
-            description: "Specifies whether the UI component is visible"
-        },
-        width: {
-            description: "Specifies the UI component's width"
-        },
-        wordWrapEnabled: {
-            description: "Specifies whether text that does not fit into a column should be wrapped"
-        },
-    }),
-};
-/******* 1. Default Template and Default TMDatagrid *******/
-const DefaultTemplate = (args) => {
-    const dataSource = useMemo(() => generateData(5), []);
-    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
-    const [focusedRowKey, setFocusedRowKey] = useState(undefined);
-    const onSelectionChanged = useCallback((e) => {
-        setSelectedRowKeys(e.component.getSelectedRowKeys());
-    }, []);
-    const onFocusedRowChanged = useCallback((e) => {
-        setFocusedRowKey(e.row?.key);
-    }, []);
-    return (_jsx(TMDataGrid, { ...args, dataSource: dataSource, pageSize: TMDataGridPageSize.Small, keyExpr: "id", width: "100%", height: "100%", focusedRowEnabled: true, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged, selectedRowKeys: selectedRowKeys, onSelectionChanged: onSelectionChanged, columnResizingMode: 'widget', columnHidingEnabled: true, columnAutoWidth: true, allowColumnResizing: true, allowColumnReordering: true, style: { userSelect: "none" } }));
-};
-export const DefaultTMDatagrid = DefaultTemplate.bind({});
-DefaultTMDatagrid.args = {};
-/******* 2. Default Template and Datagrid with Search Panel to Right *******/
-export const TMDatagridWithSearchPanelToRight = DefaultTemplate.bind({});
-TMDatagridWithSearchPanelToRight.args = {
-    searchPanelToolbarPosition: 'default',
-};
-/******* 3. Default Template and Datagrid with Counter enable *******/
-export const TMDatagridWithCounters = DefaultTemplate.bind({});
-TMDatagridWithCounters.args = {
-    counterConfig: { show: true }
-};

package/lib/stories/TMHtmlContentDisplay.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import TMHtmlContentDisplay from '../components/editors/TMHtmlContentDisplay';
-declare const meta: Meta<typeof TMHtmlContentDisplay>;
-export default meta;
-type Story = StoryObj<typeof TMHtmlContentDisplay>;
-export declare const Default: Story;

package/lib/stories/TMHtmlContentDisplay.stories.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import TMHtmlContentDisplay from '../components/editors/TMHtmlContentDisplay';
-const sampleMarkup = `
-  <p>This is a <strong>sample</strong> paragraph with <a target="_blank" href="https://www.google.com/">a link</a>.</p>
-  <p>Another paragraph with the word <u>sample</u> and some <em>emphasized</em> content.</p>
-  <ul>
-    <li>First item</li>
-    <li>Second item with <u>underline</u> and <em>emphasis</em></li>
-  </ul>
-  <ol>
-    <li>Ordered item one</li>
-    <li>Ordered item <em>two</em> with a sample word</li>
-  </ol>
-  <p>Check out this URL: https://www.example.com</p>
-  <p>Check out this URL: https://www.illibraio.it/test-quiz/test/</p>
-  <p>Check out this URL: http://www.illibraio.it/test-quiz/test/</p>
-  <p>Check out this URL: https://www.topconsult.it/it</p>
-  
-`;
-const meta = {
-    title: 'Components/TMHtmlContentDisplay',
-    component: TMHtmlContentDisplay,
-    argTypes: {
-        searchText: { control: false }, // Disable default control
-    },
-};
-export default meta;
-export const Default = {
-    render: (args) => {
-        const [searchText, setSearchText] = useState(args.searchText || '');
-        return (_jsxs("div", { style: { padding: 20 }, children: [_jsx("input", { type: "text", placeholder: "Search text...", value: searchText, onChange: (e) => setSearchText(e.target.value), style: {
-                        marginBottom: '1rem',
-                        padding: '0.5rem',
-                        width: '100%',
-                        maxWidth: '300px',
-                        fontSize: '1rem',
-                    } }), _jsx(TMHtmlContentDisplay, { ...args, searchText: searchText })] }));
-    },
-    args: {
-        markup: sampleMarkup,
-        isSelected: false,
-        searchText: '',
-    },
-};

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

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import TMHtmlEditor from '../components/editors/TMHtmlEditor';
-declare const meta: Meta<typeof TMHtmlEditor>;
-export default meta;
-type Story = StoryObj<typeof TMHtmlEditor>;
-export declare const Default: Story;

package/lib/stories/TMHtmlEditor.stories.js

@@ -1,49 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import TMHtmlEditor from '../components/editors/TMHtmlEditor';
-import { TMHtmlContentDisplay } from '../components';
-const meta = {
-    title: 'Components/TMHtmlEditor',
-    component: TMHtmlEditor,
-    argTypes: {
-        onValueChanged: { control: false },
-    },
-};
-export default meta;
-export const Default = {
-    render: (args) => {
-        const [content, setContent] = useState('');
-        const [cleanComment, setCleanComment] = useState('');
-        const [mentionsConfig, setMentionsConfig] = useState([]);
-        useEffect(() => {
-            const mentions = [{
-                    dataSource: [{ text: 'Marco Rossi', icon: '👤' }, { text: 'Paolo Bianchi', icon: '👩' },],
-                    searchExpr: 'text',
-                    displayExpr: 'text',
-                    valueExpr: 'text',
-                    itemTemplate: function (itemData) {
-                        return `<div style="display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%;">
-                            ${itemData.icon}
-                            <span>${itemData.text}</span>
-                        </div>`;
-                    },
-                }];
-            setMentionsConfig(mentions);
-        }, []);
-        const handleValueChange = (e) => {
-            setContent(e.value);
-            setCleanComment(e.value
-                // Replace </p> with '' only if followed by <ol> or <ul>
-                .replace(/<\/p>(?=\s*<(ol|ul)>)/gi, '')
-                // Replace all other </p> with '\r\n'
-                .replace(/<\/p>/gi, '\r\n')
-                // Remove all <p> tags
-                .replace(/<p>/gi, '')
-                // Remove all <br> tags
-                .replace(/<br>/gi, '')
-                // Trim whitespace
-                .trim());
-        };
-        return (_jsxs("div", { style: { padding: 20 }, children: [_jsx(TMHtmlEditor, { ...args, onValueChanged: handleValueChange, isEditorEnabled: true, mentionsConfig: mentionsConfig }), _jsxs("div", { style: { marginTop: '1rem', padding: '0.5rem', backgroundColor: '#f5f5f5' }, children: [_jsx("h4", { children: "Output" }), _jsx(TMHtmlContentDisplay, { markup: cleanComment, isSelected: false })] }), _jsxs("div", { style: { marginTop: '1rem', padding: '0.5rem', backgroundColor: '#e0e0e0' }, children: [_jsx("h4", { children: "Output (HTML String)" }), _jsx("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: JSON.stringify(cleanComment) })] })] }));
-    },
-};

package/lib/stories/TMIcons.stories.d.ts

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

package/lib/stories/TMIcons.stories.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Icon123, IconABC, IconAccessPoint, IconActivity, IconActivityLog, IconAdd, IconAddCircleOutline, IconAddressBook, IconAdvanced, IconAlarmPlus, IconAll, IconAppAdvancedSettings, IconApply, IconApplyAndClose, IconArchive, IconArchiveDoc, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowSortedDown, IconArrowSortedUp, IconArrowUnsorted, IconArrowUp, IconAtSign, IconAttachment, IconAutoConfig, IconBackward, IconBasket, IconBatchUpdate, IconBell, IconBellCheck, IconBellCheckOutline, IconBellOutline, IconBoard, IconBoxArchiveIn, IconBxInfo, IconBxLock, IconCalendar, IconChangeUser, IconCheck, IconCheckIn, IconChevronDown, IconChevronRight, IconCircleInfo, IconClear, IconClearButton, IconCloseCircle, IconCloseOutline, IconCloud, IconColumns, IconCommand, IconConvertFilePdf, IconCopy, IconCount, IconCrown, IconDashboard, IconDataList, IconDcmtType, IconDcmtTypeOnlyMetadata, IconDcmtTypeSys, IconDelete, IconDetailDcmts, IconDetails, IconDisk, IconDotsVerticalCircleOutline, IconDown, IconDownload, IconDraggabledots, IconDuplicate, IconEasy, IconEdit, IconEnvelopeOpenText, IconEqual, IconEqualNot, IconEraser, IconExpandRight, IconExport, IconExportTo, IconFactory, IconFastBackward, IconFastForward, IconFastSearch, IconFileDots, IconFileSearch, IconFilter, IconFoldeAdd, IconFolder, IconFolderOpen, IconFolderSearch, IconFolderZip, IconForceStop, IconForward, IconFreeSearch, IconFreeze, IconFunction, IconGreaterThan, IconGreaterThanOrEqual, IconGrid, IconHeart, IconHide, IconHistory, IconHourglass, IconImport, IconInfo, IconInsertAbove, IconInsertBelow, IconKey, IconLanguage, IconLeft, IconLessThan, IconLessThanOrEqual, IconLightningFill, IconLink, IconList, IconLock, IconLockClosed, IconLogin, IconLogout, IconMail, IconMapping, IconMenuHorizontal, IconMenuKebab, IconMenuVertical, IconMetadata, IconMetadata_Computed, IconMetadata_DataList, IconMetadata_Date, IconMetadata_DynamicDataList, IconMetadata_Numerator, IconMetadata_Numeric, IconMetadata_Special, IconMetadata_Text, IconMetadata_User, IconMic, IconMonitor, IconMultipleSelection, IconNone, IconNotification, IconNotStarted, IconNull, IconOpenInNew, IconPalette, IconPassword, IconPaste, IconPencil, IconPlatform, IconPlay, IconPreview, IconPrinter, IconProcess, IconProgress, IconProgressAbortRequested, IconProgressCompleted, IconProgressNotCompleted, IconProgressReady, IconProgressRunning, IconProgressStarted, IconRecentlyViewed, IconRecursiveOps, IconRefresh, IconRelation, IconRelationManyToMany, IconRelationOneToMany, IconReset, IconRight, IconSave, IconSavedQuery, IconSearch, IconSearchCheck, IconSelected, IconServerService, IconSettings, IconShare, IconSharedDcmt, IconShow, IconSignature, IconSignaturePencil, IconSignCert, IconSort, IconSortAsc, IconSortAscClock, IconSortAscLetters, IconSortAscNumbers, IconSortDesc, IconSortDescClock, IconSortDescLetters, IconSortDescNumbers, IconStar, IconStarRemove, IconStatistics, IconStop, IconStopwatch, IconSubstFile, IconSuccess, IconSuccessCirlce, IconSuitcase, IconSum, IconSupport, IconSync, IconTag, IconTest, IconTree, IconUndo, IconUnFreeze, IconUp, IconUpdate, IconUpload, IconUser, IconUserCheck, IconUserExpired, IconUserGroup, IconUserLevelAdministrator, IconUserLevelAutonomousAdministrator, IconUserLevelMember, IconUserLevelSystemAdministrator, IconUserProfile, IconVisible, IconWarning, IconWeb, IconWifi, IconWindowMaximize, IconWindowMinimize, IconWorkflow, IconWorkspace } from "../helper";
-export default {
-    title: "Icons/TMIcons",
-    component: IconAccessPoint,
-    argTypes: {
-        fontSize: { control: "text" },
-        color: { control: "color" },
-    },
-};
-const TMIconsTemplate = (args) => (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: "flex", gap: "20px" }, children: [_jsx("span", { title: "IconAccessPoint", children: _jsx(IconAccessPoint, { ...args }) }), _jsx("span", { title: "IconCloseOutline", children: _jsx(IconCloseOutline, { ...args }) }), _jsx("span", { title: "IconArchive", children: _jsx(IconArchive, { ...args }) }), _jsx("span", { title: "IconLogin", children: _jsx(IconLogin, { ...args }) }), _jsx("span", { title: "IconUser", children: _jsx(IconUser, { ...args }) }), _jsx("span", { title: "IconPassword", children: _jsx(IconPassword, { ...args }) }), _jsx("span", { title: "IconLanguage", children: _jsx(IconLanguage, { ...args }) }), _jsx("span", { title: "IconSuitcase", children: _jsx(IconSuitcase, { ...args }) }), _jsx("span", { title: "IconProcess", children: _jsx(IconProcess, { ...args }) }), _jsx("span", { title: "IconSupport", children: _jsx(IconSupport, { ...args }) }), _jsx("span", { title: "IconMonitor", children: _jsx(IconMonitor, { ...args }) }), _jsx("span", { title: "IconDashboard", children: _jsx(IconDashboard, { ...args }) }), _jsx("span", { title: "IconAdd", children: _jsx(IconAdd, { ...args }) }), _jsx("span", { title: "IconDelete", children: _jsx(IconDelete, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconDuplicate", children: _jsx(IconDuplicate, { ...args }) }), _jsx("span", { title: "IconRefresh", children: _jsx(IconRefresh, { ...args }) }), _jsx("span", { title: "IconExpandRight", children: _jsx(IconExpandRight, { ...args }) }), _jsx("span", { title: "IconColumns", children: _jsx(IconColumns, { ...args }) }), _jsx("span", { title: "IconSave", children: _jsx(IconSave, { ...args }) }), _jsx("span", { title: "IconArrowDown", children: _jsx(IconArrowDown, { ...args }) }), _jsx("span", { title: "IconArrowUp", children: _jsx(IconArrowUp, { ...args }) }), _jsx("span", { title: "IconUndo", children: _jsx(IconUndo, { ...args }) }), _jsx("span", { title: "IconShow", children: _jsx(IconShow, { ...args }) }), _jsx("span", { title: "IconHide", children: _jsx(IconHide, { ...args }) }), _jsx("span", { title: "IconPreview", children: _jsx(IconPreview, { ...args }) }), _jsx("span", { title: "IconCount", children: _jsx(IconCount, { ...args }) }), _jsx("span", { title: "IconPencil", children: _jsx(IconPencil, { ...args }) }), _jsx("span", { title: "IconEraser", children: _jsx(IconEraser, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconAll", children: _jsx(IconAll, { ...args }) }), _jsx("span", { title: "IconSelected", children: _jsx(IconSelected, { ...args }) }), _jsx("span", { title: "IconVisible", children: _jsx(IconVisible, { ...args }) }), _jsx("span", { title: "IconCloseCircle", children: _jsx(IconCloseCircle, { ...args }) }), _jsx("span", { title: "IconApplyAndClose", children: _jsx(IconApplyAndClose, { ...args }) }), _jsx("span", { title: "IconApply", children: _jsx(IconApply, { ...args }) }), _jsx("span", { title: "IconSettings", children: _jsx(IconSettings, { ...args }) }), _jsx("span", { title: "IconNotification", children: _jsx(IconNotification, { ...args }) }), _jsx("span", { title: "IconHeart", children: _jsx(IconHeart, { ...args }) }), _jsx("span", { title: "IconUserProfile", children: _jsx(IconUserProfile, { ...args }) }), _jsx("span", { title: "IconWorkflow", children: _jsx(IconWorkflow, { ...args }) }), _jsx("span", { title: "IconBackward", children: _jsx(IconBackward, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconForward", children: _jsx(IconForward, { ...args }) }), _jsx("span", { title: "IconFastBackward", children: _jsx(IconFastBackward, { ...args }) }), _jsx("span", { title: "IconFastForward", children: _jsx(IconFastForward, { ...args }) }), _jsx("span", { title: "IconLogout", children: _jsx(IconLogout, { ...args }) }), _jsx("span", { title: "IconWifi", children: _jsx(IconWifi, { ...args }) }), _jsx("span", { title: "IconMenuHorizontal", children: _jsx(IconMenuHorizontal, { ...args }) }), _jsx("span", { title: "IconMenuVertical", children: _jsx(IconMenuVertical, { ...args }) }), _jsx("span", { title: "IconOpenInNew", children: _jsx(IconOpenInNew, { ...args }) }), _jsx("span", { title: "IconMail", children: _jsx(IconMail, { ...args }) }), _jsx("span", { title: "IconCopy", children: _jsx(IconCopy, { ...args }) }), _jsx("span", { title: "IconSearch", children: _jsx(IconSearch, { ...args }) }), _jsx("span", { title: "IconMenuKebab", children: _jsx(IconMenuKebab, { ...args }) }), _jsx("span", { title: "IconDown", children: _jsx(IconDown, { ...args }) }), _jsx("span", { title: "IconUp", children: _jsx(IconUp, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconLeft", children: _jsx(IconLeft, { ...args }) }), _jsx("span", { title: "IconRight", children: _jsx(IconRight, { ...args }) }), _jsx("span", { title: "IconArrowLeft", children: _jsx(IconArrowLeft, { ...args }) }), _jsx("span", { title: "IconArrowRight", children: _jsx(IconArrowRight, { ...args }) }), _jsx("span", { title: "IconFileDots", children: _jsx(IconFileDots, { ...args }) }), _jsx("span", { title: "IconDownload", children: _jsx(IconDownload, { ...args }) }), _jsx("span", { title: "IconUpload", children: _jsx(IconUpload, { ...args }) }), _jsx("span", { title: "IconFolderSearch", children: _jsx(IconFolderSearch, { ...args }) }), _jsx("span", { title: "IconFoldeAdd", children: _jsx(IconFoldeAdd, { ...args }) }), _jsx("span", { title: "IconEqual", children: _jsx(IconEqual, { ...args }) }), _jsx("span", { title: "IconEqualNot", children: _jsx(IconEqualNot, { ...args }) }), _jsx("span", { title: "IconGreaterThan", children: _jsx(IconGreaterThan, { ...args }) }), _jsx("span", { title: "IconLessThan", children: _jsx(IconLessThan, { ...args }) }), _jsx("span", { title: "IconLessThanOrEqual", children: _jsx(IconLessThanOrEqual, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconGreaterThanOrEqual", children: _jsx(IconGreaterThanOrEqual, { ...args }) }), _jsx("span", { title: "IconSort", children: _jsx(IconSort, { ...args }) }), _jsx("span", { title: "IconPlatform", children: _jsx(IconPlatform, { ...args }) }), _jsx("span", { title: "Icon123", children: _jsx(Icon123, { ...args }) }), _jsx("span", { title: "IconABC", children: _jsx(IconABC, { ...args }) }), _jsx("span", { title: "IconCalendar", children: _jsx(IconCalendar, { ...args }) }), _jsx("span", { title: "IconAtSign", children: _jsx(IconAtSign, { ...args }) }), _jsx("span", { title: "IconEdit", children: _jsx(IconEdit, { ...args }) }), _jsx("span", { title: "IconWarning", children: _jsx(IconWarning, { ...args }) }), _jsx("span", { title: "IconInfo", children: _jsx(IconInfo, { ...args }) }), _jsx("span", { title: "IconSuccess", children: _jsx(IconSuccess, { ...args }) }), _jsx("span", { title: "IconAlarmPlus", children: _jsx(IconAlarmPlus, { ...args }) }), _jsx("span", { title: "IconHourglass", children: _jsx(IconHourglass, { ...args }) }), _jsx("span", { title: "IconNone", children: _jsx(IconNone, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconNotStarted", children: _jsx(IconNotStarted, { ...args }) }), _jsx("span", { title: "IconProgress", children: _jsx(IconProgress, { ...args }) }), _jsx("span", { title: "IconInsertAbove", children: _jsx(IconInsertAbove, { ...args }) }), _jsx("span", { title: "IconInsertBelow", children: _jsx(IconInsertBelow, { ...args }) }), _jsx("span", { title: "IconFilter", children: _jsx(IconFilter, { ...args }) }), _jsx("span", { title: "IconDcmtType", children: _jsx(IconDcmtType, { ...args }) }), _jsx("span", { title: "IconDcmtTypeOnlyMetadata", children: _jsx(IconDcmtTypeOnlyMetadata, { ...args }) }), _jsx("span", { title: "IconDcmtTypeSys", children: _jsx(IconDcmtTypeSys, { ...args }) }), _jsx("span", { title: "IconCloud", children: _jsx(IconCloud, { ...args }) }), _jsx("span", { title: "IconWeb", children: _jsx(IconWeb, { ...args }) }), _jsx("span", { title: "IconBxInfo", children: _jsx(IconBxInfo, { ...args }) }), _jsx("span", { title: "IconStop", children: _jsx(IconStop, { ...args }) }), _jsx("span", { title: "IconPlay", children: _jsx(IconPlay, { ...args }) }), _jsx("span", { title: "IconStopwatch", children: _jsx(IconStopwatch, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconUpdate", children: _jsx(IconUpdate, { ...args }) }), _jsx("span", { title: "IconSuccessCirlce", children: _jsx(IconSuccessCirlce, { ...args }) }), _jsx("span", { title: "IconCircleInfo", children: _jsx(IconCircleInfo, { ...args }) }), _jsx("span", { title: "IconDetails", children: _jsx(IconDetails, { ...args }) }), _jsx("span", { title: "IconFreeze", children: _jsx(IconFreeze, { ...args }) }), _jsx("span", { title: "IconUnFreeze", children: _jsx(IconUnFreeze, { ...args }) }), _jsx("span", { title: "IconProgressCompleted", children: _jsx(IconProgressCompleted, { ...args }) }), _jsx("span", { title: "IconProgressNotCompleted", children: _jsx(IconProgressNotCompleted, { ...args }) }), _jsx("span", { title: "IconProgressAbortRequested", children: _jsx(IconProgressAbortRequested, { ...args }) }), _jsx("span", { title: "IconProgressReady", children: _jsx(IconProgressReady, { ...args }) }), _jsx("span", { title: "IconProgressStarted", children: _jsx(IconProgressStarted, { ...args }) }), _jsx("span", { title: "IconProgressRunning", children: _jsx(IconProgressRunning, { ...args }) }), _jsx("span", { title: "IconUserLevelMember", children: _jsx(IconUserLevelMember, { ...args }) }), _jsx("span", { title: "IconUserLevelAdministrator", children: _jsx(IconUserLevelAdministrator, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconUserLevelSystemAdministrator", children: _jsx(IconUserLevelSystemAdministrator, { ...args }) }), _jsx("span", { title: "IconUserLevelAutonomousAdministrator", children: _jsx(IconUserLevelAutonomousAdministrator, { ...args }) }), _jsx("span", { title: "IconHistory", children: _jsx(IconHistory, { ...args }) }), _jsx("span", { title: "IconForceStop", children: _jsx(IconForceStop, { ...args }) }), _jsx("span", { title: "IconDraggabledots", children: _jsx(IconDraggabledots, { ...args }) }), _jsx("span", { title: "IconClear", children: _jsx(IconClear, { ...args }) }), _jsx("span", { title: "IconClearButton", children: _jsx(IconClearButton, { ...args }) }), _jsx("span", { title: "IconAddCircleOutline", children: _jsx(IconAddCircleOutline, { ...args }) }), _jsx("span", { title: "IconDotsVerticalCircleOutline", children: _jsx(IconDotsVerticalCircleOutline, { ...args }) }), _jsx("span", { title: "IconMapping", children: _jsx(IconMapping, { ...args }) }), _jsx("span", { title: "IconAutoConfig", children: _jsx(IconAutoConfig, { ...args }) }), _jsx("span", { title: "IconArchiveDoc", children: _jsx(IconArchiveDoc, { ...args }) }), _jsx("span", { title: "IconCommand", children: _jsx(IconCommand, { ...args }) }), _jsx("span", { title: "IconSum", children: _jsx(IconSum, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconDisk", children: _jsx(IconDisk, { ...args }) }), _jsx("span", { title: "IconDataList", children: _jsx(IconDataList, { ...args }) }), _jsx("span", { title: "IconWindowMaximize", children: _jsx(IconWindowMaximize, { ...args }) }), _jsx("span", { title: "IconWindowMinimize", children: _jsx(IconWindowMinimize, { ...args }) }), _jsx("span", { title: "IconReset", children: _jsx(IconReset, { ...args }) }), _jsx("span", { title: "IconExport", children: _jsx(IconExport, { ...args }) }), _jsx("span", { title: "IconImport", children: _jsx(IconImport, { ...args }) }), _jsx("span", { title: "IconPalette", children: _jsx(IconPalette, { ...args }) }), _jsx("span", { title: "IconFastSearch", children: _jsx(IconFastSearch, { ...args }) }), _jsx("span", { title: "IconUserGroup", children: _jsx(IconUserGroup, { ...args }) }), _jsx("span", { title: "IconBoard", children: _jsx(IconBoard, { ...args }) }), _jsx("span", { title: "IconActivity", children: _jsx(IconActivity, { ...args }) }), _jsx("span", { title: "IconWorkspace", children: _jsx(IconWorkspace, { ...args }) }), _jsx("span", { title: "IconAttachment", children: _jsx(IconAttachment, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconActivityLog", children: _jsx(IconActivityLog, { ...args }) }), _jsx("span", { title: "IconCrown", children: _jsx(IconCrown, { ...args }) }), _jsx("span", { title: "IconChangeUser", children: _jsx(IconChangeUser, { ...args }) }), _jsx("span", { title: "IconPaste", children: _jsx(IconPaste, { ...args }) }), _jsx("span", { title: "IconFileSearch", children: _jsx(IconFileSearch, { ...args }) }), _jsx("span", { title: "IconStar", children: _jsx(IconStar, { ...args }) }), _jsx("span", { title: "IconStarRemove", children: _jsx(IconStarRemove, { ...args }) }), _jsx("span", { title: "IconLightningFill", children: _jsx(IconLightningFill, { ...args }) }), _jsx("span", { title: "IconLink", children: _jsx(IconLink, { ...args }) }), _jsx("span", { title: "IconEasy", children: _jsx(IconEasy, { ...args }) }), _jsx("span", { title: "IconConvertFilePdf", children: _jsx(IconConvertFilePdf, { ...args }) }), _jsx("span", { title: "IconRelation", children: _jsx(IconRelation, { ...args }) }), _jsx("span", { title: "IconCheckIn", children: _jsx(IconCheckIn, { ...args }) }), _jsx("span", { title: "IconRecursiveOps", children: _jsx(IconRecursiveOps, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconSearchCheck", children: _jsx(IconSearchCheck, { ...args }) }), _jsx("span", { title: "IconSignature", children: _jsx(IconSignature, { ...args }) }), _jsx("span", { title: "IconSavedQuery", children: _jsx(IconSavedQuery, { ...args }) }), _jsx("span", { title: "IconSync", children: _jsx(IconSync, { ...args }) }), _jsx("span", { title: "IconAdvanced", children: _jsx(IconAdvanced, { ...args }) }), _jsx("span", { title: "IconSubstFile", children: _jsx(IconSubstFile, { ...args }) }), _jsx("span", { title: "IconBatchUpdate", children: _jsx(IconBatchUpdate, { ...args }) }), _jsx("span", { title: "IconShare", children: _jsx(IconShare, { ...args }) }), _jsx("span", { title: "IconSharedDcmt", children: _jsx(IconSharedDcmt, { ...args }) }), _jsx("span", { title: "IconExportTo", children: _jsx(IconExportTo, { ...args }) }), _jsx("span", { title: "IconArrowSortedDown", children: _jsx(IconArrowSortedDown, { ...args }) }), _jsx("span", { title: "IconArrowSortedUp", children: _jsx(IconArrowSortedUp, { ...args }) }), _jsx("span", { title: "IconStatistics", children: _jsx(IconStatistics, { ...args }) }), _jsx("span", { title: "IconArrowUnsorted", children: _jsx(IconArrowUnsorted, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconPrinter", children: _jsx(IconPrinter, { ...args }) }), _jsx("span", { title: "IconFactory", children: _jsx(IconFactory, { ...args }) }), _jsx("span", { title: "IconTest", children: _jsx(IconTest, { ...args }) }), _jsx("span", { title: "IconCheck", children: _jsx(IconCheck, { ...args }) }), _jsx("span", { title: "IconSortAsc", children: _jsx(IconSortAsc, { ...args }) }), _jsx("span", { title: "IconSortDesc", children: _jsx(IconSortDesc, { ...args }) }), _jsx("span", { title: "IconSortAscLetters", children: _jsx(IconSortAscLetters, { ...args }) }), _jsx("span", { title: "IconSortDescLetters", children: _jsx(IconSortDescLetters, { ...args }) }), _jsx("span", { title: "IconSortAscNumbers", children: _jsx(IconSortAscNumbers, { ...args }) }), _jsx("span", { title: "IconSortDescNumbers", children: _jsx(IconSortDescNumbers, { ...args }) }), _jsx("span", { title: "IconSortAscClock", children: _jsx(IconSortAscClock, { ...args }) }), _jsx("span", { title: "IconSortDescClock", children: _jsx(IconSortDescClock, { ...args }) }), _jsx("span", { title: "IconTree", children: _jsx(IconTree, { ...args }) }), _jsx("span", { title: "IconGrid", children: _jsx(IconGrid, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconList", children: _jsx(IconList, { ...args }) }), _jsx("span", { title: "IconLock", children: _jsx(IconLock, { ...args }) }), _jsx("span", { title: "IconLockClosed", children: _jsx(IconLockClosed, { ...args }) }), _jsx("span", { title: "IconBxLock", children: _jsx(IconBxLock, { ...args }) }), _jsx("span", { title: "IconFolder", children: _jsx(IconFolder, { ...args }) }), _jsx("span", { title: "IconFolderOpen", children: _jsx(IconFolderOpen, { ...args }) }), _jsx("span", { title: "IconTag", children: _jsx(IconTag, { ...args }) }), _jsx("span", { title: "IconFolderZip", children: _jsx(IconFolderZip, { ...args }) }), _jsx("span", { title: "IconBell", children: _jsx(IconBell, { ...args }) }), _jsx("span", { title: "IconBellCheck", children: _jsx(IconBellCheck, { ...args }) }), _jsx("span", { title: "IconBellOutline", children: _jsx(IconBellOutline, { ...args }) }), _jsx("span", { title: "IconBellCheckOutline", children: _jsx(IconBellCheckOutline, { ...args }) }), _jsx("span", { title: "IconEnvelopeOpenText", children: _jsx(IconEnvelopeOpenText, { ...args }) }), _jsx("span", { title: "IconMetadata_Computed", children: _jsx(IconMetadata_Computed, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconMetadata_Text", children: _jsx(IconMetadata_Text, { ...args }) }), _jsx("span", { title: "IconMetadata_User", children: _jsx(IconMetadata_User, { ...args }) }), _jsx("span", { title: "IconMetadata_Date", children: _jsx(IconMetadata_Date, { ...args }) }), _jsx("span", { title: "IconMetadata_DataList", children: _jsx(IconMetadata_DataList, { ...args }) }), _jsx("span", { title: "IconMetadata_DynamicDataList", children: _jsx(IconMetadata_DynamicDataList, { ...args }) }), _jsx("span", { title: "IconMetadata_Numerator", children: _jsx(IconMetadata_Numerator, { ...args }) }), _jsx("span", { title: "IconMetadata_Special", children: _jsx(IconMetadata_Special, { ...args }) }), _jsx("span", { title: "IconMetadata_Numeric", children: _jsx(IconMetadata_Numeric, { ...args }) }), _jsx("span", { title: "IconMetadata", children: _jsx(IconMetadata, { ...args }) }), _jsx("span", { title: "IconRelationManyToMany", children: _jsx(IconRelationManyToMany, { ...args }) }), _jsx("span", { title: "IconRelationOneToMany", children: _jsx(IconRelationOneToMany, { ...args }) }), _jsx("span", { title: "IconBoxArchiveIn", children: _jsx(IconBoxArchiveIn, { ...args }) }), _jsx("span", { title: "IconBasket", children: _jsx(IconBasket, { ...args }) }), _jsx("span", { title: "IconSignCert", children: _jsx(IconSignCert, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconServerService", children: _jsx(IconServerService, { ...args }) }), _jsx("span", { title: "IconUserExpired", children: _jsx(IconUserExpired, { ...args }) }), _jsx("span", { title: "IconUserCheck", children: _jsx(IconUserCheck, { ...args }) }), _jsx("span", { title: "IconAddressBook", children: _jsx(IconAddressBook, { ...args }) }), _jsx("span", { title: "IconFreeSearch", children: _jsx(IconFreeSearch, { ...args }) }), _jsx("span", { title: "IconMic", children: _jsx(IconMic, { ...args }) }), _jsx("span", { title: "IconKey", children: _jsx(IconKey, { ...args }) }), _jsx("span", { title: "IconDetailDcmts", children: _jsx(IconDetailDcmts, { ...args }) }), _jsx("span", { title: "IconMultipleSelection", children: _jsx(IconMultipleSelection, { ...args }) }), _jsx("span", { title: "IconChevronRight", children: _jsx(IconChevronRight, { ...args }) }), _jsx("span", { title: "IconChevronDown", children: _jsx(IconChevronDown, { ...args }) }), _jsx("span", { title: "IconRecentlyViewed", children: _jsx(IconRecentlyViewed, { ...args }) }), _jsx("span", { title: "IconFunction", children: _jsx(IconFunction, { ...args }) }), _jsx("span", { title: "IconNull", children: _jsx(IconNull, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconAppAdvancedSettings", children: _jsx(IconAppAdvancedSettings, { ...args }) }), _jsx("span", { title: "IconSignaturePencil", children: _jsx(IconSignaturePencil, { ...args }) })] })] }));
-export const TMIcons = TMIconsTemplate.bind({});
-TMIcons.args = { fontSize: "48px", color: "black" };

package/lib/stories/TMSDKUI_Localizator.stories.d.ts

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

package/lib/stories/TMSDKUI_Localizator.stories.js

@@ -1,123 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { CultureIDs } from "@topconsultnpm/sdk-ts";
-import { SDKUI_Localizator } from "../helper";
-// Default export for Storybook configuration
-export default {
-    title: "Localizator/SDKUI_Localizator",
-    component: () => _jsx("div", {}),
-    tags: ["autodocs"],
-};
-// Story component
-const Template = () => {
-    const [language, setLanguage] = useState(CultureIDs.En_US);
-    const [searchTerm, setSearchTerm] = useState("");
-    const localizedStrings = [
-        { key: "Abort", value: SDKUI_Localizator.Abort },
-        { key: "Abort_Confirm", value: SDKUI_Localizator.Abort_Confirm },
-        { key: "About", value: SDKUI_Localizator.About },
-        { key: "Add", value: SDKUI_Localizator.Add },
-        { key: "AddAbove", value: SDKUI_Localizator.AddAbove },
-        { key: "AddBelow", value: SDKUI_Localizator.AddBelow },
-        { key: "AddAlls", value: SDKUI_Localizator.AddAlls },
-        { key: "AddDefinition", value: SDKUI_Localizator.AddDefinition },
-        { key: "AddOrSubstFile", value: SDKUI_Localizator.AddOrSubstFile },
-        { key: "All", value: SDKUI_Localizator.All },
-        { key: "AllFilesAndFoldersInSupportArea", value: SDKUI_Localizator.AllFilesAndFoldersInSupportArea },
-        { key: "AllItems", value: SDKUI_Localizator.AllItems },
-        { key: "AllFemale", value: SDKUI_Localizator.AllFemale },
-        { key: "Alphabetic", value: SDKUI_Localizator.Alphabetic },
-        { key: "Applied", value: SDKUI_Localizator.Applied },
-        { key: "Apply", value: SDKUI_Localizator.Apply },
-        { key: "ApplyAndClose", value: SDKUI_Localizator.ApplyAndClose },
-        { key: "Approve", value: SDKUI_Localizator.Approve },
-        { key: "Archive", value: SDKUI_Localizator.Archive },
-        { key: "ArchiveConstraint", value: SDKUI_Localizator.ArchiveConstraint },
-        { key: "ArchiveConstraints_ContentCompulsory", value: SDKUI_Localizator.ArchiveConstraints_ContentCompulsory },
-        { key: "ArchiveConstraints_None", value: SDKUI_Localizator.ArchiveConstraints_None },
-        { key: "ArchiveConstraints_OnlyMetadata", value: SDKUI_Localizator.ArchiveConstraints_OnlyMetadata },
-        { key: "ArchiveID", value: SDKUI_Localizator.ArchiveID },
-        { key: "Attention", value: SDKUI_Localizator.Attention },
-        { key: "AuthMode", value: SDKUI_Localizator.AuthMode },
-        { key: "AuthMode_OnBehalfOf", value: SDKUI_Localizator.AuthMode_OnBehalfOf },
-        { key: "AuthMode_WindowsViaTopMedia", value: SDKUI_Localizator.AuthMode_WindowsViaTopMedia },
-        { key: "Author", value: SDKUI_Localizator.Author },
-        { key: "Back", value: SDKUI_Localizator.Back },
-        { key: "BatchUpdate", value: SDKUI_Localizator.BatchUpdate },
-        { key: "BlogCase", value: SDKUI_Localizator.BlogCase },
-        { key: "Blog_Read", value: SDKUI_Localizator.Blog_Read },
-        { key: "Blog_Write", value: SDKUI_Localizator.Blog_Write },
-        { key: "Browser", value: SDKUI_Localizator.Browser },
-        { key: "BrowseAreaFile", value: SDKUI_Localizator.BrowseAreaFile },
-        { key: "BrowseAreaFolder", value: SDKUI_Localizator.BrowseAreaFolder },
-        { key: "CassettoDoganaleExportMRN", value: SDKUI_Localizator.CassettoDoganaleExportMRN },
-        { key: "CassettoDoganaleExportVU", value: SDKUI_Localizator.CassettoDoganaleExportVU },
-        { key: "CassettoDoganaleImportMRN", value: SDKUI_Localizator.CassettoDoganaleImportMRN },
-        { key: "CassettoDoganalePlus_UserName", value: SDKUI_Localizator.CassettoDoganalePlus_UserName },
-        { key: "Cancel", value: SDKUI_Localizator.Cancel },
-        { key: "ChangePassword", value: SDKUI_Localizator.ChangePassword },
-        { key: "CheckIn", value: SDKUI_Localizator.CheckIn },
-        { key: "CheckOut", value: SDKUI_Localizator.CheckOut },
-        { key: "ChronologyDelete", value: SDKUI_Localizator.ChronologyDelete },
-        { key: "Clear", value: SDKUI_Localizator.Clear },
-        { key: "ClearOTP", value: SDKUI_Localizator.ClearOTP },
-        { key: "Close", value: SDKUI_Localizator.Close },
-        { key: "Columns_All_Hide", value: SDKUI_Localizator.Columns_All_Hide },
-        { key: "Columns_All_Show", value: SDKUI_Localizator.Columns_All_Show },
-        { key: "CompleteError", value: SDKUI_Localizator.CompleteError },
-        { key: "Configure", value: SDKUI_Localizator.Configure },
-        { key: "ConfirmPassword", value: SDKUI_Localizator.ConfirmPassword },
-        { key: "ConfirmOnCancel", value: SDKUI_Localizator.ConfirmOnCancel },
-        { key: "ContinueOperation", value: SDKUI_Localizator.ContinueOperation },
-        { key: "CopiedSuccessfully", value: SDKUI_Localizator.CopiedSuccessfully },
-        { key: "CopyToClipboard", value: SDKUI_Localizator.CopyToClipboard },
-        { key: "Count", value: SDKUI_Localizator.Count },
-        { key: "Create", value: SDKUI_Localizator.Create },
-        { key: "CreationTime", value: SDKUI_Localizator.CreationTime },
-        { key: "CultureID", value: SDKUI_Localizator.CultureID },
-        { key: "Date", value: SDKUI_Localizator.Date },
-        { key: "Date_Modified", value: SDKUI_Localizator.Date_Modified },
-        { key: "DcmtCount", value: SDKUI_Localizator.DcmtCount },
-        { key: "DcmtsDetail", value: SDKUI_Localizator.DcmtsDetail },
-        { key: "DcmtsMaster", value: SDKUI_Localizator.DcmtsMaster },
-        { key: "DcmtType", value: SDKUI_Localizator.DcmtType },
-        { key: "DcmtTypesSelected", value: SDKUI_Localizator.DcmtTypesSelected },
-        { key: "DcmtTypeSelect", value: SDKUI_Localizator.DcmtTypeSelect },
-        { key: "Default", value: SDKUI_Localizator.Default },
-        { key: "Details", value: SDKUI_Localizator.Details },
-        { key: "Delete", value: SDKUI_Localizator.Delete },
-        { key: "Delete_ConfirmFor1", value: SDKUI_Localizator.Delete_ConfirmFor1 },
-        { key: "Delete_ConfirmForN", value: SDKUI_Localizator.Delete_ConfirmForN },
-        { key: "DeletionCompletedSuccessfully", value: SDKUI_Localizator.DeletionCompletedSuccessfully },
-        { key: "DeletionOperationInterrupted", value: SDKUI_Localizator.DeletionOperationInterrupted },
-        { key: "Description", value: SDKUI_Localizator.Description },
-        { key: "Destination", value: SDKUI_Localizator.Destination },
-        { key: "DetailsView", value: SDKUI_Localizator.DetailsView },
-        { key: "Disabled", value: SDKUI_Localizator.Disabled },
-        { key: "Domain", value: SDKUI_Localizator.Domain },
-        { key: "Download_in_Process", value: SDKUI_Localizator.Download_in_Process },
-        { key: "Drafts", value: SDKUI_Localizator.Drafts },
-        { key: "Duplicate", value: SDKUI_Localizator.Duplicate },
-        { key: "Duplicate_ConfirmFor1", value: SDKUI_Localizator.Duplicate_ConfirmFor1 },
-        { key: "Duplicate_ConfirmForN", value: SDKUI_Localizator.Duplicate_ConfirmForN },
-        { key: "Duplicate_Download", value: SDKUI_Localizator.Duplicate_Download },
-        { key: "DuplicationCompletedSuccessfully", value: SDKUI_Localizator.DuplicationCompletedSuccessfully },
-        { key: "DuplicateNameError", value: SDKUI_Localizator.DuplicateNameError },
-        { key: "DuplicationOperationInterrupted", value: SDKUI_Localizator.DuplicationOperationInterrupted }
-    ];
-    // Filter localized strings based on the search term (including digits)
-    const filteredStrings = localizedStrings.filter((entry) => entry.key.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        entry.value.toString().toLowerCase().includes(searchTerm.toLowerCase()));
-    SDKUI_Localizator.setLanguage(language);
-    return (_jsxs("div", { style: { padding: "16px", border: "1px solid #ccc", borderRadius: "8px" }, children: [_jsx("input", { type: "text", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), placeholder: "Search for a language...", style: {
-                    marginBottom: "16px",
-                    padding: "8px",
-                    border: "1px solid #ccc",
-                    borderRadius: "4px",
-                    width: "100%",
-                } }), _jsx("select", { value: language, onChange: (e) => {
-                    setLanguage(e.target.value);
-                    SDKUI_Localizator.setLanguage(e.target.value);
-                }, style: { marginBottom: "16px", padding: "8px", border: "1px solid #ccc", borderRadius: "4px" }, children: Object.values(CultureIDs).map((lang) => (_jsx("option", { value: lang, children: lang }, lang))) }), _jsx("div", { children: filteredStrings.length > 0 ? (filteredStrings.map((entry) => (_jsxs("p", { children: [_jsxs("strong", { children: [entry.key, ":"] }), " ", entry.value] }, entry.key)))) : (_jsx("p", { children: "No matching results" })) })] }));
-};
-export const DefaultLocalizator = Template.bind({});

package/lib/stories/TMStoriesUtils.d.ts

@@ -1 +0,0 @@
-export declare const sortArgTypes: (argTypes: Record<string, any>) => Record<string, any>;

package/lib/stories/TMStoriesUtils.js

@@ -1,10 +0,0 @@
-// Helper function to sort an object by its keys alphabetically
-export const sortArgTypes = (argTypes) => {
-    const sortedArgTypes = Object.keys(argTypes)
-        .sort()
-        .reduce((acc, key) => {
-        acc[key] = argTypes[key];
-        return acc;
-    }, {});
-    return sortedArgTypes;
-};

package/lib/stories/TMUserAvatar.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import TMUserAvatar from '../components/base/TMUserAvatar';
-declare const meta: Meta<typeof TMUserAvatar>;
-export default meta;
-type Story = StoryObj<typeof TMUserAvatar>;
-export declare const MultipleAvatars: Story;

package/lib/stories/TMUserAvatar.stories.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import TMUserAvatar from '../components/base/TMUserAvatar';
-import { TMDeviceProvider } from '../components';
-const meta = {
-    title: 'Components/TMUserAvatar',
-    component: TMUserAvatar,
-    decorators: [(Story) => (_jsxs(TMDeviceProvider, { children: [" ", _jsx(Story, {}), " "] })),],
-    tags: ['autodocs'],
-    args: {
-        displayName: 'Test User',
-        nameForColorCalculation: 'Test User',
-    },
-};
-export default meta;
-export const MultipleAvatars = {
-    render: () => {
-        const names = ['Luca', 'Claudio', 'Marco', 'Alessia', 'Giorgio', 'Ashkan', 'Joele', 'Alessandro'];
-        return (_jsx("div", { style: { display: 'flex', gap: '10px', flexWrap: 'wrap' }, children: names.map((name, index) => (_jsx(TMUserAvatar, { displayName: name, nameForColorCalculation: name }, index))) }));
-    },
-};