pixel-react 1.20.21 → 1.20.22

package/lib/components/TableTreeFn/Utils/TableCell.js

@@ -1 +1,24 @@
-const e=(e,c,o,r)=>{const s=e[c.accessor];if(c.cell){const t=e._id||e.id;return c.cell({value:s,row:e,column:c.accessor,index:o,tableType:r,...t&&{refId:t}})}return c.accessor||s&&"object"!=typeof s?s:"--"};export{e as prepareData};
+export 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 '--';
+    }
+};
+//# sourceMappingURL=TableCell.js.map

package/lib/components/TableTreeFn/Utils/formatDataCell.js

@@ -1 +1,15 @@
-import t from"react";import{truncateText as r}from"../../../utils/truncateText/truncateText.js";const e=(o,i)=>"string"==typeof o?r(o,i):t.isValidElement(o)?t.cloneElement(o,{},e(o.props.children,i)):Array.isArray(o)?o.map(t=>e(t,i)):o;export{e as formatCellData};
+import React from 'react';
+import { truncateText } from '../../../utils/truncateText/truncateText';
+export const formatCellData = (content, maxLength) => {
+    if (typeof content === 'string') {
+        return truncateText(content, maxLength);
+    }
+    if (React.isValidElement(content)) {
+        return React.cloneElement(content, {}, formatCellData(content.props.children, maxLength));
+    }
+    if (Array.isArray(content)) {
+        return content.map(child => formatCellData(child, maxLength));
+    }
+    return content;
+};
+//# sourceMappingURL=formatDataCell.js.map

package/lib/components/TableWithAccordion/TableWithAccordion.js

@@ -1 +1,62 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as a}from"react";import i from"../../_virtual/index.js";import o from"../Accordion/Accordion.js";import"./TableWithAccordion.scss.js";import c from"../Icon/Icon.js";import r from"../Tooltip/Tooltip.js";import"../../index.scss.js";import l from"../Typography/Typography.js";import d from"../HighlightText/HighlightText.js";import{truncateText as n,isTextTruncated as s}from"../../utils/truncateText/truncateText.js";const h=({highlightText:h="",tableMeta:m=[],tableData:f=[],accordionType:b="row",noDataContent:p,height:g="100%",withFixedHeader:w=!1,headerType:x,TableAccordionStateIconWidth:T=4,TableAccordionStateIconHeight:y=8})=>{const[N,u]=a(-1),v=(e,t)=>{let a=e[t.accessor];return t.cell?t.cell({value:a,row:e,column:t.accessor}):t.accessor||a&&"object"!=typeof a?a:"--"},j=e=>e.map((e,a)=>t("table",{className:"ff-accordion-table",cellSpacing:0,children:t("tbody",{className:"ff-table-body",children:t("tr",{className:"ff-table-row",children:m.map((a,i)=>t("td",{className:"ff-table-cell",style:{width:a.width},children:"column"===b&&0===i?"":t(l,{children:v(e,a)})},a.accessor+i))},e.id||a)})},`accordion-table-${a}`));return e("div",{style:{height:g},className:i("ff-accordion-table-container",{"ff-accordion-fixed-header-table":w}),children:[t("table",{cellSpacing:0,className:i("ff-accordion-table",{"ff-accordion-fixed-header":w}),children:t("thead",{children:t("tr",{className:"ff-table-row",children:m.map(e=>t("th",{style:{width:e.width},className:i("ff-table-header",x&&`ff-accordion-table--${x}-bg`),children:t("div",{children:t(l,{fontWeight:"semi-bold",fontSize:12,children:e.header})})},`header-${e.header}`))})})}),"row"===b&&f.map((e,a)=>t(o,{highlightText:h,headerTitle:e.title,color:"var(--text-color)",accordionContent:j(e.data),disable:e.disable,disableInfoMessage:e.disableInfoMessage,accordionStateIconName:"arrows_down_icon",AccordionStateIconWidth:T,AccordionStateIconHeight:y},`accordion-row-${a}`)),"column"===b&&f.map((a,i)=>e("div",{className:"column-table-accordion",children:[t("div",{className:"ff-display-flex",children:t(r,{title:a.disable?a?.disableInfoMessage:"string"==typeof a.title&&s(a.title,m[0]?.width,"pixel")?a.title:"",placement:"bottom-start",children:e("div",{className:`accordion-header ${a.disable&&"accordion-header--disabled"}`,children:[t("div",{className:"header-title",children:t("span",{children:t(l,{children:t(d,{text:n(a.title,m[0]?.width,"pixel"),highlight:h})})})}),t("div",{className:"accordion-arrow",onClick:()=>{!a.disable&&(e=>{u(e===N?-1:e)})(i)},children:t(c,{name:N===i?"arrows_down_icon":"arrows_right_icon",color:"var(--table-with-accordion-icon-color)",width:T,height:y,hoverEffect:!1})})]})})}),N===i&&t("div",{children:j(a.data)})]},`column-accordion-${i}`)),f.length<=0&&t("div",{className:"no-data-content",style:{height:`calc(${g} - 50px)`},children:p})]})};export{h as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import classNames from 'classnames';
+import Accordion from '../Accordion';
+import './TableWithAccordion.scss';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import '../../../index.scss';
+import Typography from '../Typography';
+import HighlightText from '../HighlightText';
+import { isTextTruncated, truncateText, } from '../../utils/truncateText/truncateText';
+const TableWithAccordion = ({ highlightText = '', tableMeta = [], tableData = [], accordionType = 'row', noDataContent, height = '100%', withFixedHeader = false, headerType, TableAccordionStateIconWidth = 4, TableAccordionStateIconHeight = 8, }) => {
+    const [expandedRowIndex, setExpandedRowIndex] = useState(-1);
+    const onAccordionClick = (index) => {
+        setExpandedRowIndex(index === expandedRowIndex ? -1 : index);
+    };
+    const getAccordionTableCellContent = (dataObj, columnObj) => {
+        let cellData = dataObj[columnObj.accessor];
+        if (columnObj.cell) {
+            return columnObj.cell({
+                value: cellData,
+                row: dataObj,
+                column: columnObj.accessor,
+            });
+        }
+        else if (columnObj.accessor) {
+            return cellData;
+        }
+        else if (cellData && typeof cellData !== 'object') {
+            return cellData;
+        }
+        else {
+            return '--';
+        }
+    };
+    const getAccordionTableContent = (dataArray) => {
+        const accordionSubTable = dataArray.map((rowData, index) => {
+            return (_jsx("table", { className: "ff-accordion-table", cellSpacing: 0, children: _jsx("tbody", { className: "ff-table-body", children: _jsx("tr", { className: "ff-table-row", children: tableMeta.map((column, i) => {
+                            return (_jsx("td", { className: "ff-table-cell", style: { width: column.width }, children: accordionType === 'column' && i === 0 ? ('') : (_jsx(Typography, { children: getAccordionTableCellContent(rowData, column) })) }, column.accessor + i));
+                        }) }, rowData.id || index) }) }, `accordion-table-${index}`));
+        });
+        return accordionSubTable;
+    };
+    return (_jsxs("div", { style: { height: height }, className: classNames('ff-accordion-table-container', {
+            'ff-accordion-fixed-header-table': withFixedHeader,
+        }), children: [_jsx("table", { cellSpacing: 0, className: classNames('ff-accordion-table', {
+                    'ff-accordion-fixed-header': withFixedHeader,
+                }), children: _jsx("thead", { children: _jsx("tr", { className: "ff-table-row", children: tableMeta.map((column) => (_jsx("th", { style: { width: column.width }, className: classNames('ff-table-header', headerType && `ff-accordion-table--${headerType}-bg`), children: _jsx("div", { children: _jsx(Typography, { fontWeight: "semi-bold", fontSize: 12, children: column.header }) }) }, `header-${column.header}`))) }) }) }), accordionType === 'row' &&
+                tableData.map((row, rowIndex) => (_jsx(Accordion, { highlightText: highlightText, headerTitle: row.title, color: "var(--text-color)", accordionContent: getAccordionTableContent(row.data), disable: row.disable, disableInfoMessage: row.disableInfoMessage, accordionStateIconName: "arrows_down_icon", AccordionStateIconWidth: TableAccordionStateIconWidth, AccordionStateIconHeight: TableAccordionStateIconHeight }, `accordion-row-${rowIndex}`))), accordionType === 'column' &&
+                tableData.map((row, index) => (_jsxs("div", { className: "column-table-accordion", children: [_jsx("div", { className: "ff-display-flex", children: _jsx(Tooltip, { title: row.disable
+                                    ? row?.disableInfoMessage
+                                    : typeof row.title === 'string' &&
+                                        isTextTruncated(row.title, tableMeta[0]?.width, 'pixel')
+                                        ? row.title
+                                        : '', placement: "bottom-start", children: _jsxs("div", { className: `accordion-header ${row.disable && 'accordion-header--disabled'}`, children: [_jsx("div", { className: "header-title", children: _jsx("span", { children: _jsx(Typography, { children: _jsx(HighlightText, { text: truncateText(row.title, tableMeta[0]?.width, 'pixel'), highlight: highlightText }) }) }) }), _jsx("div", { className: "accordion-arrow", onClick: () => {
+                                                !row.disable && onAccordionClick(index);
+                                            }, children: _jsx(Icon, { name: expandedRowIndex === index
+                                                    ? 'arrows_down_icon'
+                                                    : 'arrows_right_icon', color: "var(--table-with-accordion-icon-color)", width: TableAccordionStateIconWidth, height: TableAccordionStateIconHeight, hoverEffect: false }) })] }) }) }), expandedRowIndex === index && (_jsx("div", { children: getAccordionTableContent(row.data) }))] }, `column-accordion-${index}`))), tableData.length <= 0 && (_jsx("div", { className: "no-data-content", style: { height: `calc(${height} - 50px)` }, children: noDataContent }))] }));
+};
+export default TableWithAccordion;
+//# sourceMappingURL=TableWithAccordion.js.map

package/lib/components/Tabs/Tabs.js

@@ -1 +1,35 @@
-import{jsxs as a,jsx as t}from"react/jsx-runtime";import"./Tabs.scss.js";import s from"../../_virtual/index.js";import e from"../Typography/Typography.js";import"../../assets/styles/_colors.scss.js";import i from"../Icon/Icon.js";const o=({variant:o="default",tabsData:r,activeTabId:c,onTabClick:d,noBorder:f=!1,noPadding:l=!1,titleSize:n="12px",isBorderBottomLine:b=!1,isHoverBackground:m=!1,isBorderRadius:u=!1,tabFlexSpacing:p="flex-start"})=>a("div",{className:"ff-tabs-container",children:[t("div",{className:s(`ff-tab-row--${o} ff-tab-row-spacing--${p}`,{"ff-tab-row--no-border":f,"ff-tab-row--no-padding":l,"ff-tab-row--borderBottomLine":b}),children:r.map(r=>a("button",{onClick:()=>!r.disabled&&d(r.id),disabled:r.disabled,className:s(`ff-tab-button--${o}`,{disabled:r.disabled,active:c===r.id,"ff-tab-button-bg":m}),children:[a("div",{className:"label-count-section",children:[t(e,{children:r.label,fontSize:n,lineHeight:"18px",fontWeight:c===r.id?"semi-bold":"regular",color:c===r.id?"var(--tabs-label-active-color)":"var(--tabs-label-default-color)",className:s("ff-tab-label",{"ff-tab-label--active":c===r.id})}),"default"===o&&void 0!==r.count&&t("span",{className:s("tab-count",{"tab-count--active":c===r.id}),children:r.count}),r.icon&&t(i,{name:r.icon,className:s("ff-tab-icon",{"ff-tab-icon--active":c===r.id})})]}),t("div",{className:s("ff-tab-bar",{"ff-tab-bar--active":c===r.id,"ff-tab-bar--radius-4":u,"ff-tab-bar--radius-2":!u})}),t("span",{className:"ff-defaultStatus "+("success"===r.status?"ff-successStatus":"error"===r.status?"ff-dangerStatus":"")})]},r.id))}),t("div",{className:"ff-tab-content",children:r.find(a=>a.id===c)?.component})]});export{o as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Tabs.scss';
+import classNames from 'classnames';
+import Typography from '../Typography';
+import '../../assets/styles/_colors.scss';
+import Icon from '../Icon';
+const Tabs = ({ variant = 'default', tabsData, activeTabId, onTabClick, noBorder = false, noPadding = false, titleSize = '12px', isBorderBottomLine = false, isHoverBackground = false, isBorderRadius = false, tabFlexSpacing = 'flex-start', }) => {
+    return (_jsxs("div", { className: `ff-tabs-container`, children: [_jsx("div", { className: classNames(`ff-tab-row--${variant} ff-tab-row-spacing--${tabFlexSpacing}`, {
+                    'ff-tab-row--no-border': noBorder,
+                    'ff-tab-row--no-padding': noPadding,
+                    'ff-tab-row--borderBottomLine': isBorderBottomLine,
+                }), children: tabsData.map((tab) => (_jsxs("button", { onClick: () => !tab.disabled && onTabClick(tab.id), disabled: tab.disabled, className: classNames(`ff-tab-button--${variant}`, {
+                        disabled: tab.disabled,
+                        active: activeTabId === tab.id,
+                        'ff-tab-button-bg': isHoverBackground,
+                    }), children: [_jsxs("div", { className: "label-count-section", children: [_jsx(Typography, { children: tab.label, fontSize: titleSize, lineHeight: "18px", fontWeight: activeTabId === tab.id ? 'semi-bold' : 'regular', color: activeTabId === tab.id
+                                        ? 'var(--tabs-label-active-color)'
+                                        : 'var(--tabs-label-default-color)', className: classNames('ff-tab-label', {
+                                        'ff-tab-label--active': activeTabId === tab.id,
+                                    }) }), variant === 'default' && tab.count !== undefined && (_jsx("span", { className: classNames('tab-count', {
+                                        'tab-count--active': activeTabId === tab.id,
+                                    }), children: tab.count })), tab.icon && (_jsx(Icon, { name: tab.icon, className: classNames('ff-tab-icon', {
+                                        'ff-tab-icon--active': activeTabId === tab.id,
+                                    }) }))] }), _jsx("div", { className: classNames('ff-tab-bar', {
+                                'ff-tab-bar--active': activeTabId === tab.id,
+                                'ff-tab-bar--radius-4': isBorderRadius,
+                                'ff-tab-bar--radius-2': !isBorderRadius,
+                            }) }), _jsx("span", { className: `ff-defaultStatus ${tab.status === 'success'
+                                ? 'ff-successStatus'
+                                : tab.status === 'error'
+                                    ? 'ff-dangerStatus'
+                                    : ''}` })] }, tab.id))) }), _jsx("div", { className: `ff-tab-content`, children: tabsData.find((tab) => tab.id === activeTabId)?.component })] }));
+};
+export default Tabs;
+//# sourceMappingURL=Tabs.js.map

package/lib/components/TabsWithSilder/TabsWithSilder.js

@@ -1 +1,52 @@
-import{jsxs as a,jsx as t}from"react/jsx-runtime";import"./TabsWithSilder.scss.js";import e from"../../_virtual/index.js";import l from"../Typography/Typography.js";import"../../assets/styles/_colors.scss.js";import i from"../Icon/Icon.js";import{useState as s}from"react";import o from"../Tooltip/Tooltip.js";const r=({variant:r="default",tabsData:c,activeTabId:n,onTabClick:f,noBorder:d=!1,noPadding:b=!1,titleSize:m="12px"})=>{const[h,u]=s(0);return a("div",{className:"ff-tabs-slider-container",children:[a("div",{className:e(`ff-tab-row--${r} ff-tab-row-section`,{"ff-tab-row--no-border":d,"ff-tab-row--no-padding":b,"ff-tab-row--position":c.length>4}),children:[c.length>4&&t(i,{className:"ff-tab-icon ff-tab-icon--previous",name:""+(h?"arrow_left_accordian":""),onClick:()=>{h>0&&u(a=>a-1)},hoverEffect:!0}),t("div",{className:"ff-tab-row-carousel",children:t("div",{className:"carousel_inner",style:{transform:`translateX(-${100*h}%)`},children:c.map(i=>a("button",{onClick:()=>!i.disabled&&f(i.id),disabled:i.disabled,className:e(`ff-tab-button--${r}`,{disabled:i.disabled,active:n===i.id}),style:{flex:"0 0 25%"},children:[a("div",{className:"label-count-section",children:[t(o,{title:i.label.length>9?i.label:"",children:t(l,{children:i.label.length>9?i.label.slice(0,9)+"...":i.label,fontSize:m,lineHeight:"18px",fontWeight:n===i.id?"semi-bold":"regular",color:n===i.id?"var(--tabs-label-active-color)":"var(--tabs-label-default-color)",className:e("ff-tab-label",{"ff-tab-label--active":n===i.id})})}),"default"===r&&i.count&&t("span",{className:e("tab-count",{"tab-count--active":n===i.id}),children:i.count})]}),t("div",{className:e("ff-tab-bar",{"ff-tab-bar--active":n===i.id})}),t("span",{className:"ff-defaultStatus "+("success"===i.status?"ff-successStatus":"error"===i.status?"ff-dangerStatus":"")})]},i.id))})}),c.length>4&&t(i,{className:"ff-tab-icon ff-tab-icon--next",name:""+(h<Math.ceil(c.length/4)-1?"arrow_right_icon":""),onClick:()=>{h<Math.ceil(c.length/4)-1&&u(a=>a+1)},hoverEffect:!0})]}),t("div",{className:"ff-tab-content",children:c.find(a=>a.id===n)?.component})]})};export{r as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './TabsWithSilder.scss';
+import classNames from 'classnames';
+import Typography from '../Typography';
+import '../../assets/styles/_colors.scss';
+import Icon from '../Icon';
+import { useState } from 'react';
+import Tooltip from '../Tooltip';
+const TabsWithSilder = ({ variant = 'default', tabsData, activeTabId, onTabClick, noBorder = false, noPadding = false, titleSize = '12px', }) => {
+    const [currentSlide, setCurrentSlide] = useState(0);
+    const tabsPerSlide = 4; // as confirmed there should be 4 tabs per slide
+    const handleNext = () => {
+        if (currentSlide < Math.ceil(tabsData.length / tabsPerSlide) - 1) {
+            setCurrentSlide((prev) => prev + 1);
+        }
+    };
+    const handlePrev = () => {
+        if (currentSlide > 0) {
+            setCurrentSlide((prev) => prev - 1);
+        }
+    };
+    return (_jsxs("div", { className: `ff-tabs-slider-container`, children: [_jsxs("div", { className: classNames(`ff-tab-row--${variant} ff-tab-row-section`, {
+                    'ff-tab-row--no-border': noBorder,
+                    'ff-tab-row--no-padding': noPadding,
+                    'ff-tab-row--position': tabsData.length > tabsPerSlide,
+                }), children: [tabsData.length > tabsPerSlide && (_jsx(Icon, { className: "ff-tab-icon ff-tab-icon--previous", name: `${currentSlide ? 'arrow_left_accordian' : ''}`, onClick: handlePrev, hoverEffect: true })), _jsx("div", { className: "ff-tab-row-carousel", children: _jsx("div", { className: 'carousel_inner', style: {
+                                transform: `translateX(-${currentSlide * 100}%)`,
+                            }, children: tabsData.map((tab) => (_jsxs("button", { onClick: () => !tab.disabled && onTabClick(tab.id), disabled: tab.disabled, className: classNames(`ff-tab-button--${variant}`, {
+                                    disabled: tab.disabled,
+                                    active: activeTabId === tab.id,
+                                }), style: {
+                                    flex: `0 0 ${100 / tabsPerSlide}%`,
+                                }, children: [_jsxs("div", { className: "label-count-section", children: [_jsx(Tooltip, { title: tab.label.length > 9 ? tab.label : '', children: _jsx(Typography, { children: tab.label.length > 9
+                                                        ? tab.label.slice(0, 9) + '...'
+                                                        : tab.label, fontSize: titleSize, lineHeight: "18px", fontWeight: activeTabId === tab.id ? 'semi-bold' : 'regular', color: activeTabId === tab.id
+                                                        ? 'var(--tabs-label-active-color)'
+                                                        : 'var(--tabs-label-default-color)', className: classNames('ff-tab-label', {
+                                                        'ff-tab-label--active': activeTabId === tab.id,
+                                                    }) }) }), variant === 'default' && tab.count && (_jsx("span", { className: classNames('tab-count', {
+                                                    'tab-count--active': activeTabId === tab.id,
+                                                }), children: tab.count }))] }), _jsx("div", { className: classNames('ff-tab-bar', {
+                                            'ff-tab-bar--active': activeTabId === tab.id,
+                                        }) }), _jsx("span", { className: `ff-defaultStatus ${tab.status === 'success'
+                                            ? 'ff-successStatus'
+                                            : tab.status === 'error'
+                                                ? 'ff-dangerStatus'
+                                                : ''}` })] }, tab.id))) }) }), tabsData.length > tabsPerSlide && (_jsx(Icon, { className: "ff-tab-icon ff-tab-icon--next", name: `${currentSlide < Math.ceil(tabsData.length / tabsPerSlide) - 1
+                            ? 'arrow_right_icon'
+                            : ''}`, onClick: handleNext, hoverEffect: true }))] }), _jsx("div", { className: `ff-tab-content`, children: tabsData.find((tab) => tab.id === activeTabId)?.component })] }));
+};
+export default TabsWithSilder;
+//# sourceMappingURL=TabsWithSilder.js.map

package/lib/components/TextArea/Textarea.js

@@ -1 +1,85 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import t from"../../_virtual/index.js";import"./Textarea.scss.js";import r from"../Typography/Typography.js";import{ENTER_NEW_LINE_REGEX as l}from"../../validations/regex.js";const n=e=>e.replace(l,"").length,o=({capacity:l=200,name:o,label:s,value:i="",variant:c="primary",error:f,helperText:d="",disabled:p=!1,required:x=!1,placeholder:m="Enter text",className:u="",onChange:h,onBlur:g,onFocus:b,onPaste:v,rows:y=4,cols:N=40,resize:T=!1,errorText:j,readOnly:D=!1,displayCapacity:z=!0,isLabelRequired:S=!0,...q})=>{const w=t("ff-textarea-label ff-textarea-label--"+c,{"ff-textarea-label--danger":f,"ff-textarea-label--disabled":p&&!i}),B=t(`ff-textarea ff-textarea--${c}`,u,{"ff-textarea--danger":f,"ff-textarea--resize":!T,"ff-textarea--placeholder":!S}),C=t("ff-textarea-container",{"ff-textarea-container--disabled":p,"ff-textarea-container--float":Boolean(i)}),E=f||!i,F=E?e("span",{className:"ff-textarea-error-text",children:e(r,{fontSize:10,children:j})}):null;return a("div",{className:C,children:[S&&e("label",{htmlFor:o,className:t("ff-textarea-label-container",{"ff-textarea-label-container--danger":f}),children:a("span",{className:w,children:[x&&e("span",{className:"required-asterisk",children:"*"}),s]})}),e("textarea",{name:o,value:i,id:o,className:B,placeholder:m,disabled:p,onChange:e=>{const a=e.target.value;n(a)<=l&&h?.(e)},onBlur:g,onFocus:b,onKeyDown:e=>{if("Enter"===e.key){const a=e.currentTarget,t=a.selectionStart;""===(a.value.substring(0,t).split("\n").pop()||"").trim()&&e.preventDefault()}q.onKeyDown?.(e)},onPaste:e=>{e.preventDefault();const a=e.clipboardData.getData("text/plain").split("\n").filter(e=>""!==e.trim()).join("\n"),t=e.currentTarget,r=t.selectionStart,o=t.selectionEnd,s=t.value.slice(0,r),i=t.value.slice(o),c=n(s+i);let f=l-c,d="";for(const e of a)"\n"===e?d+=e:f>0&&(d+=e,f--);const p=s+d+i,x={...e,target:{...t,value:p}};h?.(x),v?.(e)},required:x,rows:y,cols:N,readOnly:D,...q}),a("div",{className:E?"ff-textarea-error-alignment":"msg-character-count",children:[F,l>0&&!D&&z&&a("div",{className:"ff-textarea-character-count",children:[a(r,{fontSize:8,children:[n(i),"/"]}),e(r,{fontSize:8,children:l})]})]})]})};export{o as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import './Textarea.scss';
+import Typography from '../Typography';
+import { ENTER_NEW_LINE_REGEX } from '../../validations/regex';
+const getCharacterCount = (value) => {
+    return value.replace(ENTER_NEW_LINE_REGEX, '').length;
+};
+const Textarea = ({ capacity = 200, name, label, value = '', variant = 'primary', error, helperText = '', disabled = false, required = false, placeholder = 'Enter text', className = '', onChange, onBlur, onFocus, onPaste, rows = 4, cols = 40, resize = false, errorText, readOnly = false, displayCapacity = true, isLabelRequired = true, ...props }) => {
+    const labelClasses = classNames('ff-textarea-label ff-textarea-label--' + variant, {
+        'ff-textarea-label--danger': error,
+        'ff-textarea-label--disabled': disabled && !value,
+    });
+    const textareaClasses = classNames(`ff-textarea ff-textarea--${variant}`, className, {
+        'ff-textarea--danger': error,
+        'ff-textarea--resize': !resize,
+        'ff-textarea--placeholder': !isLabelRequired,
+    });
+    const containerClasses = classNames('ff-textarea-container', {
+        'ff-textarea-container--disabled': disabled,
+        'ff-textarea-container--float': Boolean(value),
+    });
+    const isError = error || !value;
+    const errorMessage = isError ? (_jsx("span", { className: "ff-textarea-error-text", children: _jsx(Typography, { fontSize: 10, children: errorText }) })) : null;
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        const characterCount = getCharacterCount(newValue);
+        if (characterCount <= capacity) {
+            onChange?.(e);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            const textarea = e.currentTarget;
+            const cursorPos = textarea.selectionStart;
+            const value = textarea.value;
+            const textBeforeCursor = value.substring(0, cursorPos);
+            const currentLine = textBeforeCursor.split('\n').pop() || '';
+            if (currentLine.trim() === '') {
+                e.preventDefault();
+            }
+        }
+        props.onKeyDown?.(e);
+    };
+    const handlePaste = (e) => {
+        e.preventDefault();
+        const pastedText = e.clipboardData.getData('text/plain');
+        const processedText = pastedText
+            .split('\n')
+            .filter((line) => line.trim() !== '')
+            .join('\n');
+        const textarea = e.currentTarget;
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const textBefore = textarea.value.slice(0, start);
+        const textAfter = textarea.value.slice(end);
+        const currentCount = getCharacterCount(textBefore + textAfter);
+        let allowedCount = capacity - currentCount;
+        let limitedPastedText = '';
+        for (const char of processedText) {
+            if (char === '\n') {
+                limitedPastedText += char;
+            }
+            else if (allowedCount > 0) {
+                limitedPastedText += char;
+                allowedCount--;
+            }
+        }
+        const newValue = textBefore + limitedPastedText + textAfter;
+        const event = {
+            ...e,
+            target: {
+                ...textarea,
+                value: newValue,
+            },
+        };
+        onChange?.(event);
+        onPaste?.(e);
+    };
+    return (_jsxs("div", { className: containerClasses, children: [isLabelRequired && (_jsx("label", { htmlFor: name, className: classNames('ff-textarea-label-container', {
+                    'ff-textarea-label-container--danger': error,
+                }), children: _jsxs("span", { className: labelClasses, children: [required && _jsx("span", { className: "required-asterisk", children: "*" }), label] }) })), _jsx("textarea", { name: name, value: value, id: name, className: textareaClasses, placeholder: placeholder, disabled: disabled, onChange: handleChange, onBlur: onBlur, onFocus: onFocus, onKeyDown: handleKeyDown, onPaste: handlePaste, required: required, rows: rows, cols: cols, readOnly: readOnly, ...props }), _jsxs("div", { className: isError ? 'ff-textarea-error-alignment' : 'msg-character-count', children: [errorMessage, capacity > 0 && !readOnly && displayCapacity && (_jsxs("div", { className: 'ff-textarea-character-count', children: [_jsxs(Typography, { fontSize: 8, children: [getCharacterCount(value), "/"] }), _jsx(Typography, { fontSize: 8, children: capacity })] }))] })] }));
+};
+export default Textarea;
+//# sourceMappingURL=Textarea.js.map

package/lib/components/TextEditor/TextEditor.js

@@ -1 +1,265 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as r,useRef as o,useEffect as n}from"react";import{D as a}from"../../_virtual/Draft.js";import{r as i}from"../../_virtual/react-draft-wysiwyg.js";import"./TextEditor.scss.js";import{checkEmpty as c}from"../../utils/checkEmpty/checkEmpty.js";import l from"../Typography/Typography.js";import s from"../Tooltip/Tooltip.js";import d from"../Icon/Icon.js";import p from"../../hooks/useClickOutside.js";const m=t=>{const{contentState:r,entityKey:o,children:n}=t,a=r.getEntity(o),{url:i,target:c}=a.getData();return e("a",{href:i,target:c||"_blank",rel:"noopener noreferrer",onClick:t=>{t.preventDefault(),t.stopPropagation(),i&&("_blank"!==c&&c?window.open(i,c):window.open(i,"_blank","noopener,noreferrer"))},style:{color:"var(--ff-step-element-color)",textDecoration:"underline",cursor:"pointer"},children:n})},f=({convertedContent:f,setConvertedContent:u,readOnly:h,toolbarHidden:b,toolbarOptions:g,label:C,required:y=!1,onBlur:E,mode:x,helperText:v,analyticsClasses:S=!1,error:w,editableTextEditor:k=!1,onSubmit:T,onFocus:F})=>{const[N,R]=r(null),[O,j]=r(!1),[W,_]=r(!1),[D,A]=r(!1),[I,H]=r(f),J=o(null),P=o(null),z=new a.CompositeDecorator([{strategy:(t,e,r)=>{t.findEntityRanges(t=>{const e=t.getEntity();return null!==e&&"LINK"===r.getEntity(e).getType()},e)},component:m}]),L=t=>{if(!t)return null;try{const e=JSON.parse(t);return e&&"object"==typeof e&&e.blocks?e:a.convertToRaw(a.ContentState.createFromText(t))}catch(e){return a.convertToRaw(a.ContentState.createFromText(t))}};n(()=>{let t;try{if(c(f))t="view"===x||k&&!D?a.EditorState.createWithContent(a.ContentState.createFromText("---"),z):a.EditorState.createEmpty(z);else{const e=L(f);t=e?a.EditorState.createWithContent(a.convertFromRaw(e),z):a.EditorState.createEmpty(z)}}catch(e){console.error("Error creating editor state:",e),t=a.EditorState.createWithContent(a.ContentState.createFromText(f||"Invalid content"),z)}R(t),H(f)},[f,x,D,k]),n(()=>{if(0===f?.length){let t;if("view"===x||k&&!D){const e=a.ContentState.createFromText("---");t=a.EditorState.createWithContent(e,z)}else t=a.EditorState.createEmpty(z);R(t)}},[f,x,D,k]),n(()=>{if(!J.current)return;const t=t=>{const e=t.target.closest("a");if(e&&J.current?.contains(e)){t.preventDefault(),t.stopPropagation();const r=e.getAttribute("href"),o=e.getAttribute("target")||"_blank";r&&("_blank"===o?window.open(r,"_blank","noopener,noreferrer"):window.open(r,o))}},e=J.current;return e.addEventListener("click",t),()=>{e.removeEventListener("click",t)}},[]);p(J,()=>{if(k&&D&&!W){A(!1),u(I||"");const t=L(I),e=t?a.EditorState.createWithContent(a.convertFromRaw(t),z):a.EditorState.createWithContent(a.ContentState.createFromText("---"),z);R(e)}},[P]);const q=i.Editor;return t("div",{className:"ff-textEditor-container",children:[t("div",{className:"ff-title-button",children:[t("div",{className:"ff-textEditor-label-asterisk-container",children:[y&&e(l,{className:"required-asterisk",children:"* "}),C&&e(l,{lineHeight:"10px",fontWeight:"medium",fontSize:"12px",children:C})]}),k&&D&&t("div",{ref:P,className:"ff-textEditor-buttons",children:[e(s,{title:"Update",placement:"bottom",children:e(d,{name:"update_icon",color:"var(--label-edit-confirm-icon)",height:20,width:20,hoverEffect:!0,onClick:()=>{if(W||!N)return;const t=a.convertToRaw(N.getCurrentContent());let e=JSON.stringify(t);""===t?.blocks[0]?.text&&(e=JSON.stringify(a.convertToRaw(a.ContentState.createFromText("---")))),u(e),T&&T(e),H(e),A(!1)}})}),e(s,{title:"Cancel",placement:"bottom",children:e(d,{name:"close",color:"var(--label-edit-cancel-icon)",height:20,width:20,onClick:()=>{A(!1),u(I||"");const t=L(I),e=t?a.EditorState.createWithContent(a.convertFromRaw(t),z):a.EditorState.createWithContent(a.ContentState.createFromText("---"),z);R(e),_(!1)},hoverEffect:!0})})]})]}),e("div",{ref:J,onDoubleClick:()=>{if(k&&!D){A(!0),H(f);const t=L(f),e="---"===t?.blocks[0]?.text?a.EditorState.createEmpty(z):t?a.EditorState.createWithContent(a.convertFromRaw(t),z):a.EditorState.createEmpty(z);R(e)}},children:N&&e(q,{editorState:N,onEditorStateChange:t=>{R(t);const e=a.convertToRaw(t.getCurrentContent());D&&""===e?.blocks[0]?.text&&y?_(!0):""!==e?.blocks[0]?.text&&_(!1)},wrapperClassName:"wrapperClass",editorClassName:"ff-heading-TextEditor-style "+(S?"fontSm":"fontMd"),editorStyle:"view"===x||k&&!D?{border:"none"}:O?{border:"1px solid var(--text-editor-in-focus-border-color)",borderRadius:"4px",padding:"0px 8px"}:{border:"1px solid var(--text-editor-out-focus-border-color) ",borderRadius:"4px",padding:"0px 8px"},onFocus:()=>{j(!0),F&&F()},onBlur:t=>{if(!k&&N){const t=a.convertToRaw(N.getCurrentContent());u(JSON.stringify(t)),""===t?.blocks[0]?.text&&_(!0)}E&&E(t)},readOnly:k?!D:h,toolbarHidden:k?!D:b,toolbarClassName:"ff-toolbarClass",handlePastedText:()=>!1,toolbar:{options:Array.isArray(g)&&g?.length>0?g:["inline","blockType","fontSize","fontFamily","list","textAlign","colorPicker","link","emoji","image","remove","history"],fontFamily:{options:["Arial","Georgia","Impact","OpenSans-Regular","Tahoma","Times New Roman","Verdana","poppins"]},link:{defaultTargetOption:"_blank",showOpenOptionOnHover:!1}}})}),y&&W||v&&w?e(l,{fontSize:10,className:"ff-textEditor-error-msg",as:"span",children:v}):null]})};export{f as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from 'react';
+import { EditorState, ContentState, convertFromRaw, convertToRaw, CompositeDecorator, } from 'draft-js';
+import { Editor as DraftEditor } from 'react-draft-wysiwyg';
+import './TextEditor.scss';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import Typography from '../Typography';
+import Tooltip from '../Tooltip';
+import Icon from '../Icon';
+import useClickOutside from '../../hooks/useClickOutside';
+const Link = (props) => {
+    const { contentState, entityKey, children } = props;
+    const entity = contentState.getEntity(entityKey);
+    const { url, target } = entity.getData();
+    const handleClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (url) {
+            if (target === '_blank' || !target) {
+                window.open(url, '_blank', 'noopener,noreferrer');
+            }
+            else {
+                window.open(url, target);
+            }
+        }
+    };
+    return (_jsx("a", { href: url, target: target || '_blank', rel: "noopener noreferrer", onClick: handleClick, style: {
+            color: "var(--ff-step-element-color)",
+            textDecoration: 'underline',
+            cursor: 'pointer',
+        }, children: children }));
+};
+const createLinkDecorator = () => {
+    return new CompositeDecorator([
+        {
+            strategy: (contentBlock, callback, contentState) => {
+                contentBlock.findEntityRanges((character) => {
+                    const entityKey = character.getEntity();
+                    return entityKey !== null && contentState.getEntity(entityKey).getType() === 'LINK';
+                }, callback);
+            },
+            component: Link,
+        },
+    ]);
+};
+const TextEditor = ({ convertedContent, setConvertedContent, readOnly, toolbarHidden, toolbarOptions, label, required = false, onBlur, mode, helperText, analyticsClasses = false, error, editableTextEditor = false, onSubmit, onFocus, }) => {
+    const [editorState, setEditorState] = useState(null);
+    const [focusState, setFocusState] = useState(false);
+    const [errorMsg, setErrorMsg] = useState(false);
+    const [isEditing, setIsEditing] = useState(false);
+    const [initialContent, setInitialContent] = useState(convertedContent);
+    const editorRef = useRef(null);
+    const buttonsRef = useRef(null);
+    const linkDecorator = createLinkDecorator();
+    const defaultToolBarOptions = [
+        'inline',
+        'blockType',
+        'fontSize',
+        'fontFamily',
+        'list',
+        'textAlign',
+        'colorPicker',
+        'link',
+        'emoji',
+        'image',
+        'remove',
+        'history',
+    ];
+    const parseContent = (content) => {
+        if (!content)
+            return null;
+        try {
+            const parsed = JSON.parse(content);
+            if (parsed && typeof parsed === 'object' && parsed.blocks) {
+                return parsed;
+            }
+            return convertToRaw(ContentState.createFromText(content));
+        }
+        catch (e) {
+            return convertToRaw(ContentState.createFromText(content));
+        }
+    };
+    useEffect(() => {
+        let newEditorState;
+        try {
+            if (!checkEmpty(convertedContent)) {
+                const content = parseContent(convertedContent);
+                if (content) {
+                    newEditorState = EditorState.createWithContent(convertFromRaw(content), linkDecorator);
+                }
+                else {
+                    newEditorState = EditorState.createEmpty(linkDecorator);
+                }
+            }
+            else {
+                newEditorState =
+                    mode === 'view' || (editableTextEditor && !isEditing)
+                        ? EditorState.createWithContent(ContentState.createFromText('---'), linkDecorator)
+                        : EditorState.createEmpty(linkDecorator);
+            }
+        }
+        catch (e) {
+            console.error('Error creating editor state:', e);
+            newEditorState = EditorState.createWithContent(ContentState.createFromText(convertedContent || 'Invalid content'), linkDecorator);
+        }
+        setEditorState(newEditorState);
+        setInitialContent(convertedContent);
+    }, [convertedContent, mode, isEditing, editableTextEditor]);
+    useEffect(() => {
+        if (convertedContent?.length === 0) {
+            let newEditorState;
+            if (mode === 'view' || (editableTextEditor && !isEditing)) {
+                const content = ContentState.createFromText('---');
+                newEditorState = EditorState.createWithContent(content, linkDecorator);
+            }
+            else {
+                newEditorState = EditorState.createEmpty(linkDecorator);
+            }
+            setEditorState(newEditorState);
+        }
+    }, [convertedContent, mode, isEditing, editableTextEditor]);
+    useEffect(() => {
+        if (!editorRef.current)
+            return;
+        const handleLinkClick = (e) => {
+            const target = e.target;
+            const linkElement = target.closest('a');
+            if (linkElement && editorRef.current?.contains(linkElement)) {
+                e.preventDefault();
+                e.stopPropagation();
+                const href = linkElement.getAttribute('href');
+                const targetAttr = linkElement.getAttribute('target') || '_blank';
+                if (href) {
+                    if (targetAttr === '_blank') {
+                        window.open(href, '_blank', 'noopener,noreferrer');
+                    }
+                    else {
+                        window.open(href, targetAttr);
+                    }
+                }
+            }
+        };
+        const editorElement = editorRef.current;
+        editorElement.addEventListener('click', handleLinkClick);
+        return () => {
+            editorElement.removeEventListener('click', handleLinkClick);
+        };
+    }, []);
+    const handleEditorChange = (state) => {
+        setEditorState(state);
+        const currentContentAsRaw = convertToRaw(state.getCurrentContent());
+        if (isEditing && currentContentAsRaw?.blocks[0]?.text === '' && required) {
+            setErrorMsg(true);
+        }
+        else if (currentContentAsRaw?.blocks[0]?.text !== '') {
+            setErrorMsg(false);
+        }
+    };
+    const handleClickOutside = () => {
+        if (editableTextEditor && isEditing && !errorMsg) {
+            setIsEditing(false);
+            setConvertedContent(initialContent || '');
+            const content = parseContent(initialContent);
+            const newEditorState = content
+                ? EditorState.createWithContent(convertFromRaw(content), linkDecorator)
+                : EditorState.createWithContent(ContentState.createFromText('---'), linkDecorator);
+            setEditorState(newEditorState);
+        }
+    };
+    useClickOutside(editorRef, handleClickOutside, [buttonsRef]);
+    const handleEditorBlur = (event) => {
+        if (!editableTextEditor && editorState) {
+            const currentContentAsRaw = convertToRaw(editorState.getCurrentContent());
+            setConvertedContent(JSON.stringify(currentContentAsRaw));
+            if (currentContentAsRaw?.blocks[0]?.text === '') {
+                setErrorMsg(true);
+            }
+        }
+        if (onBlur) {
+            onBlur(event);
+        }
+    };
+    const handleDoubleClick = () => {
+        if (editableTextEditor && !isEditing) {
+            setIsEditing(true);
+            setInitialContent(convertedContent);
+            const content = parseContent(convertedContent);
+            const isDashContent = content?.blocks[0]?.text === '---';
+            const newEditorState = isDashContent
+                ? EditorState.createEmpty(linkDecorator)
+                : content
+                    ? EditorState.createWithContent(convertFromRaw(content), linkDecorator)
+                    : EditorState.createEmpty(linkDecorator);
+            setEditorState(newEditorState);
+        }
+    };
+    const handleSubmit = () => {
+        if (errorMsg || !editorState) {
+            return;
+        }
+        const currentContentAsRaw = convertToRaw(editorState.getCurrentContent());
+        let contentString = JSON.stringify(currentContentAsRaw);
+        if (currentContentAsRaw?.blocks[0]?.text === '') {
+            contentString = JSON.stringify(convertToRaw(ContentState.createFromText('---')));
+        }
+        setConvertedContent(contentString);
+        if (onSubmit) {
+            onSubmit(contentString);
+        }
+        setInitialContent(contentString);
+        setIsEditing(false);
+    };
+    const handleCancel = () => {
+        setIsEditing(false);
+        setConvertedContent(initialContent || '');
+        const content = parseContent(initialContent);
+        const newEditorState = content
+            ? EditorState.createWithContent(convertFromRaw(content), linkDecorator)
+            : EditorState.createWithContent(ContentState.createFromText('---'), linkDecorator);
+        setEditorState(newEditorState);
+        setErrorMsg(false);
+    };
+    const handleFocus = () => {
+        setFocusState(true);
+        if (onFocus) {
+            onFocus();
+        }
+    };
+    const EditorComponent = DraftEditor;
+    return (_jsxs("div", { className: "ff-textEditor-container", children: [_jsxs("div", { className: "ff-title-button", children: [_jsxs("div", { className: "ff-textEditor-label-asterisk-container", children: [required && (_jsx(Typography, { className: "required-asterisk", children: "* " })), label && (_jsx(Typography, { lineHeight: "10px", fontWeight: "medium", fontSize: "12px", children: label }))] }), editableTextEditor && isEditing && (_jsxs("div", { ref: buttonsRef, className: "ff-textEditor-buttons", children: [_jsx(Tooltip, { title: "Update", placement: "bottom", children: _jsx(Icon, { name: "update_icon", color: "var(--label-edit-confirm-icon)", height: 20, width: 20, hoverEffect: true, onClick: handleSubmit }) }), _jsx(Tooltip, { title: "Cancel", placement: "bottom", children: _jsx(Icon, { name: "close", color: "var(--label-edit-cancel-icon)", height: 20, width: 20, onClick: handleCancel, hoverEffect: true }) })] }))] }), _jsx("div", { ref: editorRef, onDoubleClick: handleDoubleClick, children: editorState && (_jsx(EditorComponent, { editorState: editorState, onEditorStateChange: handleEditorChange, wrapperClassName: "wrapperClass", editorClassName: `ff-heading-TextEditor-style ${analyticsClasses ? 'fontSm' : 'fontMd'}`, editorStyle: mode !== 'view' && (!editableTextEditor || isEditing)
+                        ? !focusState
+                            ? {
+                                border: '1px solid var(--text-editor-out-focus-border-color) ',
+                                borderRadius: '4px',
+                                padding: '0px 8px',
+                            }
+                            : {
+                                border: '1px solid var(--text-editor-in-focus-border-color)',
+                                borderRadius: '4px',
+                                padding: '0px 8px',
+                            }
+                        : { border: 'none' }, onFocus: handleFocus, onBlur: handleEditorBlur, readOnly: editableTextEditor ? !isEditing : readOnly, toolbarHidden: editableTextEditor ? !isEditing : toolbarHidden, toolbarClassName: "ff-toolbarClass", handlePastedText: () => false, toolbar: {
+                        options: Array.isArray(toolbarOptions) && toolbarOptions?.length > 0
+                            ? toolbarOptions
+                            : defaultToolBarOptions,
+                        fontFamily: {
+                            options: [
+                                'Arial',
+                                'Georgia',
+                                'Impact',
+                                'OpenSans-Regular',
+                                'Tahoma',
+                                'Times New Roman',
+                                'Verdana',
+                                'poppins',
+                            ],
+                        },
+                        link: {
+                            defaultTargetOption: '_blank',
+                            showOpenOptionOnHover: false,
+                        },
+                    } })) }), (required && errorMsg) || (helperText && error) ? (_jsx(Typography, { fontSize: 10, className: 'ff-textEditor-error-msg', as: "span", children: helperText })) : null] }));
+};
+export default TextEditor;
+//# sourceMappingURL=TextEditor.js.map

package/lib/components/ThemeProvider/ThemeProvider.js

@@ -1 +1,18 @@
-import{jsx as e}from"react/jsx-runtime";import{createContext as t,useState as r,useEffect as m}from"react";import"../../assets/Themes/Theme.scss.js";const s=t(void 0),o=({children:t,theme:o})=>{const[c,a]=r(o||"ff-light-theme");return m(()=>(document.body.className=c,()=>{document.body.className=""}),[c]),e(s.Provider,{value:{currentTheme:c,setCurrentTheme:a,applyTheme:e=>a(e)},children:t})};export{s as ThemeContext,o as default};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useState, useEffect } from 'react';
+import '../../assets/Themes/Theme.scss';
+const ThemeContext = createContext(undefined);
+const ThemeProvider = ({ children, theme }) => {
+    const [currentTheme, setCurrentTheme] = useState(theme || 'ff-light-theme');
+    const applyTheme = (newTheme) => setCurrentTheme(newTheme);
+    useEffect(() => {
+        document.body.className = currentTheme;
+        return () => {
+            document.body.className = '';
+        };
+    }, [currentTheme]);
+    return (_jsx(ThemeContext.Provider, { value: { currentTheme, setCurrentTheme, applyTheme }, children: children }));
+};
+export { ThemeContext };
+export default ThemeProvider;
+//# sourceMappingURL=ThemeProvider.js.map