frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/LXP/popOverLXP-antigo/popOverLXPStyles.js

@@ -0,0 +1,123 @@
+import styled from 'styled-components';
+
+const RectangleUpLeft = styled.div `
+    width: 13.64px;
+    height: 13.64px;
+    position: absolute;
+    margin: -7px 0 32px 27px;
+    left: 0;
+    top: 0;
+    box-sizing: border-box;
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
+    border-bottom: none;
+    border-left: none;
+    border-right: none;
+    transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);
+    ${({ variant }) => (variant)}
+`;
+const RectangleUpRight = styled.div `
+    width: 13.64px;
+    height: 13.64px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: -7px 32px 0 27px;
+    box-sizing: border-box;
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
+    border-bottom: none;
+    border-left: none;
+    border-right: none;
+    transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);    
+    
+    ${({ variant }) => (variant)}
+`;
+const RectangleLowRight = styled.div `
+    width: 13.64px;
+    height: 13.64px;
+    position: absolute;
+    margin: 27px 32px -7px 0px;
+    right: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
+    border-left: none;   
+    border-top: none;
+    transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);
+    
+    ${({ variant }) => (variant)}
+`;
+const RectangleLowLeft = styled.div `
+    width: 13.64px;
+    height: 13.64px;
+    position: absolute;
+    margin: 27px 0 -7px 32px;
+    left: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
+    border-left: none;   
+    border-top: none;
+    transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);
+    
+    ${({ variant }) => (variant)}
+`;
+const RectangleLeft = styled.div `
+    width: 13.64px;
+    height: 13.64px;
+    position: absolute;
+    margin: 39px 0px 32px -7px;
+    left: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
+    border-right: none;
+    border-bottom: none;
+    transform: matrix(0.91, -0.51, 0.91, 0.61, 0, 0);    
+    
+    ${({ variant }) => (variant)}
+`;
+const RectangleRight = styled.div `
+    width: 13.64px;
+    height: 13.64px;
+    position: absolute;
+    margin: 39px -7px 13px 0;
+    right: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
+    border-left: none;   
+    border-top: none;
+    transform: matrix(0.91, -0.51, 0.91, 0.61, 0, 0);    
+    
+    ${({ variant }) => (variant)}
+`;
+const PopOver = styled.div `
+    width: 100%;
+    min-height: 31px;
+    border-radius: 8px;
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    box-shadow: 0px 18px 40px -15px #d3d3d3;
+    position: relative;
+    margin: 0% 0% 0% 0%;
+    padding: 8px;
+`;
+const PopOverLeftRight = styled.div `
+    width: 100%;
+    min-height: 67px;
+    border-radius: 8px;
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    box-shadow: 0px 18px 40px -15px #d3d3d3;
+    position: relative;
+    margin: 0% 0% 0% 0%;
+    padding: 8px;    
+`;
+
+export { PopOver, PopOverLeftRight, RectangleLeft, RectangleLowLeft, RectangleLowRight, RectangleRight, RectangleUpLeft, RectangleUpRight };

package/dist/esm/src/components/LXP/progressBar/index.js

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { ProgressContainer, ValueAndProgress, BorderLinearProgress } from './progressStyle.js';
+
+function ProgressBar({ value, label, style, bgColor, trackColor, colorText }) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(ProgressContainer, { style: style, children: [jsx("span", { children: label }), jsxs(ValueAndProgress, { "$colorText": colorText, children: [jsx(BorderLinearProgress, { "$trackColor": trackColor, "$bgColor": bgColor, variant: "determinate", value: value }), " \u00A0", value + '%'] })] }) }));
+}
+
+export { ProgressBar as default };

package/dist/esm/src/components/LXP/progressBar/progressStyle.js

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+import LinearProgress from '@material-ui/core/LinearProgress';
+
+const ProgressContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+  span {
+    margin-bottom: 0.3rem;
+  }
+`;
+const ValueAndProgress = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-family: 'PT Sans';
+  color: ${({ $colorText }) => $colorText || '#ffffff'};
+  font-weight: 400;
+`;
+const BorderLinearProgress = styled(LinearProgress) `
+  width: 100%;
+  height: 8px !important;
+  border-radius: 8px;
+  background: ${({ $trackColor }) => $trackColor || 'rgba(255, 77, 13, 0.3)'} !important;
+
+
+  .MuiLinearProgress-bar {
+    background: ${({ $bgColor }) => $bgColor || '#ff4d0d'} !important;
+  }
+`;
+
+export { BorderLinearProgress, ProgressContainer, ValueAndProgress };

package/dist/esm/src/components/LXP/searchResults/index.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { Container, Image, TextContainer, Title, Description, skillSets, skillTag } from './searchResultsStyles.js';
+
+function SearchResults({ src, title, description, textSkills, skills, style, onClick }) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(Container, { onClick: onClick, style: { ...style }, children: [jsx(Image, { style: { backgroundImage: `url(${src})` } }), jsxs(TextContainer, { children: [jsxs(Title, { children: [" ", title, " "] }), jsxs(Description, { children: [" ", description, " "] }), skills ?
+                            jsxs(skillSets, { children: [textSkills, ":", skills.map((item, index) => {
+                                        return (jsx(skillTag, { children: item }, index));
+                                    })] })
+                            : null] })] }) }));
+}
+
+export { SearchResults as default };

package/dist/esm/src/components/LXP/searchResults/searchResultsStyles.js

@@ -0,0 +1,63 @@
+import styled from 'styled-components';
+
+const Container = styled.div `
+  display: grid;
+  grid-template-columns: 0.11fr 1fr;
+  height: 120px;
+  position: relative;
+  gap: 16px;
+  cursor: pointer;
+  box-sizing: border-box;
+`;
+const TextContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  position: relative;
+`;
+const Image = styled.div `
+  border-radius: 8px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+`;
+const Title = styled.p `
+  
+  margin-bottom: 12px;
+  color: ${({ theme }) => theme.colors.linkOnfocus};
+  font-size: 16px;
+  font-weight: 700;
+`;
+const Description = styled.p `
+  
+  font-weight: 400;
+  font-size: 16px;
+  color: ${({ theme }) => theme.colors.neutralsGrey3};
+  display: -webkit-box;
+  -webkit-line-clamp: 4; /** número de linhas que você quer exibir */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
+const skillSets = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 8px;
+  box-sizing: border-box;
+  position: absolute;
+  bottom: -20px;
+  
+  font-family: 'PT Sans';
+  font-weight: 400;
+  font-size: 12px;
+  color: ${({ theme }) => theme.colors.neutralsGrey3};
+`;
+const skillTag = styled.div `
+  display: flex;
+  border-radius: 4px;
+  color: ${({ theme }) => theme.colors.shadeWhite};
+  background-color: ${({ theme }) => theme.colors.secondary1};
+  padding: 2px 4px;
+`;
+
+export { Container, Description, Image, TextContainer, Title, skillSets, skillTag };

package/dist/esm/src/components/LXP/selectLXP/SelectLXP.js

@@ -0,0 +1,128 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { SelectLXPContext } from './SelectLXPContext.js';
+
+const DropDownContainer = styled("div") `
+    width: 100%;
+    height: 48px;
+    background: #FFFFFF;
+    border: 1px solid #E8E8E8;
+    border-radius: 4px;
+    position: relative;
+`;
+const EventOverlay = styled.div `
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: transparent;
+    cursor: pointer;
+    z-index: 2;
+`;
+const DropDownHeader = styled("div") `
+  font-weight: 500;
+  font-size: 1.3rem;
+  color: #3faffa;
+  background: #ffffff;
+  cursor: pointer;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding-left: 16px;
+  border-radius: 4px;
+
+  p {
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+    color: #A6A6A6;
+  }
+`;
+const DropDownListContainer = styled("div") ``;
+const DropDownList = styled("ul") `
+  padding: 0;
+  margin: 0;
+  background: #ffffff;
+  border: 2px solid #e5e5e5;
+  box-sizing: border-box;
+  color: #3faffa;
+  font-size: 1.3rem;
+  font-weight: 500;
+  position: absolute;
+  width: 100%;
+  z-index: 5;
+
+  &:first-child {
+    padding-top: 0.8em;
+  }
+
+`;
+const DropDownHeaderIcon = styled('div') `
+  position: absolute;
+  right: 16.48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.1s ease-in-out;
+
+  ${({ $open }) => $open === true && css `
+    transform: rotate(180deg);
+  `}
+`;
+const SelectedOption = styled('p') `
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 19px;
+  color: #222222 !important;
+`;
+function ArrowIcon() {
+    return (jsx("svg", { width: "14", height: "7", viewBox: "0 0 14 7", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M7.1736 6.64904L13.521 0.992188H0.826172L7.1736 6.64904Z", fill: "#222222" }) }));
+}
+function SelectLXP({ placeholder, defaultValue, children, onChange, loading }) {
+    const wrapperRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedOption, setSelectedOption] = useState(null);
+    const [selectedOptionValue, setSelectedOptionValue] = useState();
+    useEffect(() => {
+        function handleClickOutside(event) {
+            // @ts-ignore
+            if (wrapperRef.current && !wrapperRef.current.contains(event.target) && isOpen)
+                setIsOpen(false);
+        }
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [wrapperRef, isOpen]);
+    useEffect(() => {
+        let param = false;
+        children && children.length && children.forEach((child) => {
+            if (child.props.value == defaultValue) {
+                param = true;
+                setSelectedOption(child.props.label);
+                setSelectedOptionValue(child.props.value);
+            }
+        });
+        if (!param) {
+            setSelectedOption(null);
+            setSelectedOptionValue(false);
+        }
+    }, [children, defaultValue]);
+    const toggle = () => setIsOpen(!isOpen);
+    const handleChange = (e) => {
+        onChange(e);
+        toggle();
+    };
+    return (jsx("div", { children: jsxs(DropDownContainer, { ref: wrapperRef, children: [jsx(EventOverlay, { onClick: toggle }), jsxs(DropDownHeader, { children: [loading ?
+                            jsx("p", { children: "Carregando dados..." })
+                            :
+                                selectedOption ? jsx(SelectedOption, { children: selectedOption }) : jsx("p", { children: placeholder }), jsx(DropDownHeaderIcon, { "$open": isOpen, children: jsx(ArrowIcon, {}) })] }), isOpen && (jsx(DropDownListContainer, { children: jsx(DropDownList, { children: jsx("div", { onClick: handleChange, children: jsx(SelectLXPContext.Provider, { value: { selected: selectedOptionValue }, children: children }) }) }) }))] }) }));
+}
+
+export { ArrowIcon, SelectLXP as default };

package/dist/esm/src/components/LXP/selectLXP/SelectLXPContext.js

@@ -0,0 +1,6 @@
+import React__default from 'react';
+
+// Create react context to share data between components
+const SelectLXPContext = React__default.createContext(null);
+
+export { SelectLXPContext };

package/dist/esm/src/components/LXP/selectLXP/SelectLXPItem.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import styled, { css } from 'styled-components';
+import { SelectLXPContext } from './SelectLXPContext.js';
+
+const ListItem = styled("li") `
+    list-style: none;
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+    color: #000;
+    height: 38px;
+    margin: 0;
+    padding-left: 16px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    ${props => props.$disabled === true && css `
+        cursor: not-allowed;
+        background-color: #e5e5e5;
+        opacity: 0.3;
+    `}
+
+    ${props => props.$selected === true && css `
+        background-color: #e5e5e5;
+        cursor: pointer;
+        opacity: 1;
+    `}
+
+    &:hover {
+        background-color: #e5e5e5;
+    }
+`;
+function SelectLXPItem({ value, label, selected, handleSelect, disabled }) {
+    return (jsx(SelectLXPContext.Consumer, { children: ({ selected }) => (jsx(ListItem, { "$disabled": disabled, "$selected": selected === value, value: value, onClick: handleSelect, children: label })) }));
+}
+
+export { SelectLXPItem as default };

package/dist/esm/src/components/LXP/selectLXP/index.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import SelectLXP$1 from './SelectLXP.js';
+import SelectLXPItem from './SelectLXPItem.js';
+
+function SelectLXP({ placeholder, valueSelect, handleValueSelect, listItems }) {
+    return (jsx(SelectLXP$1, { placeholder: placeholder, defaultValue: valueSelect, onChange: (e) => handleValueSelect(e.target?.attributes?.value?.value), children: listItems.map((item, index) => (jsx(SelectLXPItem, { label: item.label, value: item.id }, index))) }));
+}
+
+export { SelectLXP as default };

package/dist/esm/src/components/LXP/star-metric/index.js

@@ -0,0 +1,13 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import Rating from '@mui/material/Rating';
+import Typography from '@mui/material/Typography';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { WrapperCard } from './starMetricStyles.js';
+
+function StarMetric({ disabled, onChange }) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx(WrapperCard, { children: jsxs(Box, { children: [jsx(Typography, { component: "legend" }), jsx(Rating, { disabled: disabled ? disabled : false, onChange: (e) => { onChange(); } })] }) }) }));
+}
+
+export { StarMetric as default };

package/dist/esm/src/components/LXP/star-metric/starMetricStyles.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const WrapperCard = styled.div `
+    width: 244px;
+    min-height: 31px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    
+`;
+
+export { WrapperCard };

package/dist/esm/src/components/LXP/thumbnails/headerVectorElipses.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import VectorEllipse from './vectorEllipse.js';
+
+const HeaderVectorElipses = ({ provided, direction }) => {
+    return (jsx("div", { ref: provided ? provided.innerRef : null, ...(provided ? provided.dragHandleProps : null), style: { display: 'flex', width: 'fit-content', height: 'fit-content', flexDirection: direction === 'column' ? 'row' : 'column' }, children: [1, 2, 3].map((thumb) => {
+            const arr = new Array(10).fill('');
+            return (jsx("div", { style: { width: 'fit-content', display: 'flex', justifyContent: 'center', cursor: 'pointer', flexDirection: direction === 'column' ? 'column' : 'row' }, children: arr.map((i, k) => {
+                    return jsx(VectorEllipse, {}, k);
+                }) }, thumb));
+        }) }));
+};
+
+export { HeaderVectorElipses as default };

package/dist/esm/src/components/LXP/thumbnails/loadingThumbnails.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CardDragAndDrop, LoadingContainer } from './thumbnailsStyle.js';
+import HeaderVectorElipses from './headerVectorElipses.js';
+
+const LoadingThumbnails = ({ provided }) => {
+    return (jsxs(CardDragAndDrop, { className: "loading", children: [jsx(HeaderVectorElipses, { provided: provided, direction: 'row' }), jsx(LoadingContainer, { className: "loading_img" }), jsx(LoadingContainer, { className: "loading_text" }), jsx(LoadingContainer, { className: "loading_text loading_button" })] }));
+};
+
+export { LoadingThumbnails };

package/dist/esm/src/components/LXP/thumbnails/thumbnails.js

@@ -0,0 +1,119 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import Loading from '../../DS/loading/index.js';
+import { styled } from '@mui/material/styles';
+import { useState, useEffect } from 'react';
+import { ThemeProvider } from 'styled-components';
+import '../../../shared/global.css.js';
+import { MoreVertical, Trash } from '../../../shared/icons.js';
+import { FRSTTheme } from '../../../theme/index.js';
+import Button from '../../buttons/index.js';
+import HeaderVectorElipses from './headerVectorElipses.js';
+import { LoadingThumbnails } from './loadingThumbnails.js';
+import { CardDragAndDrop, ContainerMain, Typography, IconVertical, ContainerEllipse, TypographyAdd } from './thumbnailsStyle.js';
+import VectorCross from './vectorCross.js';
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
+import PopOver, { PopOverItem } from '../popOver/index.js';
+
+function Thumbnails({ variant, src, showSwitch, handleClickCourse, handleClickNew, handleSwitchAtivar, handleClickPopOverDelete, handleClickPopOverEdit, handleClickPopOverEditActivity, handleClickPopOverMoveToTrail, handleClickPopOverDeleteTrail, handlePublicarCourse, handlePublicarContentCheck, publishContentStatus, title, provided, isDisabled, isLoading, txtButtonLabel, txtCriarNovoCurso, txtCriarNovoCurso2, txtAtivarCurso, txtPopOverDeleteContent, txtPopOverMoveToTrails, txtPopOverEditContent, isActive, isTrail, txtPopOverDeleteTrail, txtPopOverEditContentActivity, txtHideContent, txtShowContent, activeMenuModule = true, activePublishButton = true }) {
+    const defaultImg = 'https://i.gyazo.com/35d9c18bbdc6a48d843b0aa24ab2499e.png';
+    const [ativo, setAtivo] = useState(isDisabled);
+    const [showModules, setShowModules] = useState(false);
+    const [ElementPopover, setElementPopover] = useState(null);
+    const [Loading$1, setLoading] = useState(isLoading);
+    const optionShowContent = txtShowContent ? txtShowContent : 'Desocultar módulo';
+    const optionHideContent = txtHideContent ? txtHideContent : 'Ocultar módulo';
+    const [textShowOrHiddenContent, settextShowOrHiddenContent] = useState(ativo ? optionHideContent : optionShowContent);
+    const [Publishing, setPublishing] = useState(publishContentStatus);
+    useEffect(() => {
+        setAtivo(isDisabled);
+    }, [isDisabled]);
+    useEffect(() => {
+        settextShowOrHiddenContent(ativo ? optionHideContent : optionShowContent);
+    }, [ativo]);
+    useEffect(() => {
+        setLoading(isLoading);
+    }, [isLoading]);
+    //ATIVAR E DESATIVAR CONTEUDO
+    const handleChangeCheck = (checkedValue) => {
+        setAtivo(checkedValue);
+        handleSwitchAtivar(checkedValue);
+    };
+    const checkStatusPublish = async () => {
+        let publicacao = await handlePublicarContentCheck();
+        console.log('publicacao', publicacao);
+        setPublishing(publicacao);
+        if (publicacao) {
+            if (publicacao === 'processing') {
+                setTimeout(() => {
+                    checkStatusPublish();
+                }, 5000);
+            }
+        }
+    };
+    const handleHoverImage = () => {
+        if (!showModules) {
+            setShowModules(true);
+        }
+    };
+    const LightTooltip = styled(({ className, ...props }) => (jsx(Tooltip, { ...props, classes: { popper: className } })))(({ theme }) => ({
+        [`& .${tooltipClasses.tooltip}`]: {
+            backgroundColor: theme.palette.common.white,
+            color: 'rgba(0, 0, 0, 0.87)',
+            boxShadow: theme.shadows[1],
+            fontSize: 11
+        }
+    }));
+    return (jsx(Fragment, { children: jsxs(ThemeProvider, { theme: FRSTTheme, children: [variant === 'default' ? (jsx(Fragment, { children: Loading$1 ? (jsx(LoadingThumbnails, { provided: provided })) : (jsxs(CardDragAndDrop, { active: ativo, className: (variant = 'default'), ref: provided ? provided.innerRef : null, ...(provided ? provided.draggableProps : null), children: [jsx(HeaderVectorElipses, { provided: provided, direction: 'row' }), jsx("img", { className: "thumbnails_img", ref: provided ? provided.innerRef : null, ...(provided ? provided.dragHandleProps : null), onMouseEnter: handleHoverImage, 
+                                // className="imageHover"
+                                src: src || defaultImg }), jsxs(ContainerMain, { children: [jsx(LightTooltip, { title: title, children: jsx(Typography, { style: { color: ativo ? '#000000' : '#bdbdbd', textAlign: 'start' }, children: title && title?.length > 17 ? `${title.substring(0, 17)}...` : title }) }), jsx(IconVertical, { onClick: (element) => {
+                                            setElementPopover(element.currentTarget);
+                                        }, children: activeMenuModule && jsx(MoreVertical, { fill: ativo ? '#000000' : '#bdbdbd' }) })] }), activePublishButton &&
+                                jsx(Button
+                                // label={txtButtonLabel ? txtButtonLabel : 'Publicar'}
+                                , { 
+                                    // label={txtButtonLabel ? txtButtonLabel : 'Publicar'}
+                                    variant: "expandedSecondary", style: { height: '32px' }, handleClick: async () => {
+                                        setPublishing('processing');
+                                        await handlePublicarCourse();
+                                        checkStatusPublish();
+                                    }, startIcon: Publishing === 'processing' && (jsx(Loading, { sizeLoading: "small", loadColor: "#a5a5a5", style: { width: 40 } })), label: Publishing === 'pending' ? 'Publicar' : Publishing === 'complete' ? 'Publicado' : 'Publicando...', disabled: Publishing === 'pending' ? false : true })] })) })) : variant === 'add' ? (jsx(Fragment, { children: Loading$1 ? (jsx(LoadingThumbnails, { provided: provided })) : (jsxs(CardDragAndDrop, { className: "add", children: [jsx(ContainerEllipse, { onClick: handleClickNew, children: jsx(VectorCross, {}) }), jsx(TypographyAdd, { children: txtCriarNovoCurso ? txtCriarNovoCurso : 'Criar novo conteúdo' })] })) })) : null, jsx(PopOver, { element: ElementPopover, onClosePopover: () => {
+                        setElementPopover(null);
+                    }, variant: 'upRight', children: jsxs("div", { style: { display: 'flex', flexDirection: 'column', padding: 0 }, children: [jsx(PopOverItem, { label: txtPopOverEditContent ? txtPopOverEditContent : 'Editar módulo', onClick: () => {
+                                    setElementPopover(null);
+                                    handleClickPopOverEdit();
+                                }, style: {
+                                    borderBottom: '1px black solid'
+                                } }), jsx(PopOverItem, { label: txtPopOverEditContentActivity ? txtPopOverEditContentActivity : 'Editar conteúdo', onClick: () => {
+                                    setElementPopover(null);
+                                    handleClickPopOverEditActivity();
+                                }, style: {
+                                    borderBottom: '1px black solid'
+                                } }), jsx(PopOverItem, { label: textShowOrHiddenContent, onClick: () => {
+                                    setElementPopover(null);
+                                    handleChangeCheck(!ativo);
+                                }, style: {
+                                    borderBottom: '1px black solid'
+                                } }), isTrail ? (jsx(Fragment, { children: jsx(PopOverItem, { label: txtPopOverDeleteTrail ? txtPopOverDeleteTrail : 'Excluir da trilha', onClick: () => {
+                                        setElementPopover(null);
+                                        /// timeout para corrigir o bug de scroll na tela
+                                        setTimeout(() => {
+                                            handleClickPopOverDelete();
+                                        }, 500);
+                                    }, isFontBold: true, noBorder: true, color: '#C00F00', icon: jsx(Trash, { fill: "#C00F00" }), style: {
+                                        borderBottom: '1px black solid',
+                                        width: 100
+                                    } }) })) : (jsxs(Fragment, { children: [jsx(PopOverItem, { label: txtPopOverMoveToTrails ? txtPopOverMoveToTrails : 'Mover para tilha', onClick: () => {
+                                            setElementPopover(null);
+                                            handleClickPopOverMoveToTrail();
+                                        }, style: {
+                                            borderBottom: '1px black solid'
+                                        } }), jsx(PopOverItem, { label: txtPopOverDeleteContent ? txtPopOverDeleteContent : 'Excluir módulo', onClick: () => {
+                                            setElementPopover(null);
+                                            /// timeout para corrigir o bug de scroll na tela
+                                            setTimeout(() => {
+                                                handleClickPopOverDelete();
+                                            }, 500);
+                                        }, icon: jsx(Trash, { fill: "#C00F00" }), noBorder: true, isFontBold: true, color: '#C00F00' })] }))] }) })] }) }));
+}
+
+export { Thumbnails as default };

package/dist/esm/src/components/LXP/thumbnails/thumbnailsDraggable.js

@@ -0,0 +1,13 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import Thumbnails from './thumbnails.js';
+import { Draggable } from '@hello-pangea/dnd';
+
+// import { Draggable } from 'react-beautiful-dnd'
+function ThumbnailsDraggable({ variant, src, handleClickCourse, handleClickNew, handleClickContent, handleSwitchAtivar, title, id, index, isDisabled, isLoading, txtButtonLabel, txtAtivarCurso, showSwitch, txtCriarNovoCurso, txtCriarNovoCurso2, handleClickPopOverDelete, handleClickPopOverEdit, handleClickPopOverEditActivity, handleClickPopOverMove, handleClickPopOverMoveToTrail, handlePublicarCourse, handlePublicarContentCheck, publishContentStatus, txtPopOverDeleteContent, txtPopOverEditContent, isActive, isTrail, txtPopOverMoveToTrails, txtPopOverDeleteTrail, txtPopOverEditContentActivity, activeMenuModule, activePublishButton }) {
+    return (jsx(Fragment, { children: jsx(Draggable, { index: parseInt(index), draggableId: id, children: (provided) => {
+                return (jsx(Thumbnails, { src: src, isDisabled: isDisabled, handleClickCourse: handleClickCourse, handleSwitchAtivar: handleSwitchAtivar, handleClickNew: handleClickNew, handleClickContent: handleClickContent, variant: variant, title: title, id: id, isActive: isActive, isLoading: isLoading, showSwitch: showSwitch, index: index, isTrail: isTrail, provided: provided, txtButtonLabel: txtButtonLabel, txtAtivarCurso: txtAtivarCurso, txtCriarNovoCurso: txtCriarNovoCurso, txtCriarNovoCurso2: txtCriarNovoCurso2, handleClickPopOverEditActivity: handleClickPopOverEditActivity, handleClickPopOverDelete: handleClickPopOverDelete, handleClickPopOverEdit: handleClickPopOverEdit, handleClickPopOverMove: handleClickPopOverMove, txtPopOverDeleteContent: txtPopOverDeleteContent, txtPopOverEditContent: txtPopOverEditContent, txtPopOverMoveToTrails: txtPopOverMoveToTrails, txtPopOverDeleteTrail: txtPopOverDeleteTrail, txtPopOverEditContentActivity: txtPopOverEditContentActivity, handleClickPopOverMoveToTrail: handleClickPopOverMoveToTrail, handlePublicarContentCheck: handlePublicarContentCheck, publishContentStatus: publishContentStatus, handlePublicarCourse: handlePublicarCourse, activeMenuModule: activeMenuModule, activePublishButton: activePublishButton }));
+            } }, id) }));
+}
+
+export { ThumbnailsDraggable as default };