pixel-react 1.20.20 → 1.20.22

package/lib/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.js

@@ -1 +1,13 @@
-import{jsx as e,Fragment as t,jsxs as a}from"react/jsx-runtime";import i from"../../../Typography/Typography.js";import"./DataSetTooltip.scss.js";const r=({datSetToolTip:{globalVariableSetName:r="",peVariableSetName:o="",testDataSetName:l=""}})=>{const s={"Project Environment Set":o,"Global Variable Set":r,"Test Data Set":l};return e(t,{children:Object.entries(s).map(([t,r],o)=>e("div",{className:"ff-dataSetList-container",children:a("div",{children:[e(i,{as:"div",fontSize:10,lineHeight:"15px",color:"var(--details-page-value-color)",className:"ff-dataSetList-items",children:t}),e(i,{as:"div",lineHeight:"18px",color:"var(--base-bg-color)",children:r})]})},o))})};export{r as default};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Typography from '../../../Typography';
+import './DataSetTooltip.scss';
+const DataSetTooltip = ({ datSetToolTip: { globalVariableSetName = '', peVariableSetName = '', testDataSetName = '', }, }) => {
+    const toolTipTitleValue = {
+        'Project Environment Set': peVariableSetName,
+        'Global Variable Set': globalVariableSetName,
+        'Test Data Set': testDataSetName,
+    };
+    return (_jsx(_Fragment, { children: Object.entries(toolTipTitleValue).map(([key, value], index) => (_jsx("div", { className: "ff-dataSetList-container", children: _jsxs("div", { children: [_jsx(Typography, { as: "div", fontSize: 10, lineHeight: "15px", color: "var(--details-page-value-color)", className: "ff-dataSetList-items", children: key }), _jsx(Typography, { as: "div", lineHeight: "18px", color: "var(--base-bg-color)", children: value })] }) }, index))) }));
+};
+export default DataSetTooltip;
+//# sourceMappingURL=DataSetTooltip.js.map

package/lib/components/SequentialConnectingBranch/context/EnvironmentVariableMapsContext.js

@@ -1 +1,4 @@
-import{createContext as o,useContext as r}from"react";const t=o(null),c=()=>r(t);export{t as EnvironmentVariableMapsContext,c as useEnvironmentalVariableMaps};
+import { createContext, useContext } from 'react';
+export const EnvironmentVariableMapsContext = createContext(null);
+export const useEnvironmentalVariableMaps = () => useContext(EnvironmentVariableMapsContext);
+//# sourceMappingURL=EnvironmentVariableMapsContext.js.map

package/lib/components/SessionDropdown/SessionDropdown.js

@@ -1 +1,31 @@
-import{jsxs as e,jsx as o,Fragment as d}from"react/jsx-runtime";import"./SessionDropdown.scss.js";import a from"../Icon/Icon.js";import n from"../Tabs/Tabs.js";import i from"../Typography/Typography.js";import r from"../Tooltip/Tooltip.js";const t=({header:t,secondaryHeader:c,primaryCount:l,secondaryCount:s,primaryItems:f,secondaryItems:m,width:h,activeTab:p="primary",activeTabId:w,onPrimaryTabClick:N,onSecondaryTabClick:b,onTabClick:v,actions:y,tabsData:C,notchPosition:u="top-left"})=>{const T=c&&"secondary"===p?m:f,k=s&&parseInt(s)>0,g=l&&parseInt(l)>0,I=c&&(g||k),{tooltip:j="Download",iconName:x="download_file",disabled:W=!1,onClick:D,className:S=""}=y?.download||{},{tooltip:E="Delete",iconName:P="delete_icon",disabled:$=!1,onClick:_,className:z=""}=y?.delete||{},H=()=>e("div",{className:"ff-dropdown-header-icons",children:[y?.download&&o(r,{title:j,children:o(a,{name:x||"",className:`ff-dropdown-icon ff-download-icon ${S}`,onClick:D,width:18,height:20,disabled:W,hoverEffect:!0})}),y?.delete&&o(r,{title:E,children:o(a,{name:P||"",className:`ff-dropdown-icon ff-delete-icon ${z}`,onClick:_,width:25,height:25,disabled:$,hoverEffect:!0})})]});return e("div",{className:"ff-resolution-dropdown",style:h?{minWidth:h}:{},children:[o("div",{className:"ff-dropdown-notch "+("bottom-center"===u?"bottom-center":"top-left")}),o("div",{className:"ff-dropdown-header",children:o("div",{className:"ff-dropdown-header-content",children:c&&C&&w?e(d,{children:[o(n,{tabsData:C,activeTabId:w,onTabClick:e=>{v&&v(e),"tab-1"===e&&N?N():"tab-2"===e&&b&&b()}}),I&&H()]}):c&&I?e("div",{className:"ff-dropdown-header-dual",children:[e("div",{className:"ff-dropdown-header-item "+("primary"===p?"active":""),onClick:N,children:[o(i,{fontWeight:"semi-bold",className:"ff-dropdown-text",children:t}),l&&o("span",{className:"ff-dropdown-count",children:l})]}),e("div",{className:"ff-dropdown-header-item "+("secondary"===p?"active":""),onClick:b,children:[o(i,{fontWeight:"semi-bold",className:"ff-dropdown-text",children:c}),s&&o("span",{className:"ff-dropdown-count",children:s})]}),H()]}):c?e("div",{className:"ff-dropdown-header-dual",children:[e("div",{className:"ff-dropdown-header-item "+("primary"===p?"active":""),onClick:N,children:[o(i,{fontWeight:"semi-bold",className:"ff-dropdown-text",children:t}),l&&o("span",{className:"ff-dropdown-count",children:l})]}),e("div",{className:"ff-dropdown-header-item "+("secondary"===p?"active":""),onClick:b,children:[o(i,{fontWeight:"semi-bold",className:"ff-dropdown-text",children:c}),s&&o("span",{className:"ff-dropdown-count",children:s})]})]}):o(i,{fontSize:16,fontWeight:"semi-bold",children:t})})}),o("ul",{className:"ff-dropdown-list",children:T?.map((e,d)=>o("li",{className:"ff-dropdown-item",children:e},d))})]})};export{t as default};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './SessionDropdown.scss';
+import Icon from '../Icon';
+import Tabs from '../Tabs';
+import Typography from '../Typography';
+import Tooltip from '../Tooltip';
+const SessionDropdown = ({ header, secondaryHeader, primaryCount, secondaryCount, primaryItems, secondaryItems, width, activeTab = 'primary', activeTabId, onPrimaryTabClick, onSecondaryTabClick, onTabClick, actions, tabsData, notchPosition = 'top-left', }) => {
+    const itemsToDisplay = secondaryHeader && activeTab === 'secondary'
+        ? secondaryItems
+        : primaryItems;
+    const hasSecondaryItems = secondaryCount && parseInt(secondaryCount) > 0;
+    const hasPrimaryItems = primaryCount && parseInt(primaryCount) > 0;
+    const showActionIcons = secondaryHeader && (hasPrimaryItems || hasSecondaryItems);
+    const handleTabClick = (tabId) => {
+        if (onTabClick) {
+            onTabClick(tabId);
+        }
+        if (tabId === 'tab-1' && onPrimaryTabClick) {
+            onPrimaryTabClick();
+        }
+        else if (tabId === 'tab-2' && onSecondaryTabClick) {
+            onSecondaryTabClick();
+        }
+    };
+    const { tooltip: downloadTooltip = 'Download', iconName: downloadIconName = 'download_file', disabled: isDownloadDisabled = false, onClick: onDownloadClick, className: downloadClassName = '', } = actions?.download || {};
+    const { tooltip: deleteTooltip = 'Delete', iconName: deleteIconName = 'delete_icon', disabled: isDeleteDisabled = false, onClick: onDeleteClick, className: deleteClassName = '', } = actions?.delete || {};
+    const renderHeaderIcons = () => (_jsxs("div", { className: "ff-dropdown-header-icons", children: [actions?.download && (_jsx(Tooltip, { title: downloadTooltip, children: _jsx(Icon, { name: downloadIconName || '', className: `ff-dropdown-icon ff-download-icon ${downloadClassName}`, onClick: onDownloadClick, width: 18, height: 20, disabled: isDownloadDisabled, hoverEffect: true }) })), actions?.delete && (_jsx(Tooltip, { title: deleteTooltip, children: _jsx(Icon, { name: deleteIconName || '', className: `ff-dropdown-icon ff-delete-icon ${deleteClassName}`, onClick: onDeleteClick, width: 25, height: 25, disabled: isDeleteDisabled, hoverEffect: true }) }))] }));
+    return (_jsxs("div", { className: "ff-resolution-dropdown", style: width ? { minWidth: width } : {}, children: [_jsx("div", { className: `ff-dropdown-notch ${notchPosition === 'bottom-center' ? 'bottom-center' : 'top-left'}` }), _jsx("div", { className: "ff-dropdown-header", children: _jsx("div", { className: "ff-dropdown-header-content", children: secondaryHeader && tabsData && activeTabId ? (_jsxs(_Fragment, { children: [_jsx(Tabs, { tabsData: tabsData, activeTabId: activeTabId, onTabClick: handleTabClick }), showActionIcons && renderHeaderIcons()] })) : secondaryHeader && showActionIcons ? (_jsxs("div", { className: "ff-dropdown-header-dual", children: [_jsxs("div", { className: `ff-dropdown-header-item ${activeTab === 'primary' ? 'active' : ''}`, onClick: onPrimaryTabClick, children: [_jsx(Typography, { fontWeight: "semi-bold", className: "ff-dropdown-text", children: header }), primaryCount && (_jsx("span", { className: "ff-dropdown-count", children: primaryCount }))] }), _jsxs("div", { className: `ff-dropdown-header-item ${activeTab === 'secondary' ? 'active' : ''}`, onClick: onSecondaryTabClick, children: [_jsx(Typography, { fontWeight: "semi-bold", className: "ff-dropdown-text", children: secondaryHeader }), secondaryCount && (_jsx("span", { className: "ff-dropdown-count", children: secondaryCount }))] }), renderHeaderIcons()] })) : secondaryHeader ? (_jsxs("div", { className: "ff-dropdown-header-dual", children: [_jsxs("div", { className: `ff-dropdown-header-item ${activeTab === 'primary' ? 'active' : ''}`, onClick: onPrimaryTabClick, children: [_jsx(Typography, { fontWeight: "semi-bold", className: "ff-dropdown-text", children: header }), primaryCount && (_jsx("span", { className: "ff-dropdown-count", children: primaryCount }))] }), _jsxs("div", { className: `ff-dropdown-header-item ${activeTab === 'secondary' ? 'active' : ''}`, onClick: onSecondaryTabClick, children: [_jsx(Typography, { fontWeight: "semi-bold", className: "ff-dropdown-text", children: secondaryHeader }), secondaryCount && (_jsx("span", { className: "ff-dropdown-count", children: secondaryCount }))] })] })) : (_jsx(Typography, { fontSize: 16, fontWeight: "semi-bold", children: header })) }) }), _jsx("ul", { className: "ff-dropdown-list", children: itemsToDisplay?.map((item, index) => (_jsx("li", { className: "ff-dropdown-item", children: item }, index))) })] }));
+};
+export default SessionDropdown;
+//# sourceMappingURL=SessionDropdown.js.map

package/lib/components/SessionManager/SessionManager.js

@@ -1 +1,47 @@
-import{jsx as n,jsxs as o}from"react/jsx-runtime";import{forwardRef as e,useState as s}from"react";import"./SessionManager.scss.js";import i from"../Icon/Icon.js";import a from"../Tooltip/Tooltip.js";const c=e(({isRotate:e=!1,modal:c=[],onClick:r=()=>{},tooltip:t={},icons:l=["app_actions_icon","screenshot_icon","video_record_icon","test_gallary_icon","session_setting_icon"],className:m="",disabledIcons:d=[],activeIcon:u=""},p)=>{const[_,f]=s(null),[g,v]=s(null),h=()=>{f(null),v(null)};return n("div",{ref:p,className:`ff-session-manager-container ${e?"vertical":"horizontal"} ${m}`,children:l.map((s,l)=>{const m=d.includes(s);return n(a,{title:t?.[s]||"",placement:e?"right":"bottom",children:o("div",{className:"ff-session-manager-container__icon-wrapper  "+(u===s?"active":""),onMouseEnter:()=>((n,o)=>{d.includes(o)||(f(n),c.includes(o)&&v(o))})(l,s),onMouseLeave:h,onClick:()=>((n,o)=>{d.includes(o)||(r(n),c.includes(o)&&v(g===o?null:o))})(l,s),id:s,children:[n(i,{className:"ff-session-manager-container__icon",name:s,width:24,height:24,color:_===l||u===s?"var(--session-control-bg)":"var(--base-bg-color)",disabled:m}),!m&&c.includes(s)&&g===s&&n("div",{className:"ff-session-manager-container__modal"})]})},s)})})});c.displayName="SessionManager";export{c as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import './SessionManager.scss';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+const SessionManager = forwardRef(({ isRotate = false, modal = [], onClick = () => { }, tooltip = {}, icons = [
+    'app_actions_icon',
+    'screenshot_icon',
+    'video_record_icon',
+    'test_gallary_icon',
+    'session_setting_icon',
+], className = '', disabledIcons = [], activeIcon = '', }, ref) => {
+    const [hoveredIndex, setHoveredIndex] = useState(null);
+    const [activeModal, setActiveModal] = useState(null);
+    const handleIconClick = (index, iconName) => {
+        if (disabledIcons.includes(iconName))
+            return;
+        onClick(index);
+        if (modal.includes(iconName)) {
+            setActiveModal(activeModal === iconName ? null : iconName);
+        }
+    };
+    const handleMouseEnter = (index, iconName) => {
+        if (disabledIcons.includes(iconName))
+            return;
+        setHoveredIndex(index);
+        if (modal.includes(iconName)) {
+            setActiveModal(iconName);
+        }
+    };
+    const handleMouseLeave = () => {
+        setHoveredIndex(null);
+        setActiveModal(null);
+    };
+    const containerClass = `ff-session-manager-container ${isRotate ? 'vertical' : 'horizontal'} ${className}`;
+    return (_jsx("div", { ref: ref, className: containerClass, children: icons.map((iconName, index) => {
+            const isDisabled = disabledIcons.includes(iconName);
+            return (_jsx(Tooltip, { title: tooltip?.[iconName] || '', placement: isRotate ? 'right' : 'bottom', children: _jsxs("div", { className: `ff-session-manager-container__icon-wrapper  ${activeIcon === iconName ? 'active' : ''}`, onMouseEnter: () => handleMouseEnter(index, iconName), onMouseLeave: handleMouseLeave, onClick: () => handleIconClick(index, iconName), id: iconName, children: [_jsx(Icon, { className: "ff-session-manager-container__icon", name: iconName, width: 24, height: 24, color: hoveredIndex === index || activeIcon === iconName
+                                ? 'var(--session-control-bg)'
+                                : 'var(--base-bg-color)', disabled: isDisabled }), !isDisabled &&
+                            modal.includes(iconName) &&
+                            activeModal === iconName && (_jsx("div", { className: "ff-session-manager-container__modal" }))] }) }, iconName));
+        }) }));
+});
+SessionManager.displayName = 'SessionManager';
+export default SessionManager;
+//# sourceMappingURL=SessionManager.js.map

package/lib/components/StateDropdown/StateDropdown.js

@@ -1 +1,76 @@
-import{jsx as e,Fragment as l}from"react/jsx-runtime";import a from"../Typography/Typography.js";import o from"../Select/Select.js";import"./StateDropdown.scss.js";const r=({value:r,isReviewer:t=!1,isApprovePage:p=!1,handleStateValueClick:v,handleDropdownOptionsClick:i,disabled:s=!1,isOnlyReviewer:w=!1,showBorder:d=!1,zIndex:R=200})=>{const n=r.toUpperCase(),u=t&&!p&&"REVIEW"===n,c=("NEW"===n&&!p||p&&"REVIEW"===n||u||"REJECTED"===n&&!p)&&!s?e(o,{label:r,onChange:e=>i(e),optionsList:w&&!p?[{label:"New",value:"New"},{label:"Approve",value:"Approve"}]:t||p?t&&!p&&"REVIEW"!==n?[{label:"REJECTED"===n?"Rejected":"New",value:"REJECTED"===n?"Rejected":"New"},{label:"Review",value:"Review"},{label:"Approve",value:"Approve"}]:t&&p?[{label:"Review",value:"Review"},{label:"Approve",value:"Approve"},{label:"Reject",value:"Reject"}]:u?[{label:"Review",value:"Review"},{label:"Approve",value:"Approve"}]:[{label:"New",value:"New"},{label:"Review",value:"Review"}]:[{label:"REJECTED"===n?"Rejected":"New",value:"REJECTED"===n?"Rejected":"New"},{label:"Review",value:"Review"}],selectedOption:{label:r,value:r},showLabel:!1,showBorder:d,disableInput:!0,selectedOptionColor:"var(--brand-color)",optionZIndex:R,background:"var(--state-dropdown-bg-color)",borderRadius:"4px",width:"96px",height:20}):e(a,{children:r,className:"ff-state-value",onClick:()=>{"review"!==r.toLowerCase()||s||p||t||v()},cursor:s?"text":"pointer"});return e(l,{children:c})};export{r as default};
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import Typography from '../Typography';
+import Select from './../Select/Select';
+import './StateDropdown.scss';
+const StateDropdown = ({ value, isReviewer = false, isApprovePage = false, handleStateValueClick, handleDropdownOptionsClick, disabled = false, isOnlyReviewer = false, showBorder = false, zIndex = 200, }) => {
+    const currentState = value.toUpperCase();
+    const isReviewerAndClickedOnReviewState = isReviewer && !isApprovePage && currentState === 'REVIEW';
+    //TODO Get proper name from API to dispaly in UI
+    const getOptions = () => {
+        if (isOnlyReviewer && !isApprovePage) {
+            return [
+                { label: 'New', value: 'New' },
+                { label: 'Approve', value: 'Approve' },
+            ];
+        }
+        if (!isReviewer && !isApprovePage) {
+            return [
+                {
+                    label: currentState === 'REJECTED' ? 'Rejected' : 'New',
+                    value: currentState === 'REJECTED' ? 'Rejected' : 'New',
+                },
+                { label: 'Review', value: 'Review' },
+            ];
+        }
+        if (isReviewer && !isApprovePage && currentState !== 'REVIEW') {
+            return [
+                {
+                    label: currentState === 'REJECTED' ? 'Rejected' : 'New',
+                    value: currentState === 'REJECTED' ? 'Rejected' : 'New',
+                },
+                { label: 'Review', value: 'Review' },
+                { label: 'Approve', value: 'Approve' },
+            ];
+        }
+        if (isReviewer && isApprovePage) {
+            return [
+                { label: 'Review', value: 'Review' },
+                { label: 'Approve', value: 'Approve' },
+                { label: 'Reject', value: 'Reject' },
+            ];
+        }
+        if (isReviewerAndClickedOnReviewState) {
+            return [
+                {
+                    label: 'Review',
+                    value: 'Review',
+                },
+                {
+                    label: 'Approve',
+                    value: 'Approve',
+                },
+            ];
+        }
+        return [
+            { label: 'New', value: 'New' },
+            { label: 'Review', value: 'Review' },
+        ];
+    };
+    const options = getOptions();
+    const selectedOption = { label: value, value };
+    const showSelect = (currentState === 'NEW' && !isApprovePage) ||
+        (isApprovePage && currentState === 'REVIEW') ||
+        isReviewerAndClickedOnReviewState ||
+        (currentState === 'REJECTED' && !isApprovePage);
+    const content = showSelect && !disabled ? (_jsx(Select, { label: value, onChange: (option) => handleDropdownOptionsClick(option), optionsList: options, selectedOption: selectedOption, showLabel: false, showBorder: showBorder, disableInput: true, selectedOptionColor: "var(--brand-color)", optionZIndex: zIndex, background: "var(--state-dropdown-bg-color)", borderRadius: "4px", width: "96px", height: 20 })) : (_jsx(Typography, { children: value, className: "ff-state-value", onClick: () => {
+            if (value.toLowerCase() === 'review' &&
+                !disabled &&
+                !isApprovePage &&
+                !isReviewer) {
+                handleStateValueClick();
+            }
+        }, cursor: disabled ? 'text' : 'pointer' }));
+    return _jsx(_Fragment, { children: content });
+};
+export default StateDropdown;
+//# sourceMappingURL=StateDropdown.js.map

package/lib/components/StatusBadge/StatusBadge.js

@@ -1 +1,38 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import s from"../Icon/Icon.js";import i from"../Tooltip/Tooltip.js";import a from"../Typography/Typography.js";import"./StatusBadge.scss.js";import{capitalize as r}from"../../utils/capitalize/capitalize.js";const n=({gap:n=8,fontSize:o=12,entityType:l,statusValues:p})=>{const c=t=>{if(Number.isInteger(t))return String(t);const[e,s=""]=String(t).split(".");let i="";return i=1===e?.length?s.slice(0,4).padEnd(4,"0"):2===e?.length?s.slice(0,3).padEnd(3,"0"):s.slice(0,2).padEnd(2,"0"),`${e}.${i}`};return t("div",{className:"ff-statusbadge-container",style:{gap:`${n}px`},children:p.map((n,p)=>{return t(i,{title:`${r(n?.status)}${l?` ${l}`:""} : ${c(n?.value)}`,zIndex:1e3,children:e("div",{className:"ff-statusbadge-item",children:[t(s,{name:(u=n?.status?.toLowerCase(),"passed"===u?"pass_result_icon":"failed"===u?"fail_result_icon":"warning"===u?"warning_result_icon":"skipped_result_icon")}),t(a,{fontSize:o,children:c(n?.value)})]})},`${p}-${n}`);var u})})};export{n as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import Typography from '../Typography';
+import './StatusBadge.scss';
+import { capitalize } from '../../utils/capitalize/capitalize';
+const StatusBadge = ({ gap = 8, fontSize = 12, entityType, statusValues, }) => {
+    const getIconNameForResults = (iconProp) => {
+        if (iconProp === 'passed')
+            return 'pass_result_icon';
+        if (iconProp === 'failed')
+            return 'fail_result_icon';
+        if (iconProp === 'warning')
+            return 'warning_result_icon';
+        return 'skipped_result_icon';
+    };
+    const formatValue5Digit = (num) => {
+        if (Number.isInteger(num))
+            return String(num);
+        const [intPart, decPart = ''] = String(num).split('.');
+        let decimals = '';
+        if (intPart?.length === 1) {
+            decimals = decPart.slice(0, 4).padEnd(4, '0');
+        }
+        else if (intPart?.length === 2) {
+            decimals = decPart.slice(0, 3).padEnd(3, '0');
+        }
+        else {
+            decimals = decPart.slice(0, 2).padEnd(2, '0');
+        }
+        return `${intPart}.${decimals}`;
+    };
+    return (_jsx("div", { className: "ff-statusbadge-container", style: {
+            gap: `${gap}px`,
+        }, children: statusValues.map((val, idx) => (_jsx(Tooltip, { title: `${capitalize(val?.status)}${entityType ? ` ${entityType}` : ''} : ${formatValue5Digit(val?.value)}`, zIndex: 1000, children: _jsxs("div", { className: "ff-statusbadge-item", children: [_jsx(Icon, { name: getIconNameForResults(val?.status?.toLowerCase()) }), _jsx(Typography, { fontSize: fontSize, children: formatValue5Digit(val?.value) })] }) }, `${idx}-${val}`))) }));
+};
+export default StatusBadge;
+//# sourceMappingURL=StatusBadge.js.map

package/lib/components/StatusButton/StatusButton.js

@@ -1 +1,12 @@
-import{jsx as t}from"react/jsx-runtime";import s from"../../_virtual/index.js";import"./StatusButton.scss.js";import o from"../Typography/Typography.js";import a from"../TruncatedTooltip/TruncatedTooltip.js";const e=({status:e="passed",label:i="",onClick:l=()=>{},className:r="",style:u={},disabled:n=!1,useDefaultCursor:p=!1,displayTooltip:d=!1,...f})=>t("button",{className:s("ff-status-button",`ff-status-button--${e}`,{"ff-status-button--default-status-cursor":p},r),style:u,onClick:l,disabled:n,...f,children:t(o,{as:"div",fontWeight:"semi-bold",lineHeight:"16px",textAlign:"center",className:"ff-status-button__text",children:d?t("div",{className:"ff-status-button__tooltip-wrapper",children:t(a,{title:i,width:76})}):i})});export{e as default};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import './StatusButton.scss';
+import Typography from '../Typography';
+import TruncatedTooltip from '../TruncatedTooltip/TruncatedTooltip';
+const StatusButton = ({ status = 'passed', label = '', onClick = () => { }, className = '', style = {}, disabled = false, useDefaultCursor = false, displayTooltip = false, ...props }) => {
+    return (_jsx("button", { className: classNames('ff-status-button', `ff-status-button--${status}`, {
+            'ff-status-button--default-status-cursor': useDefaultCursor,
+        }, className), style: style, onClick: onClick, disabled: disabled, ...props, children: _jsx(Typography, { as: "div", fontWeight: "semi-bold", lineHeight: "16px", textAlign: "center", className: "ff-status-button__text", children: displayTooltip ? (_jsx("div", { className: "ff-status-button__tooltip-wrapper", children: _jsx(TruncatedTooltip, { title: label, width: 76 }) })) : (label) }) }));
+};
+export default StatusButton;
+//# sourceMappingURL=StatusButton.js.map

package/lib/components/StatusCard/StatusCard.js

@@ -1 +1,41 @@
-import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useState as i,useEffect as r}from"react";import s from"../Typography/Typography.js";import a from"../Icon/Icon.js";import"./StatusCard.scss.js";const c=({icon:c,status:n,count:l,text:d,style:f={width:"196.4px"},resetToggle:h,onSelectedStatus:p=e=>{}})=>{const[m,g]=i(!1),x=["total defects","defect density","open defects","closed defects","quality score"],u=x.includes(n.toLowerCase()),S=x.includes(n.toLowerCase());r(()=>{g(!h)},[h]);return e("div",{className:`ff-card-container ${n.toLowerCase()} ${m?"toggled":""}`,style:f,onClick:()=>(e=>{x.includes(e.toLowerCase())||(g(!0),p(e))})(n),children:[e("div",{className:"ff-status-bar",children:[t("div",{children:t(a,{name:c,height:20,width:20,hoverEffect:!1})}),!x.includes(n.toLowerCase())&&t(s,{fontWeight:"semi-bold",fontSize:"10px",textAlign:"center",lineHeight:"15px",className:"ff-status-text",as:"div",children:n.charAt(0).toUpperCase()+n.slice(1).toLowerCase()})]}),t("div",{className:"ff-content "+(S?"red-background":""),children:e(o,u?{children:[t(s,{fontWeight:"semi-bold",fontSize:"10px",className:"ff-text",lineHeight:"15px",color:"var(--ff-chip-text-color)",children:d}),t(s,{fontWeight:"semi-bold",fontSize:"24px",className:"ff-number",lineHeight:"36px",children:"defect density"===n.toLowerCase()?e(o,{children:[l.toString().padStart(2,"0"),t(s,{fontSize:"15px",fontWeight:"semi-bold",children:"/ Modules"})]}):"quality score"===n.toLowerCase()?`${parseFloat(l.toString()).toFixed(2)}%`:l.toString().padStart(2,"0")})]}:{children:[t(s,{fontWeight:"semi-bold",fontSize:"24px",className:"ff-number",lineHeight:"24px",color:m?"var(--base-bg-color)":"",children:l.toString().padStart(2,"0")}),t(s,{className:"ff-text",lineHeight:"18px",color:m?"var(--base-bg-color)":"var(--ff-chip-text-color)",children:d})]})})]})};export{c as default};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import Typography from '../Typography';
+import Icon from '../Icon';
+import './StatusCard.scss';
+const StatusCard = ({ icon, status, count, text, style = { width: '196.4px' }, resetToggle, onSelectedStatus = (_status) => { }, }) => {
+    const [isToggled, setIsToggled] = useState(false);
+    const hideStatusText = [
+        'total defects',
+        'defect density',
+        'open defects',
+        'closed defects',
+        'quality score',
+    ];
+    const swapCountAndText = hideStatusText.includes(status.toLowerCase());
+    const redBackground = hideStatusText.includes(status.toLowerCase());
+    const handleSelectStatus = (status) => {
+        if (hideStatusText.includes(status.toLowerCase())) {
+            return;
+        }
+        setIsToggled(true);
+        onSelectedStatus(status);
+    };
+    useEffect(() => {
+        setIsToggled(!resetToggle);
+    }, [resetToggle]);
+    const handleStaticCard = () => {
+        if (status.toLowerCase() === 'defect density') {
+            return (_jsxs(_Fragment, { children: [count.toString().padStart(2, '0'), _jsx(Typography, { fontSize: "15px", fontWeight: "semi-bold", children: "/ Modules" })] }));
+        }
+        else if (status.toLowerCase() === 'quality score') {
+            return `${parseFloat(count.toString()).toFixed(2)}%`;
+        }
+        else {
+            return count.toString().padStart(2, '0');
+        }
+    };
+    return (_jsxs("div", { className: `ff-card-container ${status.toLowerCase()} ${isToggled ? 'toggled' : ''}`, style: style, onClick: () => handleSelectStatus(status), children: [_jsxs("div", { className: "ff-status-bar", children: [_jsx("div", { children: _jsx(Icon, { name: icon, height: 20, width: 20, hoverEffect: false }) }), !hideStatusText.includes(status.toLowerCase()) && (_jsx(Typography, { fontWeight: "semi-bold", fontSize: "10px", textAlign: "center", lineHeight: "15px", className: "ff-status-text", as: "div", children: status.charAt(0).toUpperCase() + status.slice(1).toLowerCase() }))] }), _jsx("div", { className: `ff-content ${redBackground ? 'red-background' : ''}`, children: swapCountAndText ? (_jsxs(_Fragment, { children: [_jsx(Typography, { fontWeight: "semi-bold", fontSize: "10px", className: "ff-text", lineHeight: "15px", color: 'var(--ff-chip-text-color)', children: text }), _jsx(Typography, { fontWeight: "semi-bold", fontSize: "24px", className: "ff-number", lineHeight: "36px", children: handleStaticCard() })] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { fontWeight: "semi-bold", fontSize: "24px", className: "ff-number", lineHeight: "24px", color: isToggled ? 'var(--base-bg-color)' : '', children: count.toString().padStart(2, '0') }), _jsx(Typography, { className: "ff-text", lineHeight: "18px", color: isToggled ? 'var(--base-bg-color)' : 'var(--ff-chip-text-color)', children: text })] })) })] }));
+};
+export default StatusCard;
+//# sourceMappingURL=StatusCard.js.map

package/lib/components/StatusIndicator/StatusIndicator.js

@@ -1 +1,26 @@
-import{jsx as t,jsxs as a}from"react/jsx-runtime";import{forwardRef as s}from"react";import o from"../Typography/Typography.js";import"./StatusIndicator.scss.js";import r from"../Icon/Icon.js";const i=s(({label:s="Status",iconName:i="update_icon",onClick:n,isDisable:c=!1,variant:e="default",backgroundColor:f=!1,border:d=!1},l)=>{const u={default:"var(--ff-avatar-background-color)",success:"var(--status-success-text-color)",danger:"var(--ff-delete-button-attachment)"};return t("button",{disabled:c,onClick:n,className:`\n         ff-status-indicator\n          ff-status-indicator--${e}\n          ${f?`ff-status-indicator--with-bg ff-status-indicator--${e}-bg`:""}\n          ${d?`ff-status-indicator--with-border ff-status-indicator--${e}-border`:""}\n        `,ref:l,children:a("div",{className:"ff-status-indicator__content",children:[t(r,{name:"danger"===e?"close":i,color:u[e]||u.default,className:`ff-status-indicator__icon ff-status-indicator__icon--${e}`}),t(o,{as:"div",fontSize:12,className:`ff-status-indicator__label ff-status-indicator__label--${e}`,fontWeight:"medium",lineHeight:"20px",children:s})]})})});export{i as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import Typography from '../Typography';
+import './StatusIndicator.scss';
+import Icon from '../Icon';
+const StatusIndicator = forwardRef(({ label = 'Status', iconName = 'update_icon', onClick, isDisable = false, variant = 'default', backgroundColor = false, border = false, }, ref) => {
+    const resolvedIconName = variant === 'danger' ? 'close' : iconName;
+    const variantColorMap = {
+        default: 'var(--ff-avatar-background-color)',
+        success: 'var(--status-success-text-color)',
+        danger: 'var(--ff-delete-button-attachment)',
+    };
+    const iconColor = variantColorMap[variant] || variantColorMap.default;
+    return (_jsx("button", { disabled: isDisable, onClick: onClick, className: `
+         ff-status-indicator
+          ff-status-indicator--${variant}
+          ${backgroundColor
+            ? `ff-status-indicator--with-bg ff-status-indicator--${variant}-bg`
+            : ''}
+          ${border
+            ? `ff-status-indicator--with-border ff-status-indicator--${variant}-border`
+            : ''}
+        `, ref: ref, children: _jsxs("div", { className: "ff-status-indicator__content", children: [_jsx(Icon, { name: resolvedIconName, color: iconColor, className: `ff-status-indicator__icon ff-status-indicator__icon--${variant}` }), _jsx(Typography, { as: "div", fontSize: 12, className: `ff-status-indicator__label ff-status-indicator__label--${variant}`, fontWeight: "medium", lineHeight: "20px", children: label })] }) }));
+});
+export default StatusIndicator;
+//# sourceMappingURL=StatusIndicator.js.map

package/lib/components/StepsLandingTable/Components/StepGroupAccordions.js

@@ -1 +1,85 @@
-import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import n,{memo as a,useRef as o,useEffect as d}from"react";import"./StepInnerTable.scss.js";import i from"../../Typography/Typography.js";import s from"../../Icon/Icon.js";const c=a(({data:a=[],level:p=0,columnCount:l=1,viewModeId:h,ViewComponent:u,handleClick:m,tableType:f,handleStepGroupExpand:y,isStepGroupExpanded:w,isViewPrivilegeMode:x,columns:g=[],parentIndex:v,updateRowHeight:I})=>{const b=o([]),C=new Set(["group","pre","post","script"]),T=p+8,S=(e,t,r,n)=>{const a=e[t.accessor];if(t.cell){const o=e._id||e.id;return t.cell({value:a,row:e,column:t.accessor,index:r,tableType:n,...o&&{refId:o}})}return t.accessor||a&&"object"!=typeof a?a:"--"};return d(()=>{if(!I)return;const e=new ResizeObserver(()=>{let e=0;b.current.forEach(t=>{t&&(e+=t.getBoundingClientRect().height)}),e>0&&I(v??0,e)});return b.current.forEach(t=>{t&&e.observe(t)}),()=>e.disconnect()},[a,I,v,w]),e(t,{children:a?.map((t,a)=>{const o=v??0+a+1,d=C.has(t?.entityType?.toLowerCase())||C.has(t?.type?.toLowerCase());return r(n.Fragment,{children:[e("tr",h===t?.stepId?{ref:e=>b.current[a]=e,className:"steps-edit-row",id:"getInFocus",children:e("td",{colSpan:l,children:e("div",{style:{marginLeft:`${T}px`},children:u&&e(u,{})})})}:{ref:e=>b.current[a]=e,children:g.map((n,a)=>{return e("td",{style:{maxWidth:n.width,padding:(o=t?.type,c=t?.entityType,C.has(o?.toLowerCase())||C.has(c?.toLowerCase())?"6px 8px":"7px 8px")},children:r(i,{as:"div",className:"ff-data-checkbox-container",children:[r("div",{className:"ff-data-checkbox-container-content",style:{marginLeft:0===a?`${T}px`:0},onClick:()=>{0===a&&!t?.displayName?.includes("End")&&!t?.isDisabled&&m?.({...t,tableType:f})},children:[!x&&0===a&&e("div",{style:{padding:"4px 18px"}}),S({...t,marginLeft:T},n)]}),0===a&&d&&e("div",{className:"ff-accordion-arrow "+(w?.(t.stepId)?"expanded":""),children:e(s,{name:"arrow_right",color:w?.(t.stepId)?"var(--brand-color)":"var(--default-color)",className:"steps-arrow-svg",width:12,height:12,onClick:()=>y?.({...t,tableType:f})})})]})},`${t.stepId}-${a}`);var o,c})}),w?.(t.stepId)&&e(c,{data:t.data,level:T,columnCount:l,viewModeId:h,ViewComponent:u,handleClick:m,tableType:f,handleStepGroupExpand:y,isStepGroupExpanded:w,isViewPrivilegeMode:x,columns:g,parentIndex:o,updateRowHeight:I})]},t.stepId)})})});c.displayName="StepGroupAccordions";export{c as default};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable import/order */
+import React, { memo, useRef, useEffect } from 'react';
+import './StepInnerTable.scss';
+import Typography from '../../Typography';
+import Icon from '../../Icon';
+const StepGroupAccordions = memo(({ data = [], level = 0, columnCount = 1, viewModeId, ViewComponent, handleClick, tableType, handleStepGroupExpand, isStepGroupExpanded, isViewPrivilegeMode, columns = [], parentIndex, updateRowHeight, }) => {
+    const rowRefs = useRef([]);
+    const typeSet = new Set(['group', 'pre', 'post', 'script']);
+    const getPadding = (type, entityType) => typeSet.has(type?.toLowerCase()) || typeSet.has(entityType?.toLowerCase())
+        ? '6px 8px'
+        : '7px 8px';
+    const indent = level + 8;
+    const prepareData = (dataObj, columnObj, index, tableType) => {
+        const cellData = dataObj[columnObj.accessor];
+        if (columnObj.cell) {
+            const refId = dataObj._id || dataObj.id;
+            return columnObj.cell({
+                value: cellData,
+                row: dataObj,
+                column: columnObj.accessor,
+                index: index,
+                tableType: tableType,
+                ...(refId && { refId }),
+            });
+        }
+        else if (columnObj.accessor) {
+            return cellData;
+        }
+        else if (cellData && typeof cellData !== 'object') {
+            return cellData;
+        }
+        else {
+            return '--';
+        }
+    };
+    // Measure and report height with ResizeObserver
+    useEffect(() => {
+        if (!updateRowHeight)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            let totalHeight = 0;
+            rowRefs.current.forEach((ref) => {
+                if (ref) {
+                    totalHeight += ref.getBoundingClientRect().height;
+                }
+            });
+            if (totalHeight > 0) {
+                updateRowHeight(parentIndex ?? 0, totalHeight);
+            }
+        });
+        rowRefs.current.forEach((ref) => {
+            if (ref)
+                resizeObserver.observe(ref);
+        });
+        return () => resizeObserver.disconnect();
+    }, [data, updateRowHeight, parentIndex, isStepGroupExpanded]);
+    return (_jsx(_Fragment, { children: data?.map((item, itemIndex) => {
+            const absoluteIndex = parentIndex ?? 0 + itemIndex + 1;
+            const showAccordion = typeSet.has(item?.entityType?.toLowerCase()) ||
+                typeSet.has(item?.type?.toLowerCase());
+            return (_jsxs(React.Fragment, { children: [viewModeId === item?.stepId ? (_jsx("tr", { ref: (el) => (rowRefs.current[itemIndex] = el), className: "steps-edit-row", id: "getInFocus", children: _jsx("td", { colSpan: columnCount, children: _jsx("div", { style: { marginLeft: `${indent}px` }, children: ViewComponent && _jsx(ViewComponent, {}) }) }) })) : (_jsx("tr", { ref: (el) => (rowRefs.current[itemIndex] = el), children: columns.map((col, idx) => (_jsx("td", { style: {
+                                maxWidth: col.width,
+                                padding: getPadding(item?.type, item?.entityType),
+                            }, children: _jsxs(Typography, { as: "div", className: "ff-data-checkbox-container", children: [_jsxs("div", { className: "ff-data-checkbox-container-content", style: {
+                                            marginLeft: idx === 0 ? `${indent}px` : 0,
+                                        }, onClick: () => {
+                                            const isClickable = idx === 0 &&
+                                                !item?.displayName?.includes('End') &&
+                                                !item?.isDisabled;
+                                            if (isClickable)
+                                                handleClick?.({ ...item, tableType });
+                                        }, children: [!isViewPrivilegeMode && idx === 0 && (_jsx("div", { style: { padding: '4px 18px' } })), prepareData({ ...item, marginLeft: indent }, col)] }), idx === 0 && showAccordion && (_jsx("div", { className: `ff-accordion-arrow ${isStepGroupExpanded?.(item.stepId)
+                                            ? 'expanded'
+                                            : ''}`, children: _jsx(Icon, { name: "arrow_right", color: isStepGroupExpanded?.(item.stepId)
+                                                ? 'var(--brand-color)'
+                                                : 'var(--default-color)', className: "steps-arrow-svg", width: 12, height: 12, onClick: () => handleStepGroupExpand?.({
+                                                ...item,
+                                                tableType,
+                                            }) }) }))] }) }, `${item.stepId}-${idx}`))) })), isStepGroupExpanded?.(item.stepId) && (_jsx(StepGroupAccordions, { data: item.data, level: indent, columnCount: columnCount, viewModeId: viewModeId, ViewComponent: ViewComponent, handleClick: handleClick, tableType: tableType, handleStepGroupExpand: handleStepGroupExpand, isStepGroupExpanded: isStepGroupExpanded, isViewPrivilegeMode: isViewPrivilegeMode, columns: columns, parentIndex: absoluteIndex, updateRowHeight: updateRowHeight }))] }, item.stepId));
+        }) }));
+});
+StepGroupAccordions.displayName = 'StepGroupAccordions';
+export default StepGroupAccordions;
+//# sourceMappingURL=StepGroupAccordions.js.map