pixel-react 1.20.18 → 1.20.20

package/lib/components/Charts/MultiRadialChart/MultiRadialChart.js

@@ -1,207 +1 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import './MultiRadialChart.scss';
-import Typography from '../../Typography';
-const calculateArc = (centerX, centerY, radius, startAngle, endAngle) => {
-    const startX = centerX + radius * Math.cos(startAngle);
-    const startY = centerY + radius * Math.sin(startAngle);
-    const endX = centerX + radius * Math.cos(endAngle);
-    const endY = centerY + radius * Math.sin(endAngle);
-    const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
-    return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
-};
-const MultiRadialChart = ({ radius, lineWidth, lineCap, barValues, labelHeading, legendType = 'numberLegend', isLegendDetails = true, isPillValueVisible = true, chartToLegendGap = '16px', legendGap = '8px', labelFontSize = 12, subLabelFontSize = 8, gapBetweenArch = 10, capsuleStyle = { padding: '4px' }, }) => {
-    const [tooltip, setTooltip] = useState({
-        visible: false,
-        x: 0,
-        y: 0,
-        content: '',
-        isArc: false,
-    });
-    const [hoveredLegend, setHoveredLegend] = useState(null);
-    const renderGradients = () => (_jsx("defs", { children: barValues.map((bar, i) => Array.isArray(bar.arcColor) ? (_jsx("linearGradient", { id: `gradient-${i}`, x1: "0%", y1: "0%", x2: "100%", y2: "0%", gradientTransform: "rotate(90)", children: bar.arcColor.map((color, idx) => (_jsx("stop", { offset: `${(idx / (bar.arcColor.length - 1)) * 100}%`, stopColor: color }, idx))) }, `gradient-${i}`)) : null) }));
-    const getArcColor = (bar, index) => Array.isArray(bar.arcColor) ? `url(#gradient-${index})` : bar.arcColor;
-    const getLegendColor = (bar) => Array.isArray(bar.arcColor) ? bar.arcColor[0] : bar.arcColor;
-    const parseValueToMB = (value) => {
-        if (typeof value === 'string') {
-            const match = value.trim().match(/^([\d.]+)\s*([a-zA-Z%]*)$/);
-            if (!match)
-                return 0;
-            const numericValue = parseFloat(match[1] ?? '0');
-            const unit = match[2]?.toUpperCase() || '';
-            if (isNaN(numericValue))
-                return 0;
-            switch (unit) {
-                case 'TB':
-                    return numericValue * 1024 * 1024;
-                case 'GB':
-                    return numericValue * 1024;
-                case 'MB':
-                    return numericValue;
-                case 'KB':
-                    return numericValue / 1024;
-                default:
-                    return numericValue;
-            }
-        }
-        else {
-            return value;
-        }
-    };
-    const normalizedBarValues = barValues.map((item) => {
-        if (typeof item.value === 'string') {
-            const parsedValue = parseValueToMB(item.value);
-            const normalizedValue = isNaN(parsedValue) ? 0 : parsedValue;
-            return {
-                ...item,
-                normalizedValue,
-                labelValue: Number.isInteger(normalizedValue)
-                    ? normalizedValue
-                    : normalizedValue.toFixed(2),
-            };
-        }
-        return {
-            ...item,
-            normalizedValue: item.value,
-            labelValue: Number.isInteger(item.value)
-                ? item.value
-                : item.value?.toFixed(2),
-        };
-    });
-    const totalBarValue = normalizedBarValues.reduce((acc, status) => acc + status.normalizedValue, 0);
-    const baseRadius = radius;
-    const radiusIncrement = lineWidth + gapBetweenArch;
-    const maxRadius = baseRadius + radiusIncrement * (normalizedBarValues.length - 1);
-    const svgSize = 2 * (maxRadius + lineWidth);
-    const reversedBarValues = [...normalizedBarValues].reverse();
-    const labelLines = labelHeading.trim().split(' ');
-    const renderLegend = (legendData, legendType) => {
-        switch (legendType) {
-            case 'numberLegend':
-                return (_jsx("div", { className: "ff-legend-container ff-number-legend", style: { gap: legendGap }, children: legendData.map((item, index) => (_jsxs("div", { className: "ff-legend-item", onMouseEnter: (e) => {
-                            setHoveredLegend(item.barLabel || item.label);
-                            handleMouseEnter(e, `${item.barLabel || 'Data'}: ${item.value}`, false);
-                        }, onMouseMove: handleMouseMove, onMouseLeave: () => {
-                            setHoveredLegend(null);
-                            handleMouseLeave();
-                        }, children: [_jsx(Typography, { fontSize: 20, fontWeight: "semi-bold", className: "ff-legend-value", color: getLegendColor(item), children: item.key.padStart(2, '0') }), _jsx(Typography, { fontSize: 10, className: "ff-legend-key", color: "var(--text-color)", children: item.label })] }, index))) }));
-            case 'pillLegend':
-                return (_jsx("div", { className: "ff-legend-container ff-pill-legend", style: { gap: legendGap }, children: legendData
-                        .slice()
-                        .reverse()
-                        .map((item, index) => (_jsxs("div", { className: "ff-legend-item", onMouseEnter: (e) => {
-                            setHoveredLegend(item.barLabel || item.label);
-                            handleMouseEnter(e, `${item.barLabel || 'Data'}: ${item.value}`, false);
-                        }, onMouseMove: handleMouseMove, onMouseLeave: () => {
-                            setHoveredLegend(null);
-                            handleMouseLeave();
-                        }, children: [_jsx("span", { className: "ff-legend-capsule", style: { backgroundColor: getLegendColor(item) }, children: _jsx(Typography, { fontSize: 10, color: "var(--tooltip-text-color)", style: capsuleStyle, children: isPillValueVisible && item.value }) }), _jsx(Typography, { className: "ff-legend-key", children: item.label })] }, index))) }));
-            default:
-                return null;
-        }
-    };
-    const handleMouseEnter = (e, content, isArc) => {
-        const { clientX, clientY } = e;
-        setTooltip({
-            visible: true,
-            x: clientX,
-            y: clientY,
-            content: content,
-            isArc,
-        });
-    };
-    const handleMouseMove = (e) => {
-        const { clientX, clientY } = e;
-        setTooltip((prev) => ({
-            ...prev,
-            x: clientX,
-            y: clientY,
-        }));
-    };
-    const handleMouseLeave = () => {
-        setTooltip({ visible: false, x: 0, y: 0, content: '', isArc: false });
-    };
-    const textData = (text, maxLength) => {
-        return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
-    };
-    const getArcColorFromTooltip = () => {
-        if (!tooltip.visible)
-            return '';
-        const valueString = tooltip.content.split(':')[0]?.trim();
-        if (valueString === undefined)
-            return '';
-        const matchingBar = normalizedBarValues.find((val) => val.barLabel === valueString);
-        if (!matchingBar)
-            return '';
-        const chartItem = {
-            ...matchingBar,
-            label: matchingBar.barLabel,
-            key: matchingBar.labelValue?.toString() ?? '',
-        };
-        return getLegendColor(chartItem);
-    };
-    const DEFAULT_LINE_HEIGHT = 18;
-    return (_jsxs("div", { className: `ff-multi-radial-chart-container ${legendType === 'numberLegend'
-            ? 'ff-multi-radial-chart-number'
-            : 'ff-multi-radial-chart-pill'}`, style: { gap: chartToLegendGap }, children: [_jsx("div", { className: "relative", style: { width: svgSize, height: svgSize }, children: _jsxs("svg", { width: svgSize, height: svgSize, viewBox: `0 0 ${svgSize} ${svgSize}`, className: "absolute top-0 left-0", children: [renderGradients(), _jsxs("g", { transform: `translate(${svgSize / 2 + 1}, ${svgSize / 2 + 1})`, children: [reversedBarValues.map((values, i) => {
-                                    const originalIndex = normalizedBarValues.length - 1 - i;
-                                    const percentage = values.normalizedValue / totalBarValue;
-                                    const angleIncrement = percentage * 2 * Math.PI;
-                                    let startAngle = -Math.PI / 2;
-                                    let endAngle = startAngle + angleIncrement;
-                                    if (values.normalizedValue === totalBarValue) {
-                                        startAngle = 0;
-                                        endAngle = 2 * Math.PI;
-                                    }
-                                    const currentRadius = baseRadius + radiusIncrement * originalIndex;
-                                    const backGroundArcPath = calculateArc(0, 0, currentRadius, 0, 2 * Math.PI);
-                                    const arcStyle = {
-                                        opacity: hoveredLegend !== null
-                                            ? values.barLabel === hoveredLegend
-                                                ? 1
-                                                : 0.2
-                                            : 1,
-                                        transition: 'opacity 0.3s ease',
-                                    };
-                                    // If value is 0, render a dot at the top of the circle (angle = -Math.PI / 2)
-                                    if (values.normalizedValue === 0) {
-                                        const dotX = currentRadius * Math.cos(-Math.PI / 2);
-                                        const dotY = currentRadius * Math.sin(-Math.PI / 2);
-                                        return (_jsxs("g", { children: [_jsx("path", { d: backGroundArcPath, fill: "none", stroke: values.arcBackgroundColor, strokeWidth: lineWidth, className: "transition-all duration-300", style: arcStyle }), _jsx("circle", { cx: dotX, cy: dotY, r: lineWidth + 1, fill: getArcColor({
-                                                        ...values,
-                                                        label: values.barLabel || '',
-                                                        key: values.labelValue?.toString() || '',
-                                                    }, originalIndex), onMouseEnter: (e) => handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`, true), onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, style: arcStyle })] }, originalIndex));
-                                    }
-                                    const foregroundArcPath = calculateArc(0, 0, currentRadius, startAngle, endAngle);
-                                    return (_jsxs("g", { children: [_jsx("path", { d: backGroundArcPath, fill: "none", stroke: values.arcBackgroundColor, strokeWidth: lineWidth, className: "transition-all duration-300", style: arcStyle }), _jsx("path", { d: foregroundArcPath, fill: "none", stroke: getArcColor({
-                                                    ...values,
-                                                    label: values.barLabel || '',
-                                                    key: values.labelValue?.toString() || '',
-                                                }, originalIndex), strokeWidth: lineWidth, strokeLinecap: lineCap === 'square' ? 'butt' : 'round', onMouseEnter: (e) => handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`, true), onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, style: { pointerEvents: 'stroke', ...arcStyle } })] }, originalIndex));
-                                }), _jsx("text", { x: "0", y: `-${lineWidth + gapBetweenArch + 2}`, fill: getArcColorFromTooltip(), textAnchor: "middle", dominantBaseline: "central", children: tooltip.visible ? (_jsxs(_Fragment, { children: [_jsx("tspan", { x: "0", dy: "0", className: "ff-center-text-tooltip", children: textData(tooltip.content.split(':')[1]?.trim() || '', 9) }), tooltip.content
-                                                .split(':')[0]
-                                                ?.split(' ')
-                                                .map((word, i) => (_jsx("tspan", { x: "0", dy: i === 0
-                                                    ? `${lineWidth + gapBetweenArch + 5}`
-                                                    : DEFAULT_LINE_HEIGHT, className: "ff-center-text-tooltip", children: word }, i)))] })) : (_jsx(_Fragment, { children: labelLines.map((line, index) => {
-                                            if (index === 0) {
-                                                const [firstWord, ...restWords] = line.split(' ');
-                                                return (_jsxs("tspan", { children: [_jsx("tspan", { x: "0", dy: "0", style: { fontSize: `${labelFontSize}px` }, className: "ff-center-first-text", children: firstWord }), _jsx("tspan", { x: "0", dy: DEFAULT_LINE_HEIGHT, style: { fontSize: `${subLabelFontSize}px` }, className: "ff-center-text", children: restWords.join(' ') })] }, index));
-                                            }
-                                            return (_jsx("tspan", { x: "0", dy: index === 0 ? 0 : DEFAULT_LINE_HEIGHT, className: "ff-center-text", style: { fontSize: `${subLabelFontSize}px` }, children: line }, index));
-                                        }) })) })] })] }) }), tooltip.visible && (_jsx("div", { className: "ff-multi-radial-tooltip", style: {
-                    position: 'fixed',
-                    top: `${tooltip.y + 10}px`,
-                    left: `${tooltip.x + 15}px`,
-                    zIndex: 1000,
-                    pointerEvents: 'none',
-                }, children: tooltip.content })), isLegendDetails &&
-                renderLegend(normalizedBarValues.map((value) => ({
-                    ...value,
-                    label: value?.barLabel,
-                    key: value.labelValue?.toString(),
-                })), legendType)] }));
-};
-export default MultiRadialChart;
-//# sourceMappingURL=MultiRadialChart.js.map
+import{jsxs as e,jsx as t,Fragment as a}from"react/jsx-runtime";import{useState as l}from"react";import"./MultiRadialChart.scss.js";import r from"../../Typography/Typography.js";const n=(e,t,a,l,r)=>{const n=e+a*Math.cos(l),i=t+a*Math.sin(l),o=e+a*Math.cos(r),s=t+a*Math.sin(r);return`M ${n} ${i} A ${a} ${a} 0 ${r-l>Math.PI?1:0} 1 ${o} ${s}`},i=({radius:i,lineWidth:o,lineCap:s,barValues:c,labelHeading:d,legendType:u="numberLegend",isLegendDetails:f=!0,isPillValueVisible:p=!0,chartToLegendGap:h="16px",legendGap:m="8px",labelFontSize:b=12,subLabelFontSize:g=8,gapBetweenArch:y=10,capsuleStyle:v={padding:"4px"}})=>{const[x,M]=l({visible:!1,x:0,y:0,content:"",isArc:!1}),[$,N]=l(null),L=(e,t)=>Array.isArray(e.arcColor)?`url(#gradient-${t})`:e.arcColor,k=e=>Array.isArray(e.arcColor)?e.arcColor[0]:e.arcColor,z=c.map(e=>{if("string"==typeof e.value){const t=(e=>{if("string"!=typeof e)return e;{const t=e.trim().match(/^([\d.]+)\s*([a-zA-Z%]*)$/);if(!t)return 0;const a=parseFloat(t[1]??"0"),l=t[2]?.toUpperCase()||"";if(isNaN(a))return 0;switch(l){case"TB":return 1024*a*1024;case"GB":return 1024*a;case"MB":default:return a;case"KB":return a/1024}}})(e.value),a=isNaN(t)?0:t;return{...e,normalizedValue:a,labelValue:Number.isInteger(a)?a:a.toFixed(2)}}return{...e,normalizedValue:e.value,labelValue:Number.isInteger(e.value)?e.value:e.value?.toFixed(2)}}),C=z.reduce((e,t)=>e+t.normalizedValue,0),V=i,S=o+y,A=2*(V+S*(z.length-1)+o),I=[...z].reverse(),B=d.trim().split(" "),P=(e,t,a)=>{const{clientX:l,clientY:r}=e;M({visible:!0,x:l,y:r,content:t,isArc:a})},w=e=>{const{clientX:t,clientY:a}=e;M(e=>({...e,x:t,y:a}))},E=()=>{M({visible:!1,x:0,y:0,content:"",isArc:!1})};return e("div",{className:"ff-multi-radial-chart-container "+("numberLegend"===u?"ff-multi-radial-chart-number":"ff-multi-radial-chart-pill"),style:{gap:h},children:[t("div",{className:"relative",style:{width:A,height:A},children:e("svg",{width:A,height:A,viewBox:`0 0 ${A} ${A}`,className:"absolute top-0 left-0",children:[t("defs",{children:c.map((e,a)=>Array.isArray(e.arcColor)?t("linearGradient",{id:`gradient-${a}`,x1:"0%",y1:"0%",x2:"100%",y2:"0%",gradientTransform:"rotate(90)",children:e.arcColor.map((a,l)=>t("stop",{offset:l/(e.arcColor.length-1)*100+"%",stopColor:a},l))},`gradient-${a}`):null)}),e("g",{transform:`translate(${A/2+1}, ${A/2+1})`,children:[I.map((a,l)=>{const r=z.length-1-l,i=2*(a.normalizedValue/C)*Math.PI;let c=-Math.PI/2,d=c+i;a.normalizedValue===C&&(c=0,d=2*Math.PI);const u=V+S*r,f=n(0,0,u,0,2*Math.PI),p={opacity:null!==$?a.barLabel===$?1:.2:1,transition:"opacity 0.3s ease"};if(0===a.normalizedValue){const l=u*Math.cos(-Math.PI/2),n=u*Math.sin(-Math.PI/2);return e("g",{children:[t("path",{d:f,fill:"none",stroke:a.arcBackgroundColor,strokeWidth:o,className:"transition-all duration-300",style:p}),t("circle",{cx:l,cy:n,r:o+1,fill:L({...a,label:a.barLabel||"",key:a.labelValue?.toString()||""},r),onMouseEnter:e=>P(e,`${a.barLabel||"Data"}: ${a.value}`,!0),onMouseMove:w,onMouseLeave:E,style:p})]},r)}const h=n(0,0,u,c,d);return e("g",{children:[t("path",{d:f,fill:"none",stroke:a.arcBackgroundColor,strokeWidth:o,className:"transition-all duration-300",style:p}),t("path",{d:h,fill:"none",stroke:L({...a,label:a.barLabel||"",key:a.labelValue?.toString()||""},r),strokeWidth:o,strokeLinecap:"square"===s?"butt":"round",onMouseEnter:e=>P(e,`${a.barLabel||"Data"}: ${a.value}`,!0),onMouseMove:w,onMouseLeave:E,style:{pointerEvents:"stroke",...p}})]},r)}),t("text",{x:"0",y:`-${o+y+2}`,fill:(()=>{if(!x.visible)return"";const e=x.content.split(":")[0]?.trim();if(void 0===e)return"";const t=z.find(t=>t.barLabel===e);if(!t)return"";const a={...t,label:t.barLabel,key:t.labelValue?.toString()??""};return k(a)})(),textAnchor:"middle",dominantBaseline:"central",children:x.visible?e(a,{children:[t("tspan",{x:"0",dy:"0",className:"ff-center-text-tooltip",children:(T=x.content.split(":")[1]?.trim()||"",D=9,T.length>D?T.slice(0,D)+"...":T)}),x.content.split(":")[0]?.split(" ").map((e,a)=>t("tspan",{x:"0",dy:0===a?`${o+y+5}`:18,className:"ff-center-text-tooltip",children:e},a))]}):t(a,{children:B.map((a,l)=>{if(0===l){const[r,...n]=a.split(" ");return e("tspan",{children:[t("tspan",{x:"0",dy:"0",style:{fontSize:`${b}px`},className:"ff-center-first-text",children:r}),t("tspan",{x:"0",dy:18,style:{fontSize:`${g}px`},className:"ff-center-text",children:n.join(" ")})]},l)}return t("tspan",{x:"0",dy:0===l?0:18,className:"ff-center-text",style:{fontSize:`${g}px`},children:a},l)})})})]})]})}),x.visible&&t("div",{className:"ff-multi-radial-tooltip",style:{position:"fixed",top:`${x.y+10}px`,left:`${x.x+15}px`,zIndex:1e3,pointerEvents:"none"},children:x.content}),f&&((a,l)=>{switch(l){case"numberLegend":return t("div",{className:"ff-legend-container ff-number-legend",style:{gap:m},children:a.map((a,l)=>e("div",{className:"ff-legend-item",onMouseEnter:e=>{N(a.barLabel||a.label),P(e,`${a.barLabel||"Data"}: ${a.value}`,!1)},onMouseMove:w,onMouseLeave:()=>{N(null),E()},children:[t(r,{fontSize:20,fontWeight:"semi-bold",className:"ff-legend-value",color:k(a),children:a.key.padStart(2,"0")}),t(r,{fontSize:10,className:"ff-legend-key",color:"var(--text-color)",children:a.label})]},l))});case"pillLegend":return t("div",{className:"ff-legend-container ff-pill-legend",style:{gap:m},children:a.slice().reverse().map((a,l)=>e("div",{className:"ff-legend-item",onMouseEnter:e=>{N(a.barLabel||a.label),P(e,`${a.barLabel||"Data"}: ${a.value}`,!1)},onMouseMove:w,onMouseLeave:()=>{N(null),E()},children:[t("span",{className:"ff-legend-capsule",style:{backgroundColor:k(a)},children:t(r,{fontSize:10,color:"var(--tooltip-text-color)",style:v,children:p&&a.value})}),t(r,{className:"ff-legend-key",children:a.label})]},l))});default:return null}})(z.map(e=>({...e,label:e?.barLabel,key:e.labelValue?.toString()})),u)]});var T,D};export{i as default};

package/lib/components/Charts/MultiRadialChart/MultiRadialChart.scss.js

@@ -0,0 +1 @@
+import t from"../../../node_modules/style-inject/dist/style-inject.es.js";t(".ff-multi-radial-chart-container .ff-center-text-tooltip,.fontXs{font-family:Poppins;font-size:10px}.ff-multi-radial-chart-container .ff-multi-radial-tooltip,.fontSm{font-family:Poppins;font-size:12px}.fontMd{font-size:14px}.fontLg,.fontMd{font-family:Poppins}.fontLg{font-size:16px}.fontXL{font-size:18px}.font2Xl,.fontXL{font-family:Poppins}.font2Xl{font-size:24px}.font-size-8{font-family:Poppins;font-size:8px}.font-size-10{font-family:Poppins;font-size:10px}.ff-multi-radial-chart-container .ff-center-first-text,.font-size-20{font-family:Poppins;font-size:20px}.font-size-32{font-family:Poppins;font-size:32px}.font-size-80{font-family:Poppins;font-size:80px}.ff-multi-radial-chart-container{align-items:center;cursor:pointer;display:flex;position:relative}.ff-multi-radial-chart-container.ff-multi-radial-chart-number{flex-direction:column}.ff-multi-radial-chart-container.ff-multi-radial-chart-pill{flex-direction:row}.ff-multi-radial-chart-container .ff-center-first-text{color:var(--text-color);font-weight:600}.ff-multi-radial-chart-container .ff-center-text{color:var(--text-color);font-weight:400}.ff-multi-radial-chart-container .ff-center-text-tooltip{font-weight:600}.ff-multi-radial-chart-container .ff-multi-radial-tooltip{background-color:var(--tooltip-bg-color);border-radius:4px;color:var(--primary-icon-color);font-weight:400;padding:5px 10px;pointer-events:none;position:absolute;z-index:1000}.ff-multi-radial-chart-container .ff-legend-container{display:grid;gap:10px}.ff-multi-radial-chart-container .ff-legend-container.ff-number-legend{grid-template-columns:repeat(3,1fr);margin-top:21px}.ff-multi-radial-chart-container .ff-legend-container.ff-number-legend .ff-legend-item{align-items:center;display:flex;flex-direction:column}.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend{display:flex;flex-direction:column;grid-template-columns:auto;justify-content:center;margin-left:8px}.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item{align-items:center;display:flex;flex-direction:row}.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule{align-items:center;background-color:var(--status-success-text-color);border-radius:15px;color:var(--text-color);display:flex;height:15px;justify-content:center;min-width:21px}.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key{color:var(--text-color);margin-left:8px}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk11bHRpUmFkaWFsQ2hhcnQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxpRUFDRSxtQkFBc0IsQ0FDdEIsY0FDRixDQUVBLGtFQUNFLG1CQUFzQixDQUN0QixjQUNGLENBRUEsUUFFRSxjQUNGLENBRUEsZ0JBSkUsbUJBT0YsQ0FIQSxRQUVFLGNBQ0YsQ0FFQSxRQUVFLGNBQ0YsQ0FFQSxpQkFKRSxtQkFPRixDQUhBLFNBRUUsY0FDRixDQUVBLGFBQ0UsbUJBQXNCLENBQ3RCLGFBQ0YsQ0FFQSxjQUNFLG1CQUFzQixDQUN0QixjQUNGLENBRUEscUVBQ0UsbUJBQXNCLENBQ3RCLGNBQ0YsQ0FFQSxjQUNFLG1CQUFzQixDQUN0QixjQUNGLENBRUEsY0FDRSxtQkFBc0IsQ0FDdEIsY0FDRixDQUVBLGlDQUlFLGtCQUFtQixDQUZuQixjQUFlLENBQ2YsWUFBYSxDQUZiLGlCQUlGLENBQ0EsOERBQ0UscUJBQ0YsQ0FDQSw0REFDRSxrQkFDRixDQUNBLHVEQUNFLHVCQUF3QixDQUN4QixlQUNGLENBQ0EsaURBQ0UsdUJBQXdCLENBQ3hCLGVBQ0YsQ0FDQSx5REFDRSxlQUNGLENBQ0EsMERBR0Usd0NBQXlDLENBR3pDLGlCQUFrQixDQUZsQiwrQkFBZ0MsQ0FGaEMsZUFBZ0IsQ0FHaEIsZ0JBQWlCLENBRWpCLG1CQUFvQixDQU5wQixpQkFBa0IsQ0FPbEIsWUFDRixDQUNBLHNEQUNFLFlBQWEsQ0FDYixRQUNGLENBQ0EsdUVBQ0UsbUNBQXFDLENBQ3JDLGVBQ0YsQ0FDQSx1RkFHRSxrQkFBbUIsQ0FGbkIsWUFBYSxDQUNiLHFCQUVGLENBQ0EscUVBRUUsWUFBYSxDQUNiLHFCQUFzQixDQUZ0QiwwQkFBMkIsQ0FHM0Isc0JBQXVCLENBQ3ZCLGVBQ0YsQ0FDQSxxRkFHRSxrQkFBbUIsQ0FGbkIsWUFBYSxDQUNiLGtCQUVGLENBQ0Esd0dBUUUsa0JBQW1CLENBUG5CLGlEQUFrRCxDQUVsRCxrQkFBbUIsQ0FEbkIsdUJBQXdCLENBSXhCLFlBQWEsQ0FEYixXQUFZLENBRVosc0JBQXVCLENBSHZCLGNBS0YsQ0FDQSxvR0FFRSx1QkFBd0IsQ0FEeEIsZUFFRiIsImZpbGUiOiJNdWx0aVJhZGlhbENoYXJ0LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuZm9udFhzLCAuZmYtbXVsdGktcmFkaWFsLWNoYXJ0LWNvbnRhaW5lciAuZmYtY2VudGVyLXRleHQtdG9vbHRpcCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAxMHB4O1xufVxuXG4uZm9udFNtLCAuZmYtbXVsdGktcmFkaWFsLWNoYXJ0LWNvbnRhaW5lciAuZmYtbXVsdGktcmFkaWFsLXRvb2x0aXAge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMTJweDtcbn1cblxuLmZvbnRNZCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAxNHB4O1xufVxuXG4uZm9udExnIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDE2cHg7XG59XG5cbi5mb250WEwge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMThweDtcbn1cblxuLmZvbnQyWGwge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMjRweDtcbn1cblxuLmZvbnQtc2l6ZS04IHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDhweDtcbn1cblxuLmZvbnQtc2l6ZS0xMCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAxMHB4O1xufVxuXG4uZm9udC1zaXplLTIwLCAuZmYtbXVsdGktcmFkaWFsLWNoYXJ0LWNvbnRhaW5lciAuZmYtY2VudGVyLWZpcnN0LXRleHQge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMjBweDtcbn1cblxuLmZvbnQtc2l6ZS0zMiB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAzMnB4O1xufVxuXG4uZm9udC1zaXplLTgwIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDgwcHg7XG59XG5cbi5mZi1tdWx0aS1yYWRpYWwtY2hhcnQtY29udGFpbmVyIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG59XG4uZmYtbXVsdGktcmFkaWFsLWNoYXJ0LWNvbnRhaW5lci5mZi1tdWx0aS1yYWRpYWwtY2hhcnQtbnVtYmVyIHtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbn1cbi5mZi1tdWx0aS1yYWRpYWwtY2hhcnQtY29udGFpbmVyLmZmLW11bHRpLXJhZGlhbC1jaGFydC1waWxsIHtcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcbn1cbi5mZi1tdWx0aS1yYWRpYWwtY2hhcnQtY29udGFpbmVyIC5mZi1jZW50ZXItZmlyc3QtdGV4dCB7XG4gIGNvbG9yOiB2YXIoLS10ZXh0LWNvbG9yKTtcbiAgZm9udC13ZWlnaHQ6IDYwMDtcbn1cbi5mZi1tdWx0aS1yYWRpYWwtY2hhcnQtY29udGFpbmVyIC5mZi1jZW50ZXItdGV4dCB7XG4gIGNvbG9yOiB2YXIoLS10ZXh0LWNvbG9yKTtcbiAgZm9udC13ZWlnaHQ6IDQwMDtcbn1cbi5mZi1tdWx0aS1yYWRpYWwtY2hhcnQtY29udGFpbmVyIC5mZi1jZW50ZXItdGV4dC10b29sdGlwIHtcbiAgZm9udC13ZWlnaHQ6IDYwMDtcbn1cbi5mZi1tdWx0aS1yYWRpYWwtY2hhcnQtY29udGFpbmVyIC5mZi1tdWx0aS1yYWRpYWwtdG9vbHRpcCB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgZm9udC13ZWlnaHQ6IDQwMDtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdG9vbHRpcC1iZy1jb2xvcik7XG4gIGNvbG9yOiB2YXIoLS1wcmltYXJ5LWljb24tY29sb3IpO1xuICBwYWRkaW5nOiA1cHggMTBweDtcbiAgYm9yZGVyLXJhZGl1czogNHB4O1xuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgei1pbmRleDogMTAwMDtcbn1cbi5mZi1tdWx0aS1yYWRpYWwtY2hhcnQtY29udGFpbmVyIC5mZi1sZWdlbmQtY29udGFpbmVyIHtcbiAgZGlzcGxheTogZ3JpZDtcbiAgZ2FwOiAxMHB4O1xufVxuLmZmLW11bHRpLXJhZGlhbC1jaGFydC1jb250YWluZXIgLmZmLWxlZ2VuZC1jb250YWluZXIuZmYtbnVtYmVyLWxlZ2VuZCB7XG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDMsIDFmcik7XG4gIG1hcmdpbi10b3A6IDIxcHg7XG59XG4uZmYtbXVsdGktcmFkaWFsLWNoYXJ0LWNvbnRhaW5lciAuZmYtbGVnZW5kLWNvbnRhaW5lci5mZi1udW1iZXItbGVnZW5kIC5mZi1sZWdlbmQtaXRlbSB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG59XG4uZmYtbXVsdGktcmFkaWFsLWNoYXJ0LWNvbnRhaW5lciAuZmYtbGVnZW5kLWNvbnRhaW5lci5mZi1waWxsLWxlZ2VuZCB7XG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogYXV0bztcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIG1hcmdpbi1sZWZ0OiA4cHg7XG59XG4uZmYtbXVsdGktcmFkaWFsLWNoYXJ0LWNvbnRhaW5lciAuZmYtbGVnZW5kLWNvbnRhaW5lci5mZi1waWxsLWxlZ2VuZCAuZmYtbGVnZW5kLWl0ZW0ge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xufVxuLmZmLW11bHRpLXJhZGlhbC1jaGFydC1jb250YWluZXIgLmZmLWxlZ2VuZC1jb250YWluZXIuZmYtcGlsbC1sZWdlbmQgLmZmLWxlZ2VuZC1pdGVtIC5mZi1sZWdlbmQtY2Fwc3VsZSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXN0YXR1cy1zdWNjZXNzLXRleHQtY29sb3IpO1xuICBjb2xvcjogdmFyKC0tdGV4dC1jb2xvcik7XG4gIGJvcmRlci1yYWRpdXM6IDE1cHg7XG4gIG1pbi13aWR0aDogMjFweDtcbiAgaGVpZ2h0OiAxNXB4O1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbn1cbi5mZi1tdWx0aS1yYWRpYWwtY2hhcnQtY29udGFpbmVyIC5mZi1sZWdlbmQtY29udGFpbmVyLmZmLXBpbGwtbGVnZW5kIC5mZi1sZWdlbmQtaXRlbSAuZmYtbGVnZW5kLWtleSB7XG4gIG1hcmdpbi1sZWZ0OiA4cHg7XG4gIGNvbG9yOiB2YXIoLS10ZXh0LWNvbG9yKTtcbn0iXX0= */");

package/lib/components/Charts/PieChart/PieChart.js

@@ -1,134 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import './PieChart.scss';
-import Typography from '../../Typography';
-const calculateArc = ({ x, y, radius, startAngle, endAngle, }) => {
-    const startX = x + radius * Math.cos(startAngle);
-    const startY = y + radius * Math.sin(startAngle);
-    const endX = x + radius * Math.cos(endAngle);
-    const endY = y + radius * Math.sin(endAngle);
-    const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
-    return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY} L ${x} ${y} Z`;
-};
-const calculateArcAngles = (value, total, currentAngle, radius) => {
-    if (total === 0) {
-        return {
-            endAngle: currentAngle,
-            backgroundArcPath: '',
-            foregroundArcPath: '',
-            percentage: 0,
-        };
-    }
-    const percentage = value / total;
-    const angleIncrement = percentage * 2 * Math.PI;
-    const startAngle = currentAngle;
-    const endAngle = startAngle + angleIncrement;
-    if (percentage === 1) {
-        const path = `
-      M ${radius} 0 
-      A ${radius} ${radius} 0 1 1 ${-radius} 0 
-      A ${radius} ${radius} 0 1 1 ${radius} 0 
-      Z
-    `;
-        return {
-            endAngle,
-            backgroundArcPath: path,
-            foregroundArcPath: path,
-            percentage,
-        };
-    }
-    const path = calculateArc({
-        x: 0,
-        y: 0,
-        radius,
-        startAngle,
-        endAngle,
-    });
-    return {
-        endAngle,
-        backgroundArcPath: path,
-        foregroundArcPath: path,
-        percentage,
-    };
-};
-const PieChart = ({ radius = 15, colors = [], data = [], chartBorder = false, }) => {
-    const [tooltip, setTooltip] = useState(null);
-    const [tooltipPosition, setTooltipPosition] = useState({
-        x: 0,
-        y: 0,
-    });
-    const [hoveredIndex, setHoveredIndex] = useState(null);
-    const normalizedData = data.map((item) => {
-        let normalizedValue;
-        if (typeof item.value === 'string') {
-            const parsedValue = parseFloat(item.value);
-            normalizedValue = isNaN(parsedValue) ? 0 : parsedValue;
-        }
-        else {
-            normalizedValue = item.value;
-        }
-        return {
-            ...item,
-            value: normalizedValue,
-            labelValue: Number.isInteger(normalizedValue)
-                ? item.value
-                : normalizedValue.toFixed(2),
-        };
-    });
-    const total = normalizedData.reduce((acc, item) => acc + item.value, 0);
-    const nonZeroCount = normalizedData.filter((item) => item.value > 0).length;
-    const isSingleSegment = nonZeroCount === 1;
-    let currentAngle = -Math.PI / 2;
-    const svgSize = 2 * (radius + 5);
-    const chartData = chartBorder && normalizedData.length > 0
-        ? [
-            {
-                label: normalizedData[0]?.label || '',
-                value: normalizedData
-                    .slice(1)
-                    .reduce((acc, item) => acc + item.value, 0),
-            },
-            ...normalizedData.slice(1),
-        ]
-        : normalizedData;
-    const handleMouseMove = (e) => {
-        const { clientX: x, clientY: y } = e;
-        setTooltipPosition({ x, y });
-    };
-    const handleMouseEnter = (item, color, index, isLegend = false) => {
-        setHoveredIndex(index);
-        if (!isLegend) {
-            setTooltip({ label: item.label, value: item.value, color });
-        }
-    };
-    const handleMouseLeave = () => {
-        setTooltip(null);
-        setHoveredIndex(null);
-    };
-    const getSegmentStyle = (index) => ({
-        transform: hoveredIndex === index ? 'scale(1.1)' : 'scale(1)',
-        transition: 'transform 0.3s ease, opacity 0.3s ease',
-        opacity: hoveredIndex === null || hoveredIndex === index ? 1 : 0.5,
-    });
-    const legendItems = normalizedData.map((item, index) => (_jsxs("div", { className: "ff-pie-chart-legend-item", onMouseEnter: () => handleMouseEnter(item, colors[index % colors.length] || '', index, true), onMouseLeave: handleMouseLeave, children: [_jsx(Typography, { as: "div", fontSize: 24, fontWeight: "semi-bold", lineHeight: "36px", color: colors[index % colors.length] || '', children: item.labelValue }), _jsx(Typography, { as: "div", fontSize: 10, fontWeight: "regular", lineHeight: "18px", className: "ff-pie-chart-legend-value", children: item.label })] }, item.label)));
-    if (total === 0) {
-        const fullCirclePath = `M ${radius} 0 A ${radius} ${radius} 0 1 1 ${-radius} 0 A ${radius} ${radius} 0 1 1 ${radius} 0 Z`;
-        return (_jsxs("div", { className: "ff-pie-chart-container", onMouseMove: handleMouseMove, children: [_jsx("div", { className: `${chartBorder ? 'ff-pie-chart-border' : ''}`, style: { width: svgSize, height: svgSize }, children: _jsx("svg", { width: svgSize, height: svgSize, viewBox: `0 0 ${svgSize} ${svgSize}`, children: _jsx("g", { transform: `translate(${radius + 5}, ${radius + 5})`, children: _jsx("path", { d: fullCirclePath, fill: "var(--tooltip-bg-color)", stroke: "white", strokeWidth: 0.5, opacity: 0.2 }) }) }) }), tooltip && (_jsxs("div", { className: "ff-pie-chart-tooltip", style: { top: tooltipPosition.y, left: tooltipPosition.x }, children: [tooltip.label, " : ", tooltip.value] })), _jsx("div", { className: "ff-pie-chart-legend", children: legendItems })] }));
-    }
-    return (_jsxs("div", { className: "ff-pie-chart-container", onMouseMove: handleMouseMove, children: [_jsx("div", { className: `${chartBorder ? 'ff-pie-chart-border' : ''}`, style: { width: svgSize, height: svgSize }, children: _jsx("svg", { width: svgSize, height: svgSize, viewBox: `0 0 ${svgSize} ${svgSize}`, children: _jsx("g", { transform: `translate(${radius + 5}, ${radius + 5})`, children: chartData.map((item, index) => {
-                            if (item.value > 0) {
-                                const color = colors[index % colors.length] || '';
-                                const { endAngle, backgroundArcPath } = calculateArcAngles(item.value, total, currentAngle, radius);
-                                currentAngle = endAngle;
-                                if (isSingleSegment) {
-                                    return (_jsxs("g", { onMouseEnter: () => handleMouseEnter(item, color, index), onMouseLeave: handleMouseLeave, style: getSegmentStyle(index), children: [_jsx("path", { d: backgroundArcPath, fill: color, stroke: "white", strokeWidth: 0.5 }), _jsx("line", { x1: 0, y1: radius, x2: 0, y2: 0, stroke: "white", strokeWidth: 2 })] }, item.label));
-                                }
-                                else {
-                                    return (_jsxs("g", { children: [_jsx("path", { d: backgroundArcPath, fill: color, stroke: "white", strokeWidth: 0.5, onMouseEnter: () => handleMouseEnter(item, color, index), onMouseLeave: handleMouseLeave, style: getSegmentStyle(index) }), _jsx("text", { x: (radius / 2) * Math.cos((currentAngle + endAngle) / 2), y: (radius / 2) * Math.sin((currentAngle + endAngle) / 2), fill: "white", textAnchor: "middle", dominantBaseline: "central" })] }, item.label));
-                                }
-                            }
-                            return null;
-                        }) }) }) }), tooltip && (_jsxs("div", { className: "ff-pie-chart-tooltip", style: { top: tooltipPosition.y, left: tooltipPosition.x }, children: [tooltip.label, " : ", tooltip.value] })), _jsx("div", { className: "ff-pie-chart-legend", children: legendItems })] }));
-};
-export default PieChart;
-//# sourceMappingURL=PieChart.js.map
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l}from"react";import"./PieChart.scss.js";import a from"../../Typography/Typography.js";const r=(e,t,l,a)=>{if(0===t)return{endAngle:l,backgroundArcPath:"",foregroundArcPath:"",percentage:0};const r=e/t,n=l+2*r*Math.PI;if(1===r){const e=`\n      M ${a} 0 \n      A ${a} ${a} 0 1 1 ${-a} 0 \n      A ${a} ${a} 0 1 1 ${a} 0 \n      Z\n    `;return{endAngle:n,backgroundArcPath:e,foregroundArcPath:e,percentage:r}}const i=(({x:e,y:t,radius:l,startAngle:a,endAngle:r})=>{const n=e+l*Math.cos(a),i=t+l*Math.sin(a),o=e+l*Math.cos(r),s=t+l*Math.sin(r);return`M ${n} ${i} A ${l} ${l} 0 ${r-a>Math.PI?1:0} 1 ${o} ${s} L ${e} ${t} Z`})({x:0,y:0,radius:a,startAngle:l,endAngle:n});return{endAngle:n,backgroundArcPath:i,foregroundArcPath:i,percentage:r}},n=({radius:n=15,colors:i=[],data:o=[],chartBorder:s=!1})=>{const[c,h]=l(null),[d,u]=l({x:0,y:0}),[f,g]=l(null),p=o.map(e=>{let t;if("string"==typeof e.value){const l=parseFloat(e.value);t=isNaN(l)?0:l}else t=e.value;return{...e,value:t,labelValue:Number.isInteger(t)?e.value:t.toFixed(2)}}),v=p.reduce((e,t)=>e+t.value,0),$=1===p.filter(e=>e.value>0).length;let m=-Math.PI/2;const y=2*(n+5),M=s&&p.length>0?[{label:p[0]?.label||"",value:p.slice(1).reduce((e,t)=>e+t.value,0)},...p.slice(1)]:p,A=e=>{const{clientX:t,clientY:l}=e;u({x:t,y:l})},b=(e,t,l,a=!1)=>{g(l),a||h({label:e.label,value:e.value,color:t})},x=()=>{h(null),g(null)},N=e=>({transform:f===e?"scale(1.1)":"scale(1)",transition:"transform 0.3s ease, opacity 0.3s ease",opacity:null===f||f===e?1:.5}),k=p.map((l,r)=>e("div",{className:"ff-pie-chart-legend-item",onMouseEnter:()=>b(l,i[r%i.length]||"",r,!0),onMouseLeave:x,children:[t(a,{as:"div",fontSize:24,fontWeight:"semi-bold",lineHeight:"36px",color:i[r%i.length]||"",children:l.labelValue}),t(a,{as:"div",fontSize:10,fontWeight:"regular",lineHeight:"18px",className:"ff-pie-chart-legend-value",children:l.label})]},l.label));if(0===v){return e("div",{className:"ff-pie-chart-container",onMouseMove:A,children:[t("div",{className:""+(s?"ff-pie-chart-border":""),style:{width:y,height:y},children:t("svg",{width:y,height:y,viewBox:`0 0 ${y} ${y}`,children:t("g",{transform:`translate(${n+5}, ${n+5})`,children:t("path",{d:`M ${n} 0 A ${n} ${n} 0 1 1 ${-n} 0 A ${n} ${n} 0 1 1 ${n} 0 Z`,fill:"var(--tooltip-bg-color)",stroke:"white",strokeWidth:.5,opacity:.2})})})}),c&&e("div",{className:"ff-pie-chart-tooltip",style:{top:d.y,left:d.x},children:[c.label," : ",c.value]}),t("div",{className:"ff-pie-chart-legend",children:k})]})}return e("div",{className:"ff-pie-chart-container",onMouseMove:A,children:[t("div",{className:""+(s?"ff-pie-chart-border":""),style:{width:y,height:y},children:t("svg",{width:y,height:y,viewBox:`0 0 ${y} ${y}`,children:t("g",{transform:`translate(${n+5}, ${n+5})`,children:M.map((l,a)=>{if(l.value>0){const o=i[a%i.length]||"",{endAngle:s,backgroundArcPath:c}=r(l.value,v,m,n);return m=s,e("g",$?{onMouseEnter:()=>b(l,o,a),onMouseLeave:x,style:N(a),children:[t("path",{d:c,fill:o,stroke:"white",strokeWidth:.5}),t("line",{x1:0,y1:n,x2:0,y2:0,stroke:"white",strokeWidth:2})]}:{children:[t("path",{d:c,fill:o,stroke:"white",strokeWidth:.5,onMouseEnter:()=>b(l,o,a),onMouseLeave:x,style:N(a)}),t("text",{x:n/2*Math.cos((m+s)/2),y:n/2*Math.sin((m+s)/2),fill:"white",textAnchor:"middle",dominantBaseline:"central"})]},l.label)}return null})})})}),c&&e("div",{className:"ff-pie-chart-tooltip",style:{top:d.y,left:d.x},children:[c.label," : ",c.value]}),t("div",{className:"ff-pie-chart-legend",children:k})]})};export{n as default};

package/lib/components/Charts/PieChart/PieChart.scss.js

@@ -0,0 +1 @@
+import i from"../../../node_modules/style-inject/dist/style-inject.es.js";i(".fontXs{font-family:Poppins;font-size:10px}.ff-pie-chart-container .ff-pie-chart-tooltip,.fontSm{font-family:Poppins;font-size:12px}.fontMd{font-size:14px}.fontLg,.fontMd{font-family:Poppins}.fontLg{font-size:16px}.fontXL{font-size:18px}.font2Xl,.fontXL{font-family:Poppins}.font2Xl{font-size:24px}.font-size-8{font-family:Poppins;font-size:8px}.font-size-10{font-family:Poppins;font-size:10px}.font-size-20{font-family:Poppins;font-size:20px}.font-size-32{font-family:Poppins;font-size:32px}.font-size-80{font-family:Poppins;font-size:80px}.ff-pie-chart-container{align-items:center;display:flex;flex-direction:column;font-size:var(--fontSize)}.ff-pie-chart-container .ff-pie-chart-border{border:2px solid var(--pie-chart-border-color);border-radius:50%;display:inline-block}.ff-pie-chart-container .ff-pie-chart-tooltip{background-color:var(--tooltip-bg-color);border-radius:4px;color:var(--primary-icon-color);font-weight:400;left:50%;padding:8px;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-100%)}.ff-pie-chart-container .ff-pie-chart-legend{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-item{align-items:center;display:flex;flex-direction:column;text-align:center}.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-value{color:var(--drawer-title-color)}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlBpZUNoYXJ0LnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsUUFDRSxtQkFBc0IsQ0FDdEIsY0FDRixDQUVBLHNEQUNFLG1CQUFzQixDQUN0QixjQUNGLENBRUEsUUFFRSxjQUNGLENBRUEsZ0JBSkUsbUJBT0YsQ0FIQSxRQUVFLGNBQ0YsQ0FFQSxRQUVFLGNBQ0YsQ0FFQSxpQkFKRSxtQkFPRixDQUhBLFNBRUUsY0FDRixDQUVBLGFBQ0UsbUJBQXNCLENBQ3RCLGFBQ0YsQ0FFQSxjQUNFLG1CQUFzQixDQUN0QixjQUNGLENBRUEsY0FDRSxtQkFBc0IsQ0FDdEIsY0FDRixDQUVBLGNBQ0UsbUJBQXNCLENBQ3RCLGNBQ0YsQ0FFQSxjQUNFLG1CQUFzQixDQUN0QixjQUNGLENBRUEsd0JBR0Usa0JBQW1CLENBRm5CLFlBQWEsQ0FDYixxQkFBc0IsQ0FFdEIseUJBQ0YsQ0FDQSw2Q0FFRSw4Q0FBK0MsQ0FDL0MsaUJBQWtCLENBRmxCLG9CQUdGLENBQ0EsOENBT0Usd0NBQXlDLENBRHpDLGlCQUFrQixDQUVsQiwrQkFBZ0MsQ0FDaEMsZUFBZ0IsQ0FOaEIsUUFBUyxDQUVULFdBQVksQ0FLWixtQkFBb0IsQ0FUcEIsaUJBQWtCLENBQ2xCLE9BQVEsQ0FFUiwrQkFPRixDQUNBLDZDQUNFLFlBQWEsQ0FFYixRQUFTLENBRFQsbUNBRUYsQ0FDQSx1RUFHRSxrQkFBbUIsQ0FGbkIsWUFBYSxDQUNiLHFCQUFzQixDQUV0QixpQkFDRixDQUNBLHdFQUNFLCtCQUNGIiwiZmlsZSI6IlBpZUNoYXJ0LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuZm9udFhzIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDEwcHg7XG59XG5cbi5mb250U20sIC5mZi1waWUtY2hhcnQtY29udGFpbmVyIC5mZi1waWUtY2hhcnQtdG9vbHRpcCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAxMnB4O1xufVxuXG4uZm9udE1kIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDE0cHg7XG59XG5cbi5mb250TGcge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMTZweDtcbn1cblxuLmZvbnRYTCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAxOHB4O1xufVxuXG4uZm9udDJYbCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAyNHB4O1xufVxuXG4uZm9udC1zaXplLTgge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogOHB4O1xufVxuXG4uZm9udC1zaXplLTEwIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDEwcHg7XG59XG5cbi5mb250LXNpemUtMjAge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMjBweDtcbn1cblxuLmZvbnQtc2l6ZS0zMiB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAzMnB4O1xufVxuXG4uZm9udC1zaXplLTgwIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDgwcHg7XG59XG5cbi5mZi1waWUtY2hhcnQtY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZm9udC1zaXplOiB2YXIoLS1mb250U2l6ZSk7XG59XG4uZmYtcGllLWNoYXJ0LWNvbnRhaW5lciAuZmYtcGllLWNoYXJ0LWJvcmRlciB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgYm9yZGVyOiAycHggc29saWQgdmFyKC0tcGllLWNoYXJ0LWJvcmRlci1jb2xvcik7XG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbn1cbi5mZi1waWUtY2hhcnQtY29udGFpbmVyIC5mZi1waWUtY2hhcnQtdG9vbHRpcCB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiA1MCU7XG4gIGxlZnQ6IDUwJTtcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTUwJSwgLTEwMCUpO1xuICBwYWRkaW5nOiA4cHg7XG4gIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdG9vbHRpcC1iZy1jb2xvcik7XG4gIGNvbG9yOiB2YXIoLS1wcmltYXJ5LWljb24tY29sb3IpO1xuICBmb250LXdlaWdodDogNDAwO1xuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbn1cbi5mZi1waWUtY2hhcnQtY29udGFpbmVyIC5mZi1waWUtY2hhcnQtbGVnZW5kIHtcbiAgZGlzcGxheTogZ3JpZDtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoMywgMWZyKTtcbiAgZ2FwOiAxNnB4O1xufVxuLmZmLXBpZS1jaGFydC1jb250YWluZXIgLmZmLXBpZS1jaGFydC1sZWdlbmQgLmZmLXBpZS1jaGFydC1sZWdlbmQtaXRlbSB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbn1cbi5mZi1waWUtY2hhcnQtY29udGFpbmVyIC5mZi1waWUtY2hhcnQtbGVnZW5kIC5mZi1waWUtY2hhcnQtbGVnZW5kLXZhbHVlIHtcbiAgY29sb3I6IHZhcigtLWRyYXdlci10aXRsZS1jb2xvcik7XG59Il19 */");

package/lib/components/Charts/RadialChart/RadialChart.js

@@ -1,89 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import './RadialChart.scss';
-import Tooltip from '../../Tooltip';
-const useColorMappings = () => useMemo(() => {
-    return {
-        colorMapping: {
-            passed: 'var(--status-success-text-color)',
-            failed: 'var(--status-rejected-text-color)',
-            warning: 'var(--status-warning-text-color)',
-            skipped: 'var(--status-skipped-text-color)',
-        },
-        backgroundColorMapping: {
-            passed: 'var(--status-success-bg-color)',
-            failed: 'var(--status-rejected-bg-color)',
-            warning: 'var(--status-warning-bg-color)',
-            skipped: 'var(--status-skipped-bg-color)',
-        },
-    };
-}, []);
-// Function to generate SVG arc paths
-const calculateArc = ({ x, y, radius, startAngle, endAngle, }) => {
-    const startX = x + radius * Math.cos(startAngle);
-    const startY = y + radius * Math.sin(startAngle);
-    const endX = x + radius * Math.cos(endAngle);
-    const endY = y + radius * Math.sin(endAngle);
-    const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
-    return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
-};
-// Function to calculate arc paths and angles
-const calculateArcAngles = (statusValue, total, currentAngle, radius) => {
-    if (total === 0) {
-        const backgroundArcPath = calculateArc({
-            x: 0,
-            y: 0,
-            radius,
-            startAngle: 0,
-            endAngle: 2 * Math.PI,
-        });
-        return {
-            endAngle: currentAngle,
-            backgroundArcPath,
-            foregroundArcPath: '',
-            percentage: 0,
-        };
-    }
-    const percentage = statusValue / total;
-    const angleIncrement = percentage * 2 * Math.PI;
-    let startAngle = currentAngle;
-    let endAngle = startAngle + angleIncrement;
-    // Scenario when statusValue is equal to total
-    if (statusValue === total) {
-        startAngle = 0;
-        endAngle = 2 * Math.PI;
-    }
-    const backgroundArcPath = calculateArc({
-        x: 0,
-        y: 0,
-        radius,
-        startAngle: 0,
-        endAngle: 2 * Math.PI,
-    });
-    const foregroundArcPath = calculateArc({
-        x: 0,
-        y: 0,
-        radius,
-        startAngle,
-        endAngle,
-    });
-    return { endAngle, backgroundArcPath, foregroundArcPath, percentage };
-};
-// RadialChart component
-const RadialChart = ({ radius = 15, lineWidth = 5, statusValues = [], onClick = () => { }, fontSize = 6, gap = 12, }) => {
-    const { colorMapping, backgroundColorMapping } = useColorMappings();
-    const total = statusValues.reduce((acc, status) => acc + status.value, 0);
-    let currentAngle = -Math.PI / 2;
-    const svgSize = 2 * (radius + lineWidth);
-    return (_jsx("div", { className: "ff-radial-chart-container", style: {
-            '--fontSize': `${fontSize}px`,
-            gap: `${gap}px`,
-        }, children: statusValues.map((status, index) => {
-            const normalizedStatus = status.status.toLowerCase();
-            const { endAngle, backgroundArcPath, foregroundArcPath, percentage } = calculateArcAngles(status.value, total, currentAngle, radius);
-            currentAngle = endAngle;
-            return (_jsx(Tooltip, { title: `${status.status}: ${Math.round(percentage * 100)}%`, zIndex: 1000, children: _jsx("svg", { width: svgSize, height: svgSize, viewBox: `0 0 ${svgSize} ${svgSize}`, onClick: () => onClick(status), role: "img", "aria-label": `${status.status}: ${Math.round(percentage * 100)}%`, children: _jsxs("g", { transform: `translate(${radius + lineWidth}, ${radius + lineWidth})`, children: [_jsx("path", { d: backgroundArcPath, fill: "none", stroke: backgroundColorMapping[normalizedStatus], strokeWidth: lineWidth }), _jsx("path", { d: foregroundArcPath, fill: "none", stroke: colorMapping[normalizedStatus], strokeWidth: lineWidth }), _jsx("text", { x: "0", y: "0", fill: colorMapping[normalizedStatus], textAnchor: "middle", dominantBaseline: "central", children: `${Math.round(percentage * 100)}%` })] }) }, status.status) }, `status.status-${index}`));
-        }) }));
-};
-export default RadialChart;
-//# sourceMappingURL=RadialChart.js.map
+import{jsx as t,jsxs as a}from"react/jsx-runtime";import{useMemo as r}from"react";import"./RadialChart.scss.js";import e from"../../Tooltip/Tooltip.js";const s=({x:t,y:a,radius:r,startAngle:e,endAngle:s})=>{const n=t+r*Math.cos(e),o=a+r*Math.sin(e),l=t+r*Math.cos(s),i=a+r*Math.sin(s);return`M ${n} ${o} A ${r} ${r} 0 ${s-e>Math.PI?1:0} 1 ${l} ${i}`},n=({radius:n=15,lineWidth:o=5,statusValues:l=[],onClick:i=()=>{},fontSize:c=6,gap:d=12})=>{const{colorMapping:u,backgroundColorMapping:g}=r(()=>({colorMapping:{passed:"var(--status-success-text-color)",failed:"var(--status-rejected-text-color)",warning:"var(--status-warning-text-color)",skipped:"var(--status-skipped-text-color)"},backgroundColorMapping:{passed:"var(--status-success-bg-color)",failed:"var(--status-rejected-bg-color)",warning:"var(--status-warning-bg-color)",skipped:"var(--status-skipped-bg-color)"}}),[]),h=l.reduce((t,a)=>t+a.value,0);let p=-Math.PI/2;const A=2*(n+o);return t("div",{className:"ff-radial-chart-container",style:{"--fontSize":`${c}px`,gap:`${d}px`},children:l.map((r,l)=>{const c=r.status.toLowerCase(),{endAngle:d,backgroundArcPath:$,foregroundArcPath:f,percentage:M}=((t,a,r,e)=>{if(0===a)return{endAngle:r,backgroundArcPath:s({x:0,y:0,radius:e,startAngle:0,endAngle:2*Math.PI}),foregroundArcPath:"",percentage:0};const n=t/a;let o=r,l=o+2*n*Math.PI;return t===a&&(o=0,l=2*Math.PI),{endAngle:l,backgroundArcPath:s({x:0,y:0,radius:e,startAngle:0,endAngle:2*Math.PI}),foregroundArcPath:s({x:0,y:0,radius:e,startAngle:o,endAngle:l}),percentage:n}})(r.value,h,p,n);return p=d,t(e,{title:`${r.status}: ${Math.round(100*M)}%`,zIndex:1e3,children:t("svg",{width:A,height:A,viewBox:`0 0 ${A} ${A}`,onClick:()=>i(r),role:"img","aria-label":`${r.status}: ${Math.round(100*M)}%`,children:a("g",{transform:`translate(${n+o}, ${n+o})`,children:[t("path",{d:$,fill:"none",stroke:g[c],strokeWidth:o}),t("path",{d:f,fill:"none",stroke:u[c],strokeWidth:o}),t("text",{x:"0",y:"0",fill:u[c],textAnchor:"middle",dominantBaseline:"central",children:`${Math.round(100*M)}%`})]})},r.status)},`status.status-${l}`)})})};export{n as default};

package/lib/components/Charts/RadialChart/RadialChart.scss.js

@@ -0,0 +1 @@
+import t from"../../../node_modules/style-inject/dist/style-inject.es.js";t(".fontXs{font-size:10px}.fontSm,.fontXs{font-family:Poppins}.fontSm{font-size:12px}.fontMd{font-size:14px}.fontLg,.fontMd{font-family:Poppins}.fontLg{font-size:16px}.fontXL{font-size:18px}.font2Xl,.fontXL{font-family:Poppins}.font2Xl{font-size:24px}.ff-radial-chart-container svg text,.font-size-8{font-family:Poppins;font-size:8px}.font-size-10{font-family:Poppins;font-size:10px}.font-size-20{font-family:Poppins;font-size:20px}.font-size-32{font-family:Poppins;font-size:32px}.font-size-80{font-family:Poppins;font-size:80px}.ff-radial-chart-container{align-items:center;cursor:pointer;display:flex;justify-content:space-between}.ff-radial-chart-container svg{vertical-align:middle}.ff-radial-chart-container svg text{font-size:var(--fontSize)!important;font-weight:400}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJhZGlhbENoYXJ0LnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsUUFFRSxjQUNGLENBRUEsZ0JBSkUsbUJBT0YsQ0FIQSxRQUVFLGNBQ0YsQ0FFQSxRQUVFLGNBQ0YsQ0FFQSxnQkFKRSxtQkFPRixDQUhBLFFBRUUsY0FDRixDQUVBLFFBRUUsY0FDRixDQUVBLGlCQUpFLG1CQU9GLENBSEEsU0FFRSxjQUNGLENBRUEsaURBQ0UsbUJBQXNCLENBQ3RCLGFBQ0YsQ0FFQSxjQUNFLG1CQUFzQixDQUN0QixjQUNGLENBRUEsY0FDRSxtQkFBc0IsQ0FDdEIsY0FDRixDQUVBLGNBQ0UsbUJBQXNCLENBQ3RCLGNBQ0YsQ0FFQSxjQUNFLG1CQUFzQixDQUN0QixjQUNGLENBRUEsMkJBSUUsa0JBQW1CLENBSG5CLGNBQWUsQ0FDZixZQUFhLENBQ2IsNkJBRUYsQ0FDQSwrQkFDRSxxQkFDRixDQUNBLG9DQUNFLG1DQUFxQyxDQUNyQyxlQUNGIiwiZmlsZSI6IlJhZGlhbENoYXJ0LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuZm9udFhzIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDEwcHg7XG59XG5cbi5mb250U20ge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMTJweDtcbn1cblxuLmZvbnRNZCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAxNHB4O1xufVxuXG4uZm9udExnIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDE2cHg7XG59XG5cbi5mb250WEwge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMThweDtcbn1cblxuLmZvbnQyWGwge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMjRweDtcbn1cblxuLmZvbnQtc2l6ZS04LCAuZmYtcmFkaWFsLWNoYXJ0LWNvbnRhaW5lciBzdmcgdGV4dCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiA4cHg7XG59XG5cbi5mb250LXNpemUtMTAge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMTBweDtcbn1cblxuLmZvbnQtc2l6ZS0yMCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAyMHB4O1xufVxuXG4uZm9udC1zaXplLTMyIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDMycHg7XG59XG5cbi5mb250LXNpemUtODAge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogODBweDtcbn1cblxuLmZmLXJhZGlhbC1jaGFydC1jb250YWluZXIge1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbn1cbi5mZi1yYWRpYWwtY2hhcnQtY29udGFpbmVyIHN2ZyB7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG59XG4uZmYtcmFkaWFsLWNoYXJ0LWNvbnRhaW5lciBzdmcgdGV4dCB7XG4gIGZvbnQtc2l6ZTogdmFyKC0tZm9udFNpemUpICFpbXBvcnRhbnQ7XG4gIGZvbnQtd2VpZ2h0OiA0MDA7XG59Il19 */");

package/lib/components/ChatModal/ChatModal.js

@@ -1,44 +1 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import './ChatModal.scss';
-import { createPortal } from 'react-dom';
-import Icon from '../Icon';
-import Typography from '../Typography';
-import classNames from 'classnames';
-import Tooltip from '../Tooltip';
-const ChatModal = ({ iconName, iconPosition: { top: iconTop, left: iconLeft, bottom: iconBottom, right: iconRight, }, hoverIconPosition: { top: iconhoverTop, left: iconhoverLeft, bottom: iconhoverBottom, right: iconhoverRight, }, modalPosition: { top: modalTop, left: modalLeft, bottom: modalBottom, right: modalRight, }, modalWidth, modalHeight, headerContent = 'Header Content', footerContent = 'Footer Content', iconWidth, iconHeight, modalHeading = 'Ask Fia', children, onClearChat, }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [isVisible, setIsVisible] = useState(false);
-    const openModal = () => {
-        setIsVisible((prev) => !prev);
-        setTimeout(() => setIsOpen((prev) => !prev), 10);
-    };
-    const closeModal = () => {
-        setIsOpen(false);
-        setTimeout(() => setIsVisible(false), 300);
-    };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
-                    top: iconTop !== undefined ? `${iconTop}px` : undefined,
-                    left: iconLeft !== undefined ? `${iconLeft}px` : undefined,
-                    bottom: iconBottom !== undefined ? `${iconBottom}px` : undefined,
-                    right: iconRight !== undefined ? `${iconRight}px` : undefined,
-                }, className: "ff-dynamic-icon-container", children: [_jsx(Icon, { className: `ff-dynamic-icon`, name: iconName, onClick: openModal, height: iconHeight, width: iconWidth }), _jsx("div", { style: {
-                            top: iconhoverTop !== undefined ? `${iconhoverTop}px` : undefined,
-                            left: iconhoverLeft !== undefined ? `${iconhoverLeft}px` : undefined,
-                            bottom: iconhoverBottom !== undefined
-                                ? `${iconhoverBottom}px`
-                                : undefined,
-                            right: iconhoverRight !== undefined ? `${iconhoverRight}px` : undefined,
-                        }, className: `ff-chat-icon-hover`, children: _jsx(Icon, { name: "ask_fia_icon", height: 32, width: 82 }) })] }), isVisible &&
-                createPortal(_jsx("div", { className: classNames('ff-dynamic-modal', { open: isOpen }), style: {
-                        top: modalTop !== undefined ? `${modalTop}px` : undefined,
-                        left: modalLeft !== undefined ? `${modalLeft}px` : undefined,
-                        bottom: modalBottom !== undefined ? `${modalBottom}px` : undefined,
-                        right: modalRight !== undefined ? `${modalRight}px` : undefined,
-                        position: 'fixed',
-                        height: modalHeight,
-                        width: modalWidth,
-                    }, children: _jsxs("div", { className: "ff-dynamic-modal-content", children: [headerContent && (_jsx("div", { className: "ff-dynamic-modal-header", children: _jsxs("div", { className: "header-container", children: [_jsxs("div", { className: "header-left", children: [_jsx(Icon, { height: 16, width: 16, name: "fia_icon" }), _jsx(Typography, { fontWeight: "medium", children: modalHeading })] }), _jsxs("div", { className: "header-right", children: [_jsx("span", { className: "action", children: _jsx(Tooltip, { title: "Clear chat", placement: "bottom", children: _jsx(Icon, { height: 16, width: 16, name: "delete", color: "var(--tooltip-text-color)", onClick: onClearChat }) }) }), _jsx("span", { className: "action", children: _jsx(Tooltip, { title: "Close", placement: "bottom", children: _jsx(Icon, { height: 16, width: 16, name: "close", color: "var(--tooltip-text-color)", onClick: () => closeModal() }) }) })] })] }) })), _jsx("div", { className: "ff-dynamic-modal-body", children: children }), footerContent && (_jsx("div", { className: "ff-dynamic-modal-footer", children: footerContent }))] }) }), document.body)] }));
-};
-export default ChatModal;
-//# sourceMappingURL=ChatModal.js.map
+import{jsxs as o,Fragment as i,jsx as t}from"react/jsx-runtime";import{useState as e}from"react";import"./ChatModal.scss.js";import{createPortal as d}from"react-dom";import a from"../Icon/Icon.js";import n from"../Typography/Typography.js";import c from"../../_virtual/index.js";import l from"../Tooltip/Tooltip.js";const r=({iconName:r,iconPosition:{top:m,left:h,bottom:s,right:p},hoverIconPosition:{top:v,left:f,bottom:g,right:x},modalPosition:{top:y,left:N,bottom:C,right:$},modalWidth:b,modalHeight:u,headerContent:j="Header Content",footerContent:w="Footer Content",iconWidth:T,iconHeight:k,modalHeading:H="Ask Fia",children:_,onClearChat:I})=>{const[P,W]=e(!1),[F,A]=e(!1);return o(i,{children:[o("div",{style:{top:void 0!==m?`${m}px`:void 0,left:void 0!==h?`${h}px`:void 0,bottom:void 0!==s?`${s}px`:void 0,right:void 0!==p?`${p}px`:void 0},className:"ff-dynamic-icon-container",children:[t(a,{className:"ff-dynamic-icon",name:r,onClick:()=>{A(o=>!o),setTimeout(()=>W(o=>!o),10)},height:k,width:T}),t("div",{style:{top:void 0!==v?`${v}px`:void 0,left:void 0!==f?`${f}px`:void 0,bottom:void 0!==g?`${g}px`:void 0,right:void 0!==x?`${x}px`:void 0},className:"ff-chat-icon-hover",children:t(a,{name:"ask_fia_icon",height:32,width:82})})]}),F&&d(t("div",{className:c("ff-dynamic-modal",{open:P}),style:{top:void 0!==y?`${y}px`:void 0,left:void 0!==N?`${N}px`:void 0,bottom:void 0!==C?`${C}px`:void 0,right:void 0!==$?`${$}px`:void 0,position:"fixed",height:u,width:b},children:o("div",{className:"ff-dynamic-modal-content",children:[j&&t("div",{className:"ff-dynamic-modal-header",children:o("div",{className:"header-container",children:[o("div",{className:"header-left",children:[t(a,{height:16,width:16,name:"fia_icon"}),t(n,{fontWeight:"medium",children:H})]}),o("div",{className:"header-right",children:[t("span",{className:"action",children:t(l,{title:"Clear chat",placement:"bottom",children:t(a,{height:16,width:16,name:"delete",color:"var(--tooltip-text-color)",onClick:I})})}),t("span",{className:"action",children:t(l,{title:"Close",placement:"bottom",children:t(a,{height:16,width:16,name:"close",color:"var(--tooltip-text-color)",onClick:()=>(W(!1),void setTimeout(()=>A(!1),300))})})})]})]})}),t("div",{className:"ff-dynamic-modal-body",children:_}),w&&t("div",{className:"ff-dynamic-modal-footer",children:w})]})}),document.body)]})};export{r as default};

package/lib/components/ChatModal/ChatModal.scss.js

@@ -0,0 +1 @@
+import i from"../../node_modules/style-inject/dist/style-inject.es.js";i('.fontXs{font-size:10px}.fontSm,.fontXs{font-family:Poppins}.fontSm{font-size:12px}.fontMd{font-size:14px}.fontLg,.fontMd{font-family:Poppins}.fontLg{font-size:16px}.fontXL{font-size:18px}.font2Xl,.fontXL{font-family:Poppins}.font2Xl{font-size:24px}.font-size-8{font-family:Poppins;font-size:8px}.font-size-10{font-family:Poppins;font-size:10px}.font-size-20{font-family:Poppins;font-size:20px}.font-size-32{font-family:Poppins;font-size:32px}.font-size-80{font-family:Poppins;font-size:80px}.ff-dynamic-icon-container{position:fixed;z-index:2500}.ff-dynamic-icon{border-radius:50%;cursor:pointer;position:fixed;transition:transform .3s ease;z-index:9999999}.ff-dynamic-icon:hover{background-color:var(--chatbot-icon-hover-color);border-radius:50%}.ff-chat-icon-hover{opacity:0;position:fixed;transition:opacity .3s ease,transform .4s ease;visibility:hidden;z-index:999}.ff-dynamic-icon-container:hover .ff-chat-icon-hover{opacity:1;visibility:visible}.ff-dynamic-modal{background-color:var(--prompt-bg-color);border-radius:20px;box-shadow:0 6px 15px var(--arrows-button-border-color);display:flex;flex-direction:column;position:fixed;transform:scale(.5);transform-origin:bottom right;transition:transform .4s ease-in-out,opacity .4s ease-in-out;z-index:9999999}.ff-dynamic-modal:after{border-color:var(--prompt-bg-color) transparent transparent transparent;border-style:solid;border-width:12px 12px 0;bottom:-10px;content:"";position:absolute;right:20px;z-index:999}.ff-dynamic-modal.open{transform:scale(1)}.ff-dynamic-modal-content{display:flex;flex-direction:column;height:100%}.ff-dynamic-modal-header{background-color:var(--brand-color);border-radius:20px 20px 0 0;color:var(--tooltip-text-color);text-align:center}.ff-dynamic-modal-header .header-container{align-items:center;display:flex;height:32px;justify-content:space-between;padding:2px 5px}.ff-dynamic-modal-header .header-container .header-left{align-items:center;display:flex;flex-basis:50%}.ff-dynamic-modal-header .header-container .header-left span{padding-right:4px}.ff-dynamic-modal-header .header-container .header-right{align-items:center;display:flex;flex-basis:14%;justify-content:space-around}.ff-dynamic-modal-header .header-container .header-right .action{cursor:pointer}.ff-dynamic-modal-body{background:var(--prompt-bg-color);flex:1;overflow-y:auto}.ff-dynamic-modal-footer{background:var(--prompt-bg-color);border-radius:0 0 20px 20px;text-align:right}.ff-content-box{flex:1;overflow-y:auto;padding:10px;text-align:justify}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNoYXRNb2RhbC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLFFBRUUsY0FDRixDQUVBLGdCQUpFLG1CQU9GLENBSEEsUUFFRSxjQUNGLENBRUEsUUFFRSxjQUNGLENBRUEsZ0JBSkUsbUJBT0YsQ0FIQSxRQUVFLGNBQ0YsQ0FFQSxRQUVFLGNBQ0YsQ0FFQSxpQkFKRSxtQkFPRixDQUhBLFNBRUUsY0FDRixDQUVBLGFBQ0UsbUJBQXNCLENBQ3RCLGFBQ0YsQ0FFQSxjQUNFLG1CQUFzQixDQUN0QixjQUNGLENBRUEsY0FDRSxtQkFBc0IsQ0FDdEIsY0FDRixDQUVBLGNBQ0UsbUJBQXNCLENBQ3RCLGNBQ0YsQ0FFQSxjQUNFLG1CQUFzQixDQUN0QixjQUNGLENBRUEsMkJBQ0UsY0FBZSxDQUNmLFlBQ0YsQ0FFQSxpQkFFRSxpQkFBa0IsQ0FDbEIsY0FBZSxDQUZmLGNBQWUsQ0FJZiw2QkFBK0IsQ0FEL0IsZUFFRixDQUVBLHVCQUNFLGdEQUFpRCxDQUNqRCxpQkFDRixDQUVBLG9CQUVFLFNBQVUsQ0FEVixjQUFlLENBR2YsOENBQWtELENBRGxELGlCQUFrQixDQUVsQixXQUNGLENBRUEscURBQ0UsU0FBVSxDQUNWLGtCQUNGLENBRUEsa0JBQ0UsdUNBQXdDLENBQ3hDLGtCQUFtQixDQUNuQix1REFBMEQsQ0FDMUQsWUFBYSxDQUNiLHFCQUFzQixDQUN0QixjQUFlLENBQ2YsbUJBQXFCLENBQ3JCLDZCQUE4QixDQUM5Qiw0REFBZ0UsQ0FDaEUsZUFDRixDQUNBLHdCQU9FLHVFQUF3RSxDQUZ4RSxrQkFBbUIsQ0FDbkIsd0JBQThCLENBSDlCLFlBQWEsQ0FGYixVQUFXLENBQ1gsaUJBQWtCLENBRWxCLFVBQVcsQ0FJWCxXQUNGLENBQ0EsdUJBQ0Usa0JBQ0YsQ0FDQSwwQkFDRSxZQUFhLENBQ2IscUJBQXNCLENBQ3RCLFdBQ0YsQ0FDQSx5QkFDRSxtQ0FBb0MsQ0FHcEMsMkJBQTRCLENBRjVCLCtCQUFnQyxDQUNoQyxpQkFFRixDQUNBLDJDQUVFLGtCQUFtQixDQURuQixZQUFhLENBR2IsV0FBWSxDQURaLDZCQUE4QixDQUU5QixlQUNGLENBQ0Esd0RBRUUsa0JBQW1CLENBRG5CLFlBQWEsQ0FFYixjQUNGLENBQ0EsNkRBQ0UsaUJBQ0YsQ0FDQSx5REFFRSxrQkFBbUIsQ0FEbkIsWUFBYSxDQUdiLGNBQWUsQ0FEZiw0QkFFRixDQUNBLGlFQUNFLGNBQ0YsQ0FDQSx1QkFHRSxpQ0FBa0MsQ0FGbEMsTUFBTyxDQUNQLGVBRUYsQ0FDQSx5QkFDRSxpQ0FBa0MsQ0FFbEMsMkJBQWdDLENBRGhDLGdCQUVGLENBRUEsZ0JBQ0UsTUFBTyxDQUNQLGVBQWdCLENBQ2hCLFlBQWEsQ0FDYixrQkFDRiIsImZpbGUiOiJDaGF0TW9kYWwuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi5mb250WHMge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMTBweDtcbn1cblxuLmZvbnRTbSB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAxMnB4O1xufVxuXG4uZm9udE1kIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDE0cHg7XG59XG5cbi5mb250TGcge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMTZweDtcbn1cblxuLmZvbnRYTCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAxOHB4O1xufVxuXG4uZm9udDJYbCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAyNHB4O1xufVxuXG4uZm9udC1zaXplLTgge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogOHB4O1xufVxuXG4uZm9udC1zaXplLTEwIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDEwcHg7XG59XG5cbi5mb250LXNpemUtMjAge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMjBweDtcbn1cblxuLmZvbnQtc2l6ZS0zMiB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAzMnB4O1xufVxuXG4uZm9udC1zaXplLTgwIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDgwcHg7XG59XG5cbi5mZi1keW5hbWljLWljb24tY29udGFpbmVyIHtcbiAgcG9zaXRpb246IGZpeGVkO1xuICB6LWluZGV4OiAyNTAwO1xufVxuXG4uZmYtZHluYW1pYy1pY29uIHtcbiAgcG9zaXRpb246IGZpeGVkO1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgei1pbmRleDogOTk5OTk5OTtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDAuM3MgZWFzZTtcbn1cblxuLmZmLWR5bmFtaWMtaWNvbjpob3ZlciB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNoYXRib3QtaWNvbi1ob3Zlci1jb2xvcik7XG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbn1cblxuLmZmLWNoYXQtaWNvbi1ob3ZlciB7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgb3BhY2l0eTogMDtcbiAgdmlzaWJpbGl0eTogaGlkZGVuO1xuICB0cmFuc2l0aW9uOiBvcGFjaXR5IDAuM3MgZWFzZSwgdHJhbnNmb3JtIDAuNHMgZWFzZTtcbiAgei1pbmRleDogOTk5O1xufVxuXG4uZmYtZHluYW1pYy1pY29uLWNvbnRhaW5lcjpob3ZlciAuZmYtY2hhdC1pY29uLWhvdmVyIHtcbiAgb3BhY2l0eTogMTtcbiAgdmlzaWJpbGl0eTogdmlzaWJsZTtcbn1cblxuLmZmLWR5bmFtaWMtbW9kYWwge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1wcm9tcHQtYmctY29sb3IpO1xuICBib3JkZXItcmFkaXVzOiAyMHB4O1xuICBib3gtc2hhZG93OiAwcHggNnB4IDE1cHggdmFyKC0tYXJyb3dzLWJ1dHRvbi1ib3JkZXItY29sb3IpO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBwb3NpdGlvbjogZml4ZWQ7XG4gIHRyYW5zZm9ybTogc2NhbGUoMC41KTtcbiAgdHJhbnNmb3JtLW9yaWdpbjogYm90dG9tIHJpZ2h0O1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC40cyBlYXNlLWluLW91dCwgb3BhY2l0eSAwLjRzIGVhc2UtaW4tb3V0O1xuICB6LWluZGV4OiA5OTk5OTk5O1xufVxuLmZmLWR5bmFtaWMtbW9kYWw6YWZ0ZXIge1xuICBjb250ZW50OiBcIlwiO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGJvdHRvbTogLTEwcHg7XG4gIHJpZ2h0OiAyMHB4O1xuICBib3JkZXItc3R5bGU6IHNvbGlkO1xuICBib3JkZXItd2lkdGg6IDEycHggMTJweCAwIDEycHg7XG4gIGJvcmRlci1jb2xvcjogdmFyKC0tcHJvbXB0LWJnLWNvbG9yKSB0cmFuc3BhcmVudCB0cmFuc3BhcmVudCB0cmFuc3BhcmVudDtcbiAgei1pbmRleDogOTk5O1xufVxuLmZmLWR5bmFtaWMtbW9kYWwub3BlbiB7XG4gIHRyYW5zZm9ybTogc2NhbGUoMSk7XG59XG4uZmYtZHluYW1pYy1tb2RhbC1jb250ZW50IHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuLmZmLWR5bmFtaWMtbW9kYWwtaGVhZGVyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tYnJhbmQtY29sb3IpO1xuICBjb2xvcjogdmFyKC0tdG9vbHRpcC10ZXh0LWNvbG9yKTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBib3JkZXItcmFkaXVzOiAyMHB4IDIwcHggMCAwO1xufVxuLmZmLWR5bmFtaWMtbW9kYWwtaGVhZGVyIC5oZWFkZXItY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBoZWlnaHQ6IDMycHg7XG4gIHBhZGRpbmc6IDJweCA1cHg7XG59XG4uZmYtZHluYW1pYy1tb2RhbC1oZWFkZXIgLmhlYWRlci1jb250YWluZXIgLmhlYWRlci1sZWZ0IHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZmxleC1iYXNpczogNTAlO1xufVxuLmZmLWR5bmFtaWMtbW9kYWwtaGVhZGVyIC5oZWFkZXItY29udGFpbmVyIC5oZWFkZXItbGVmdCBzcGFuIHtcbiAgcGFkZGluZy1yaWdodDogNHB4O1xufVxuLmZmLWR5bmFtaWMtbW9kYWwtaGVhZGVyIC5oZWFkZXItY29udGFpbmVyIC5oZWFkZXItcmlnaHQge1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWFyb3VuZDtcbiAgZmxleC1iYXNpczogMTQlO1xufVxuLmZmLWR5bmFtaWMtbW9kYWwtaGVhZGVyIC5oZWFkZXItY29udGFpbmVyIC5oZWFkZXItcmlnaHQgLmFjdGlvbiB7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cbi5mZi1keW5hbWljLW1vZGFsLWJvZHkge1xuICBmbGV4OiAxO1xuICBvdmVyZmxvdy15OiBhdXRvO1xuICBiYWNrZ3JvdW5kOiB2YXIoLS1wcm9tcHQtYmctY29sb3IpO1xufVxuLmZmLWR5bmFtaWMtbW9kYWwtZm9vdGVyIHtcbiAgYmFja2dyb3VuZDogdmFyKC0tcHJvbXB0LWJnLWNvbG9yKTtcbiAgdGV4dC1hbGlnbjogcmlnaHQ7XG4gIGJvcmRlci1yYWRpdXM6IDBweCAwcHggMjBweCAyMHB4O1xufVxuXG4uZmYtY29udGVudC1ib3gge1xuICBmbGV4OiAxO1xuICBvdmVyZmxvdy15OiBhdXRvO1xuICBwYWRkaW5nOiAxMHB4O1xuICB0ZXh0LWFsaWduOiBqdXN0aWZ5O1xufSJdfQ== */');