@topconsultnpm/sdkui-react 6.19.0-dev1.54 → 6.19.0-dev1.55

package/lib/helper/TMCustomSearchBar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface TMCustomSearchBarProps {
+    placeholder?: string;
+    initialValue?: string;
+    onSearchChange?: (value: string) => void;
+}
+declare const TMCustomSearchBar: React.FC<TMCustomSearchBarProps>;
+export default TMCustomSearchBar;

package/lib/helper/TMCustomSearchBar.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import TextBox from 'devextreme-react/cjs/text-box';
+import { useEffect, useState } from 'react';
+import { SDKUI_Localizator } from './SDKUI_Localizator';
+import { IconCloseOutline, IconSearch } from './TMIcons';
+const TMCustomSearchBar = ({ placeholder = SDKUI_Localizator.SearchAction + "...", initialValue = '', onSearchChange, }) => {
+    const [searchText, setSearchText] = useState("");
+    useEffect(() => {
+        setSearchText(initialValue);
+    });
+    const handleInput = (e) => {
+        if (e === undefined || e.event === undefined)
+            return;
+        const value = e.event?.target.value ?? '';
+        setSearchText(value);
+        if (onSearchChange) {
+            onSearchChange(value);
+        }
+    };
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            width: '160px',
+            position: 'relative',
+        }, children: [_jsx(IconSearch, { style: {
+                    position: 'absolute',
+                    left: '5px',
+                    zIndex: 1,
+                    fontSize: '14px',
+                    color: '#708090',
+                } }), _jsx(TextBox, { width: "160px", height: "24px", placeholder: placeholder, value: searchText, onInput: handleInput, style: {
+                    width: '100%',
+                    fontSize: '12px',
+                    color: '#708090',
+                    borderRadius: '4px',
+                    paddingLeft: '15px',
+                    boxSizing: 'border-box',
+                    paddingRight: '25px',
+                    border: '1px solid #e0e0e0',
+                } }), searchText.length > 0 && (_jsx(IconCloseOutline, { style: {
+                    position: 'absolute',
+                    right: '5px',
+                    cursor: 'pointer',
+                    zIndex: 2,
+                    fontSize: '19px',
+                    color: '#708090',
+                }, onClick: () => {
+                    setSearchText('');
+                    if (onSearchChange) {
+                        onSearchChange('');
+                    }
+                } }))] }));
+};
+export default TMCustomSearchBar;

package/lib/helper/TMToppyMessage.js

@@ -37,6 +37,6 @@ const StyledToppyImage = styled.img `
 `;
 const TMToppyMessage = (props) => {
     const { message, titleTooltip } = props;
-    return _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsx(StyledToppyTextContainer, { children: _jsx(StyledToppyText, { title: titleTooltip ? titleTooltip : undefined, children: message }) }), _jsx(StyledToppyImage, { src: Toppy, alt: 'Toppy' })] });
+    return _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', onContextMenu: (e) => e.preventDefault(), children: [_jsx(StyledToppyTextContainer, { children: _jsx(StyledToppyText, { title: titleTooltip ? titleTooltip : undefined, children: message }) }), _jsx(StyledToppyImage, { src: Toppy, alt: 'Toppy' })] });
 };
 export default TMToppyMessage;

package/lib/helper/TMUtils.d.ts

@@ -1,4 +1,5 @@
-import { DataColumnDescriptor } from '@topconsultnpm/sdk-ts';
+import React from 'react';
+import { DataColumnDescriptor, PdGs } from '@topconsultnpm/sdk-ts';
 export declare const getFileIcon: (fileExtension: string | undefined, fileCount: number | undefined, tooltipContent?: JSX.Element | string) => import("react/jsx-runtime").JSX.Element;
 export declare function formatBytes(bytes: number | undefined, decimalPlaces?: number): string;
 export interface RowData {
@@ -18,3 +19,11 @@ export declare const isWidgetEnabled: (widgetId: string, widgetsString: string)
 export declare const isSign4TopEnabled: (widgetsString: string) => boolean;
 export declare const isCreateCertificateEnabled: (widgetsString: string) => boolean;
 export declare const isPdfEditorEnabled: (widgetsString: string) => boolean;
+interface TabItemProps {
+    $isSelected: boolean;
+}
+export declare const StyledTabItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TabItemProps>> & string;
+export declare const StyledTabIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, TabItemProps>> & string;
+export declare const TMCountBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const getPdgsIconMap: (fontSize?: number) => Map<PdGs, JSX.Element>;
+export {};

package/lib/helper/TMUtils.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { TMTooltip } from '../components';
 import { IconKey } from './TMIcons';
-import { DataListCacheService, MetadataDataDomains } from '@topconsultnpm/sdk-ts';
+import { DataListCacheService, MetadataDataDomains, PdGs } from '@topconsultnpm/sdk-ts';
 import { SDKUI_Localizator } from './SDKUI_Localizator';
 const StyledIconFileContainer = styled.div ` 
     height: 22px;
@@ -174,3 +174,44 @@ export const isCreateCertificateEnabled = (widgetsString) => {
 export const isPdfEditorEnabled = (widgetsString) => {
     return isWidgetEnabled(PDF_EDITOR_ID, widgetsString);
 };
+export const StyledTabItem = styled.div `
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  border-radius: 8px;
+  font-weight: ${({ $isSelected }) => ($isSelected ? 'bold' : 'normal')};
+  color: ${({ $isSelected }) => ($isSelected ? '#fff' : '#000')};
+  background: ${({ $isSelected }) => $isSelected
+    ? 'linear-gradient(270deg, #46B5A2 16%, #3BAABC 34%, #3BAABC 34%, #3681AD 54%, #3368A5 72%, #2F549D 88%, #304F99 100%)'
+    : 'transparent'};
+  transition: background-color 0.2s ease;
+  font-size: 1rem;
+  &:hover {
+    background: ${({ $isSelected }) => ($isSelected ? null : 'rgba(0, 0, 0, 0.05)')};
+  }
+`;
+export const StyledTabIcon = styled.i `
+  cursor: pointer;
+  font-size: 16px;
+  color: ${({ $isSelected }) => ($isSelected ? '#fff !important' : '#000 !important')};
+  transition: color 0.2s ease;
+`;
+export const TMCountBadge = styled.div ` background-color: #ff5252; color: white; border-radius: 999px; margin-left: 8px; font-size: 0.7rem; line-height: 1; min-height: 20px; min-width: 20px; display: flex ; align-items: center; justify-content: center; `;
+const taskPdgsIconClassMap = () => {
+    return new Map([
+        [PdGs.None, ""],
+        [PdGs.CF, "dx-icon-folder"],
+        [PdGs.DT, "dx-icon-file"],
+        [PdGs.WF, "dx-icon-box"],
+        [PdGs.WG, "dx-icon-group"],
+    ]);
+};
+export const getPdgsIconMap = (fontSize = 20) => {
+    return new Map([
+        [PdGs.None, _jsx("span", {}, "PdGs-None")],
+        [PdGs.CF, _jsx("i", { style: { fontSize }, className: taskPdgsIconClassMap().get(PdGs.CF) }, "PdGs-CF")],
+        [PdGs.DT, _jsx("i", { style: { fontSize }, className: taskPdgsIconClassMap().get(PdGs.DT) }, "PdGs-DT")],
+        [PdGs.WF, _jsx("i", { style: { fontSize }, className: taskPdgsIconClassMap().get(PdGs.WF) }, "PdGs-WF")],
+        [PdGs.WG, _jsx("i", { style: { fontSize }, className: taskPdgsIconClassMap().get(PdGs.WG) }, "PdGs-WG")], // <IconUserGroup color="#009700"/>
+    ]);
+};

package/lib/stories/TMSDKUI_Localizator.stories.js

@@ -25,7 +25,7 @@ const Template = () => {
         { key: "All", value: SDKUI_Localizator.All },
         { key: "AllFilesAndFoldersInSupportArea", value: SDKUI_Localizator.AllFilesAndFoldersInSupportArea },
         { key: "AllItems", value: SDKUI_Localizator.AllItems },
-        { key: "Alls2", value: SDKUI_Localizator.Alls2 },
+        { key: "AllFemale", value: SDKUI_Localizator.AllFemale },
         { key: "Alphabetic", value: SDKUI_Localizator.Alphabetic },
         { key: "Applied", value: SDKUI_Localizator.Applied },
         { key: "Apply", value: SDKUI_Localizator.Apply },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.19.0-dev1.54",
+    "version": "6.19.0-dev1.55",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",