frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/LXP/accordionTrack/accordionTrackStyle.js

@@ -0,0 +1,194 @@
+import styled from 'styled-components';
+
+const ContainerHeader = styled.div `
+  width: 100%;
+  min-height: 72px;
+  margin-top: 12px;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  padding-left: 27px;
+  padding-right: 8px;
+  background-color: ${(props) => `${props.active ? '#ffffff' : '#ebebeb'}`};
+  border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
+  border-radius: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 99px;
+`;
+const LoadingContent = styled.div `
+  background: linear-gradient(90deg, rgba(123, 129, 136, 0) 6.43%, rgba(123, 129, 136, 0.2) 22.38%), #d9d9d9;
+  color: transparent;
+  border-radius: 5px;
+  width: 90%;
+  height: 0.45em;
+  border: none;
+
+  -webkit-animation-duration: 4s;
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name: placeholderShimmer;
+  -webkit-animation-timing-function: linear;
+`;
+styled.div `
+  width: 100%;
+  min-height: 72px;
+  margin-top: 12px;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  padding-left: 27px;
+  padding-right: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 99px;
+`;
+const ContainerTrailsNormal = styled.div `
+  height: fit-content;
+  padding: 32px 24px;
+  border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
+  margin-top: -5px;
+  background-color: rgb(235, 235, 235);
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  z-index: 0;
+  width: 100%;
+`;
+const ContainerTrailsEmpty = styled.div `
+  height: fit-content;
+  padding: 32px 0px;
+  margin-top: -5px;
+  z-index: 0;
+  width: 100%;
+  div[visibility='hidden'] {
+    position: absolute;
+  }
+`;
+const ContentTrailName = styled.div `
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+`;
+const TypographyTrailName = styled.div `
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 23px;
+  color: ${({ theme }) => theme.colors.primary1};
+`;
+const Select = styled.div `
+  cursor: pointer;
+`;
+const ContentActiveHeader = styled.div `
+  display: flex;
+  flex-direction: row;
+  gap: 50px;
+`;
+const TypographyActiveHeader = styled.span `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-size: 16px;
+  line-height: 21px;
+  text-align: right;
+  color: ${({ theme }) => theme.colors.shadeBlack};
+  display: flex;
+  gap: 10px;
+`;
+const IconVerticalHeader = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`;
+styled.div `
+  width: 100%;
+  min-height: 415px;
+  display: flex;
+  justify-content: flex-start;
+  background-color: ${({ theme }) => theme.colors.neutralsGrey7};
+  border: 1px solid ${({ theme }) => theme.colors.borderPrimary};
+  border-radius: 0px 0px 8px 8px;
+  padding: 30px 0px 30px 0px;
+  filter: ${(props) => `grayscale(${props.active ? '0' : '1'})`};
+  margin-top: -5px;
+`;
+const ContainerCard = styled.div `
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  justify-items: center;
+  width: 100%;
+  height: fit-content;
+  gap: 20px;
+  /* padding-left: 24px;     */
+`;
+const ContainerInputNameTrail = styled.div `
+  display: inline-flex;
+  flex-direction: row;
+  gap: 18px;
+
+  input {
+    border: 1px solid #bdbdbd;
+    border-radius: 8px;
+    background: #ebebeb;
+    width: 220px;
+    height: 45px;
+    padding-left: 10px;
+  }
+`;
+const TypographyMyContents = styled.div `
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 20px;
+  color: ${({ theme }) => theme.colors.primary1};
+`;
+const TypographyMyTrails = styled.div `
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 20px;
+  color: ${({ theme }) => theme.colors.primary1};
+`;
+styled.div `
+  z-index: 999;
+  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 20px -15px #222222;
+  position: relative;
+  padding: 8px;
+  margin-bottom: 16px;
+`;
+styled.div `
+  width: 13.64px;
+  height: 13.64px;
+  position: absolute;
+  margin: 27px 0 -7px calc(50% - 7px);
+  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}
+`;
+
+export { ContainerCard, ContainerHeader, ContainerInputNameTrail, ContainerTrailsEmpty, ContainerTrailsNormal, ContentActiveHeader, ContentTrailName, IconVerticalHeader, LoadingContent, Select, TypographyActiveHeader, TypographyMyContents, TypographyMyTrails, TypographyTrailName };

package/dist/esm/src/components/LXP/accordionTrack/contentCourses.js

@@ -0,0 +1,8 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+
+function ContentCourses(data) {
+    return (jsx(Fragment, { children: data.children }));
+}
+
+export { ContentCourses as default };

package/dist/esm/src/components/LXP/accordionTrack/contentCoursesTrails.js

@@ -0,0 +1,189 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React__default, { useState, useEffect } from 'react';
+import '../../../shared/global.css.js';
+import VectorDown from './vectorDown.js';
+import VectorUp from './vectorUp.js';
+import { ContainerHeader, ContentTrailName, TypographyTrailName, Select, ContainerInputNameTrail, ContentActiveHeader, TypographyActiveHeader, IconVerticalHeader } from './accordionTrackStyle.js';
+import { MoreVertical, Trash } from '../../../shared/icons.js';
+import Button from '../../buttons/index.js';
+import Switch from 'react-switch';
+import PopOver, { PopOverItem } from '../popOver/index.js';
+import Loading from '../../DS/loading/index.js';
+import { makeStyles, Popper, Fade, Paper, ClickAwayListener, Box } from '@material-ui/core';
+
+const useStyles = makeStyles((theme) => {
+    const color = theme.palette.background.paper; // Feel free to customise this like they do in Tooltip
+    return {
+        popoverRoot: {
+            backgroundColor: color,
+            maxWidth: 200
+        },
+        content: {
+            padding: theme.spacing(2),
+            textAlign: 'center'
+        },
+        // Stolen from https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Tooltip/Tooltip.js and https://github.com/mui-org/material-ui/blob/4f2a07e140c954b478a6670c009c23a59ec3e2d4/docs/src/pages/components/popper/ScrollPlayground.js
+        popper: {
+            zIndex: 2000,
+            margin: 12,
+            '&[x-placement*="bottom"] $arrow': {
+                top: 0,
+                left: 0,
+                marginTop: '-0.71em',
+                marginLeft: 4,
+                marginRight: 4,
+                '&::before': {
+                    transformOrigin: '0 100%'
+                }
+            },
+            '&[x-placement*="top"] $arrow': {
+                bottom: 0,
+                left: 0,
+                marginBottom: '-0.71em',
+                marginLeft: 4,
+                marginRight: 4,
+                '&::before': {
+                    transformOrigin: '100% 0'
+                }
+            },
+            '&[x-placement*="right"] $arrow': {
+                left: 0,
+                marginLeft: '-0.71em',
+                height: '1em',
+                width: '0.71em',
+                marginTop: 4,
+                marginBottom: 4,
+                '&::before': {
+                    transformOrigin: '100% 100%'
+                }
+            },
+            '&[x-placement*="left"] $arrow': {
+                right: 0,
+                marginRight: '-0.71em',
+                height: '1em',
+                width: '0.71em',
+                marginTop: 4,
+                marginBottom: 4,
+                '&::before': {
+                    transformOrigin: '0 0'
+                }
+            }
+        },
+        // Stolen from https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Tooltip/Tooltip.js
+        arrow: {
+            overflow: 'hidden',
+            position: 'absolute',
+            width: '1em',
+            height: '0.71em' /* = width / sqrt(2) = (length of the hypotenuse) */,
+            boxSizing: 'border-box',
+            color,
+            '&::before': {
+                content: '""',
+                margin: 'auto',
+                display: 'block',
+                width: '100%',
+                height: '100%',
+                boxShadow: theme.shadows[2],
+                backgroundColor: 'currentColor',
+                transform: 'rotate(45deg)'
+            }
+        }
+    };
+});
+function ContentCoursesTrails(props) {
+    const [OpenPopper, setOpenPopper] = useState(false);
+    const [checked, setChecked] = useState(true);
+    useState(true);
+    const [show, setShow] = useState(true);
+    const [ElementPopover, setElementPopover] = useState(null);
+    const [ElementPopoverPublish, setElementPopoverPublish] = useState(null);
+    const [active, setActive] = useState(false);
+    const [nameTrail, setNameTrail] = useState(props.TrailName);
+    const [Publishing, setPublishing] = useState(props.publishStatus);
+    const [arrowRef, setArrowRef] = React__default.useState(null);
+    const classes = useStyles();
+    // const refContainer = useRef(null);
+    useEffect(() => {
+        setPublishing(props.publishStatus);
+        setOpenPopper(props.publishStatus === 'pending');
+    }, [props.publishStatus]);
+    useEffect(() => {
+        setNameTrail(props.TrailName);
+        console.log('props.TrailName', props.TrailName);
+    }, [props.TrailName]);
+    useEffect(() => {
+        if (props.publishStatus && props.publishStatus === 'processing') {
+            console.log(' . --- Startando Verificacao Publicacao', props.trailId);
+            setTimeout(() => {
+                checkStatusPublish();
+            }, 5000);
+        }
+    }, []);
+    const handleChange = (checkedValue) => {
+        setChecked(checkedValue);
+        props.handleChangeCheck(checkedValue);
+    };
+    const changeSelect = () => {
+        setShow(!show);
+    };
+    const checkStatusPublish = async () => {
+        let publicacao = await props.handlePublicarCheck(props.trailId);
+        console.log(props.trailId, 'publicacao', publicacao);
+        setPublishing(publicacao);
+        if (publicacao) {
+            if (publicacao === 'processing') {
+                setTimeout(() => {
+                    checkStatusPublish();
+                }, 5000);
+            }
+        }
+    };
+    return (jsxs(Fragment, { children: [jsxs(ContainerHeader, { className: 'opened', active: props.ativo, children: [jsx(ContentTrailName, { active: active, children: !active ? (jsxs(Fragment, { children: [jsx(TypographyTrailName, { children: nameTrail }), jsx(Select, { onClick: changeSelect, children: show === true ? jsx(VectorUp, {}) : jsx(VectorDown, {}) })] })) : (jsxs(ContainerInputNameTrail, { children: [jsx("input", { placeholder: props.txtPlacerolderInputNameTrail ? props.txtPlacerolderInputNameTrail : 'Digite o nome da trilha', value: nameTrail, onChange: (e) => {
+                                        setNameTrail(e.target.value);
+                                    }, onKeyPress: (event) => {
+                                        if (event.key === 'Enter') {
+                                            if (nameTrail) {
+                                                setActive(false);
+                                                props.handleChangeTrailName(nameTrail);
+                                            }
+                                        }
+                                    } }), jsx(Button, { handleClick: async () => {
+                                        setActive(false);
+                                    }, label: 'Cancelar', variant: "link" }), jsx(Button, { handleClick: async () => {
+                                        setActive(false);
+                                        props.handleChangeTrailName(nameTrail);
+                                    }, label: 'Salvar', variant: "primary" })] })) }), props.showButtonActive && (jsxs(ContentActiveHeader, { children: [!active && (jsx(Fragment, { children: jsxs(TypographyActiveHeader, { active: props.ativo, style: { fontWeight: props.ativo ? 700 : 400 }, children: [props.txtAtivarTrilha ? props.txtAtivarTrilha : 'Ativar trilha', jsx(Switch, { onChange: handleChange, checked: props.ativo, height: 16, width: 40, checkedIcon: false, uncheckedIcon: false, handleDiameter: 24, onHandleColor: "#ffffff", offHandleColor: "#ffffff", onColor: "#FF4D0D", offColor: "#757575", activeBoxShadow: props.ativo ? '0 0 2px 2px #FF4D0D' : '0 0 2px 2px #757575', boxShadow: props.ativo ? '0 0 2px 2px #FF4D0D' : '0 0 2px 2px #757575' })] }) })), jsxs(TypographyActiveHeader, { active: props.ativo, style: { fontWeight: props.ativo ? 700 : 400 }, children: [jsx(Button, { id: `btnPublish${props.id}`, handleMount: (element) => {
+                                            let el = document.getElementById(element);
+                                            setElementPopoverPublish(el ? el : null);
+                                        }, handleClick: async () => {
+                                            setPublishing('processing');
+                                            await props.handlePublicarTrilha(props);
+                                            checkStatusPublish();
+                                        }, startIcon: Publishing === 'processing' && (jsx(Loading, { sizeLoading: "small", loadColor: "#a5a5a5", style: { width: 40 } })), label: Publishing === 'pending' ? 'Publicar' : Publishing === 'complete' ? 'Publicado' : 'Publicando...', variant: "secondary", disabled: Publishing === 'pending' ? false : true }), jsx(Popper, { id: Publishing === 'pending' ? `btnPublishPopper${props.id}` : undefined, open: OpenPopper, anchorEl: ElementPopoverPublish ? ElementPopoverPublish : null, placement: 'top', className: classes.popper, transition: true, modifiers: {
+                                            preventOverflow: {
+                                                enabled: true,
+                                                boundariesElement: 'window'
+                                            },
+                                            arrow: {
+                                                enabled: true,
+                                                element: arrowRef
+                                            }
+                                        }, children: ({ TransitionProps }) => (jsx(Fade, { ...TransitionProps, timeout: 350, children: jsx(Paper, { children: jsx(ClickAwayListener, { onClickAway: () => {
+                                                        setOpenPopper(false);
+                                                    }, children: jsxs(Paper, { className: classes.popoverRoot, children: [jsx("span", { className: classes.arrow, ref: setArrowRef }), jsx(Box, { className: classes.content, children: "Ap\u00F3s realizar todas as altera\u00E7\u00F5es na trilha, \u00E9 necess\u00E1rio clicar em publicar para que o conte\u00FAdo editado esteja dispon\u00EDvel" })] }) }) }) })) }, props)] }), jsx(IconVerticalHeader, { onClick: (element) => {
+                                    setElementPopover(element.currentTarget);
+                                }, children: jsx("div", { style: { marginRight: 8 }, children: jsx(MoreVertical, { fill: props.ativo ? '#000000' : '#bdbdbd' }) }) })] })), jsx(Fragment, { children: jsx(PopOver, { element: ElementPopover, onClosePopover: () => {
+                                setElementPopover(null);
+                            }, variant: 'upRight', children: jsxs("div", { style: { display: 'flex', flexDirection: 'column', padding: 0 }, children: [jsx(PopOverItem, { label: props.txtTrailsPopOverEdit ? props.txtTrailsPopOverEdit : 'Editar trilha', onClick: () => {
+                                            props.handlePopOverTrailEdit(props.id);
+                                            // handleClickActiveNameTrail()
+                                            setElementPopover(null);
+                                        } }), jsx(PopOverItem, { label: props.txtTrailsPopOverDelete ? props.txtTrailsPopOverDelete : 'Excluir trilha', onClick: () => {
+                                            setElementPopover(null);
+                                            setTimeout(() => {
+                                                props.handlePopOverTrailDelete(props.id);
+                                            }, 500);
+                                        }, icon: jsx(Trash, { fill: "#C00F00" }), noBorder: true, isFontBold: true, color: '#C00F00' })] }) }) })] }), show && props.children] }));
+}
+
+export { ContentCoursesTrails as default };

package/dist/esm/src/components/LXP/accordionTrack/vectorDown.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+
+///-----------------------------------------
+/// Componente
+/**
+ *
+ * @componente
+ */
+function VectorDown(props) {
+    return (jsx("svg", { width: "18", height: "10", viewBox: "0 0 18 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M17 1L9 9L1 0.999999", stroke: "#FF4D0D", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+
+export { VectorDown as default };

package/dist/esm/src/components/LXP/accordionTrack/vectorUp.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+
+///-----------------------------------------
+/// Componente
+/**
+ *
+ * @componente
+ */
+function VectorUp(props) {
+    return (jsx("svg", { width: "18", height: "10", viewBox: "0 0 18 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1 9L9 1L17 9", stroke: "#FF4D0D", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+
+export { VectorUp as default };

package/dist/esm/src/components/LXP/avatarAssociatedChannel/avatarAssociatedChannelStyles.js

@@ -0,0 +1,83 @@
+import styled from 'styled-components';
+
+const ContainerGeral = styled.div `
+  width: 7rem;
+  display: flex;
+  align-content: flex-start;
+  top: 0;
+  flex-direction: column;
+  &:hover .cardInformation {
+    display: block;
+  }
+  &:hover .cardInformation {
+    display: block;
+  }
+`;
+const AvatarChannel = styled.div `
+  height: 80px;
+  width: 80px;
+  border-radius: 50%;
+  background-color: ${(props) => props.color || '#6a3f86'};
+  position: relative;
+  cursor: pointer;
+  margin: 1rem;
+
+  img {
+    border-radius: 50%;
+  }
+`;
+const Channel = styled.span `
+  height: 80px;
+  width: 80px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  letter-spacing: 0.01em;
+  font-size: 24px;
+  color: #ffffff;
+  font-family: 'Work Sans';
+  font-weight: 700;
+`;
+const CardInformation = styled.div `
+  width: 20rem;
+  background: #ffff;
+  font-size: 16px;
+  display: none;
+  margin-top: 0.5rem;
+  font-family: 'PT Sans';
+  font-weight: 400;
+  word-break: break-word;
+  box-shadow: 0px 25px 18px -20px rgba(34, 34, 34, 0.2);
+  border-radius: 4px;
+  list-style: none;
+  padding: 8px 0px;
+  h2 {
+    margin: 1rem 0.5rem 0.5rem 1rem;
+  }
+  h3 {
+    margin: 1rem;
+  }
+  @media (max-width: 320px) {
+    width: 18rem;
+  }
+`;
+const AvatarChannelImage = styled.div `
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background-image: ${(props) => `url(${props.image})`};
+  background-repeat: no-repeat;
+  background-size: 80px;
+  position: relative;
+  cursor: pointer;
+  margin: 1rem;
+
+  img {
+    border-radius: 50%;
+    width: 80px;
+    height: 80px;
+  }
+`;
+
+export { AvatarChannel, AvatarChannelImage, CardInformation, Channel, ContainerGeral };

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

@@ -0,0 +1,11 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { ContainerGeral, AvatarChannelImage, AvatarChannel, Channel, CardInformation } from './avatarAssociatedChannelStyles.js';
+
+function AvatarAssociatedChannel({ descriptionChannel, nameChannel, channel, color, sourceImage, image }) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx(ContainerGeral, { children: jsxs(Fragment, { children: [image ? (jsx(AvatarChannelImage, { image: image, children: jsx("img", { src: sourceImage }) })) : (jsx(AvatarChannel, { color: color ? color : '#6a3f86', children: jsx(Channel, { children: channel }) })), jsxs(CardInformation, { className: "cardInformation", children: [image ? (jsx(AvatarChannelImage, { image: image, children: jsx("img", { src: sourceImage }) })) : (jsx(AvatarChannel, { color: color ? color : '#6a3f86', children: jsx(Channel, { children: channel }) })), jsxs("div", { children: [jsx("h2", { children: nameChannel }), jsx("h3", { children: descriptionChannel })] })] })] }) }) }));
+}
+
+export { AvatarAssociatedChannel as default };

package/dist/esm/src/components/LXP/avatarChannel/avatarChannelStyles.js

@@ -0,0 +1,106 @@
+import styled, { css } from 'styled-components';
+
+const ContainerGeral = styled.div `
+  display: flex;
+  height: 8.5rem;
+  align-content: flex-end;
+  &:hover .popOver {
+    display: ${(p) => p.isEdit && 'block'};
+  }
+  &:hover .hide {
+    visibility: ${(p) => p.isEdit && 'visible'};
+  }
+`;
+const AvatarChannel = styled.div `
+  width: ${(props) => props.size || '80px'};
+  height: ${(props) => props.size || '80px'};
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background: ${(props) => (props.image ? `url(${props.image})` : '#6a3f86')};
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+  margin-top: ${(p) => p.isEdit && '62px'};
+  cursor: ${(p) => (p.isEdit || p.isLink ? 'pointer' : 'text')};
+  ${(props) => props.variant === 'sideRight' &&
+    css `
+      margin-left: 8.5rem;
+    `}
+
+  img {
+    border-radius: 50%;
+  }
+
+  ${({ disabled }) => disabled === true &&
+    `
+        filter: grayscale(100%);
+    `}
+`;
+const Channel = styled.span `
+  display: flex;
+  align-items: center;
+  text-align: center;
+  letter-spacing: 0.01em;
+  top: 25px;
+  left: 22.4px;
+  font-size: 24px;
+  color: #ffffff;
+  font-family: 'Work Sans';
+  font-weight: 700;
+  line-height: 130%;
+  text-transform: uppercase;
+`;
+const AvatarCircle = styled.div `
+  display: flex;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  justify-content: center;
+  align-items: center;
+  visibility: hidden;
+`;
+const AvatarCam = styled.div `
+  width: 40px;
+  height: 40px;
+  border-radius: 50px;
+  margin: 0;
+  background-color: ${({ theme }) => theme.colors.shadeWhite};
+  box-shadow: 0px 18px 40px -15px #d3d3d3;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+`;
+const ContainerPopOver = styled.div `
+  white-space: nowrap;
+  font-size: 16px;
+  display: none;
+  width: 120px;
+  position: absolute;
+  margin-top: 0;
+  font-family: 'PT Sans';
+  font-weight: 400;
+  ${(props) => (props.variant === 'upLeft' || props.variant === 'upRight') &&
+    css `
+      margin-top: 7rem;
+    `}
+
+  ${(props) => props.variant === 'sideLeft' &&
+    css `
+      margin-top: 1rem;
+      margin-left: 6rem;
+    `}
+
+    ${(props) => props.variant === 'sideRight' &&
+    css `
+      margin-top: 1rem;
+    `}
+`;
+styled.div `
+  margin-top: 60px;
+`;
+
+export { AvatarCam, AvatarChannel, AvatarCircle, Channel, ContainerGeral, ContainerPopOver };

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

@@ -0,0 +1,32 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { ContainerGeral, ContainerPopOver, AvatarChannel as AvatarChannel$1, Channel, AvatarCircle, AvatarCam } from './avatarChannelStyles.js';
+import { Cam } from '../../../shared/icons.js';
+import { useState } from 'react';
+import PopOverLXP from '../popOverLXP-antigo/index.js';
+
+function AvatarChannel({ size, channel, className, disabled, color, handleValueAvatar, variantPopOver, sourceImage, isLink = false, isEdit = false }) {
+    const onChange = () => {
+        document.getElementById('fileSelector').click();
+    };
+    const handleFileSelected = (file) => {
+        const reader = new FileReader();
+        reader.onload = function (e) {
+            setImage(e.target.result);
+        };
+        reader.readAsDataURL(file);
+        handleValueAvatar(file);
+        return file;
+    };
+    const nameChannel = channel
+        .split(' ')
+        .filter((name, i) => i == 0 || i == channel.split(' ').length - 1)
+        .map((name, i) => name[0])
+        .join('');
+    const [image, setImage] = useState(sourceImage);
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx(ContainerGeral, { className: "geral", isEdit: isEdit, variant: variantPopOver, children: jsxs(Fragment, { children: [jsx(ContainerPopOver, { className: "popOver", variant: variantPopOver, children: jsx(PopOverLXP, { children: 'Alterar avatar', variant: variantPopOver, element: undefined }) }), jsx("div", { style: { display: 'none' }, children: isEdit && (jsx("input", { type: "file", id: "fileSelector", accept: ".jpg, .jpeg, .png", onChange: (e) => handleFileSelected(e.target.files[0]) })) }), jsxs(AvatarChannel$1, { size: size, onClick: onChange, className: className, disabled: disabled, variant: variantPopOver, color: color ? color : '#6a3f86', image: image, isEdit: isEdit, isLink: isLink, children: [!image && jsx(Channel, { size: size, children: nameChannel }), isEdit && (jsx(AvatarCircle, { className: "hide", children: jsx(AvatarCam, { children: jsx(Cam, {}) }) }))] })] }) }) }));
+}
+
+export { AvatarChannel as default };