@m4l/components 0.1.40 → 0.1.41

package/src/components/Image/subcomponents/ScrollIntersectComponent/index.tsx

@@ -1,140 +0,0 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { isIntersectionObserverAvailable } from '../../utils/isIntersectionObserverAvailable';
-import { IntersectComponentProps, IntersectComponentRef, ScrollPosition } from '../../types';
-
-const checkIntersections = (entries: IntersectionObserverEntry[]) => {
-    entries.forEach(entry => {
-        if (entry.isIntersecting) {
-            (entry.target as any)?.setIsVisible(true);
-        }
-    });
-};
-
-const LAZY_LOAD_OBSERVERS: Record<number, IntersectionObserver> = {};
-
-const getObserver = (threshold: number) => {
-    LAZY_LOAD_OBSERVERS[threshold] =
-        LAZY_LOAD_OBSERVERS[threshold] ||
-        new IntersectionObserver(checkIntersections, {
-            rootMargin: threshold + 'px',
-        });
-
-    return LAZY_LOAD_OBSERVERS[threshold];
-};
-
-export const ScrollIntersectComponent = forwardRef<HTMLSpanElement, IntersectComponentProps>(
-    (props, ref) => {
-        const { height, width, setIsVisible, threshold, useIntersectionObserver, scrollPosition } =
-            props;
-        const [supportsObserver] = useState<boolean>(
-            !scrollPosition && useIntersectionObserver && isIntersectionObserverAvailable(),
-        );
-        const [observer] = useState<IntersectionObserver | undefined>(
-            supportsObserver ? getObserver(threshold) : undefined,
-        );
-
-        const intersectComponentRef = useRef<IntersectComponentRef>(null);
-
-        useImperativeHandle(ref, () => intersectComponentRef.current as HTMLSpanElement);
-
-        useEffect(() => {
-            if (observer && intersectComponentRef.current) {
-                intersectComponentRef.current.setIsVisible = setIsVisible;
-                observer.observe(intersectComponentRef.current);
-            }
-
-            return () => {
-                if (observer && intersectComponentRef.current) {
-                    observer.unobserve(intersectComponentRef.current);
-                }
-            };
-        }, []);
-
-        useEffect(() => {
-            if (!supportsObserver) {
-                updateVisibility();
-            }
-        }, [scrollPosition]);
-
-        const getPlaceholderBoundingBox = (sPos: ScrollPosition) => {
-            if (intersectComponentRef.current) {
-                const boundingRect = intersectComponentRef.current.getBoundingClientRect();
-
-                const margin = {
-                    left:
-                        parseInt(
-                            intersectComponentRef.current.style.getPropertyValue('margin-left'),
-                            10,
-                        ) || 0,
-                    top:
-                        parseInt(
-                            intersectComponentRef.current.style.getPropertyValue('margin-top'),
-                            10,
-                        ) || 0,
-                };
-
-                return {
-                    bottom: sPos.y + boundingRect.bottom + margin.top,
-                    left: sPos.x + boundingRect.left + margin.left,
-                    right: sPos.x + boundingRect.right + margin.left,
-                    top: sPos.y + boundingRect.top + margin.top,
-                };
-            }
-            return {
-                bottom: 0,
-                left: 0,
-                right: 0,
-                top: 0,
-            };
-        };
-
-        const isPlaceholderInViewport = () => {
-            if (
-                typeof window === 'undefined' ||
-                !intersectComponentRef.current ||
-                !scrollPosition
-            ) {
-                return false;
-            }
-
-            const boundingBox = getPlaceholderBoundingBox(scrollPosition);
-
-            const viewport = {
-                bottom: scrollPosition.y + window.innerHeight,
-                left: scrollPosition.x,
-                right: scrollPosition.x + window.innerWidth,
-                top: scrollPosition.y,
-            };
-
-            return Boolean(
-                viewport.top - threshold <= boundingBox.bottom &&
-                    viewport.bottom + threshold >= boundingBox.top &&
-                    viewport.left - threshold <= boundingBox.right &&
-                    viewport.right + threshold >= boundingBox.left,
-            );
-        };
-
-        const updateVisibility = () => {
-            if (isPlaceholderInViewport()) {
-                //setIsVisible(true);
-            }
-        };
-
-        const styleProp: Record<string, any> = {
-            display: 'inline-block',
-        };
-
-        if (typeof width !== 'undefined') {
-            styleProp.width = width;
-        }
-
-        if (typeof height !== 'undefined') {
-            styleProp.height = height;
-            styleProp.minHeight = height;
-        }
-
-        return <span id="IntersectComponent" ref={intersectComponentRef} style={styleProp} />;
-    },
-);
-
-ScrollIntersectComponent.displayName = 'IntersectComponent';

package/src/components/Image/subcomponents/Skeleton/index.tsx

@@ -1,14 +0,0 @@
-import { Skeleton as MUISkeleton } from '@mui/material';
-import { WrapperSkeletonImage } from './styles';
-import { SkeletonProps } from './types';
-
-export const Skeleton = (props: SkeletonProps) => {
-    const { skeletonVariant } = props;
-    return skeletonVariant === 'image' ? (
-        <WrapperSkeletonImage className={'skeleton'}>
-            <MUISkeleton variant="rectangular" width={'100%'} height={'100%'} />
-        </WrapperSkeletonImage>
-    ) : (
-        <MUISkeleton variant="circular" width={'100%'} height={'100%'} className={'skeleton'} />
-    );
-};

package/src/components/Image/subcomponents/Skeleton/styles.tsx

@@ -1,11 +0,0 @@
-import { styled } from '@mui/material';
-
-export const WrapperSkeletonImage = styled('div')(() => ({
-    mask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`,
-    WebkitMask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`,
-    height: '100%',
-    width: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-}));

package/src/components/Image/subcomponents/Skeleton/types.ts

@@ -1,5 +0,0 @@
-import { SkeletonVariant } from '../../types';
-
-export interface SkeletonProps {
-    skeletonVariant: SkeletonVariant;
-}

package/src/components/Image/types.ts

@@ -1,45 +0,0 @@
-import { ReactNode } from 'react';
-
-export type Effect = 'blur' | 'black-and-white' | 'opacity';
-
-export type ScrollPosition = {
-    x: number;
-    y: number;
-};
-
-export type IntersectComponentRef = HTMLSpanElement & { setIsVisible?: (visible: boolean) => void };
-
-export interface BaseImageProps {
-    width: string;
-    height?: string;
-}
-
-export interface IntersectComponentProps extends BaseImageProps {
-    setIsVisible: (visible: boolean) => void;
-    threshold: number;
-    useIntersectionObserver: boolean;
-    // effect?: Effect | undefined;
-    scrollPosition?: ScrollPosition;
-}
-
-export interface IntersectComponentScrollProps extends IntersectComponentProps {
-    delayMethod?: 'debounce' | 'throttle';
-    delayTime?: number;
-}
-
-export interface LazyLoadComponentProps extends Omit<IntersectComponentProps, 'setIsVisible'> {
-    children: ReactNode;
-}
-export type SkeletonVariant = 'image' | 'circle';
-
-export interface ImageProps
-    extends Omit<
-        IntersectComponentProps,
-        'setIsVisible' | 'threshold' | 'useIntersectionObserver'
-    > {
-    src: string;
-    alt?: string;
-    threshold?: number;
-    useIntersectionObserver?: boolean;
-    skeletonVariant?: SkeletonVariant;
-}

package/src/components/Image/utils/get-scroll-ancestor.ts

@@ -1,33 +0,0 @@
-// Adapted from https://github.com/loktar00/react-lazy-load/blob/master/src/utils/parentScroll.js
-
-const getElementOverflowValues = (element: HTMLElement): string => {
-    const computedStyle = getComputedStyle(element, null);
-
-    return (
-        computedStyle.getPropertyValue('overflow') +
-        computedStyle.getPropertyValue('overflow-y') +
-        computedStyle.getPropertyValue('overflow-x')
-    );
-};
-
-export const getScrollAncestor = (element: Node): HTMLElement | Window => {
-    if (!(element instanceof HTMLElement)) {
-        return window;
-    }
-
-    let parent: Node | null = element;
-
-    while (parent) {
-        if (!(parent instanceof HTMLElement)) {
-            break;
-        }
-
-        if (/(scroll|auto)/.test(getElementOverflowValues(parent))) {
-            return parent;
-        }
-
-        parent = parent.parentNode;
-    }
-
-    return window;
-};

package/src/components/Image/utils/isIntersectionObserverAvailable.ts

@@ -1,7 +0,0 @@
-export function isIntersectionObserverAvailable() {
-    return (
-        typeof window !== 'undefined' &&
-        'IntersectionObserver' in window &&
-        'isIntersecting' in window.IntersectionObserverEntry.prototype
-    );
-}

package/src/components/LanguagePopover/index.tsx

@@ -1,136 +0,0 @@
-import { useEffect, useState } from 'react';
-// @mui
-import { MenuItem, Stack } from '@mui/material';
-// import { MenuItem, Stack, Skeleton } from '@mui/material';
-// hooks
-// components
-import { Image } from '../Image';
-// import { Popover } from '../mui_extended';
-
-import { NetworkLocaleType, useLocales } from '@m4l/graphics';
-import { CircularProgress, Popover } from '../mui_extended';
-import { ContainerMenuItems, ContainerProgress, LabelItem } from './styles';
-import { ImageButton } from '../mui_extended/ImageButton';
-import { useEnvironment, useNetwork } from '@m4l/core';
-
-// ----------------------------------------------------------------------
-
-export function LanguagePopover() {
-    const { currentLocale, onChangeLocale } = useLocales();
-    const { domain_token } = useEnvironment();
-    const { networkOperation } = useNetwork();
-
-    const [open, setOpen] = useState<HTMLElement | null>(null);
-
-    const [loading, setLoading] = useState<boolean>(false);
-
-    const [allLocales, setAllLocales] = useState<Array<NetworkLocaleType>>([]);
-
-    const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
-        setOpen(event.currentTarget);
-    };
-
-    const handleClose = () => {
-        setOpen(null);
-    };
-
-    useEffect(() => {
-        let mounted = true;
-
-        if (open === null || loading || allLocales.length > 0) {
-            return;
-        }
-        setLoading(true);
-
-        networkOperation({
-            method: 'GET',
-            endPoint: `na/locales`,
-            parms: { domain_token },
-        })
-            .then((response: any) => {
-                if (mounted) {
-                    setAllLocales(response.data);
-                    //getLocale(response.data, host_static_assets, environment_assets).then(
-                }
-            })
-            .finally(() => {
-                setLoading(false);
-            });
-
-        return function cleanUp() {
-            mounted = false;
-        };
-    }, [open]);
-
-    return (
-        <>
-            <ImageButton
-                className="m4l_language_popover"
-                onClick={handleOpen}
-                // size="large"
-                sx={{
-                    width: 40,
-                    height: 40,
-                    ...(open && { bgcolor: 'action.selected' }),
-                }}
-                src={currentLocale?.url_icon || ''}
-                alt={currentLocale?.name}
-                width={'24px'}
-                height={'24px'}
-                skeletonVariant="circle"
-                tooltip="dddd"
-            />
-
-            <Popover
-                arrowType="top-right"
-                open={Boolean(open)}
-                anchorEl={open}
-                anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-                // transformOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-                onClose={handleClose}
-                // disabledArrow
-                sx={{
-                    mt: 1.5,
-                    ml: 0.75,
-                    width: 180,
-                    rowGap: '100px',
-                    '& .MuiMenuItem-root': { px: 1, typography: 'body2', borderRadius: 0.75 },
-                }}
-            >
-                <ContainerMenuItems>
-                    {allLocales.length === 0 && (
-                        <ContainerProgress>
-                            <CircularProgress size={'20px'} />
-                        </ContainerProgress>
-                    )}
-                    {allLocales.length > 0 && (
-                        <Stack spacing={0.75}>
-                            {allLocales.map(option => (
-                                <MenuItem
-                                    key={option.lang || option.script || option.region}
-                                    selected={
-                                        option.lang === currentLocale?.lang &&
-                                        option?.script === currentLocale?.script &&
-                                        option?.region === currentLocale?.region
-                                    }
-                                    onClick={() => {
-                                        onChangeLocale(option);
-                                        handleClose();
-                                    }}
-                                >
-                                    <Image
-                                        alt={option.name}
-                                        src={option.url_icon}
-                                        width={'24px'}
-                                        height={'24px'}
-                                    />
-                                    <LabelItem>{option.name}</LabelItem>
-                                </MenuItem>
-                            ))}
-                        </Stack>
-                    )}
-                </ContainerMenuItems>
-            </Popover>
-        </>
-    );
-}

package/src/components/LanguagePopover/styles.tsx

@@ -1,17 +0,0 @@
-import { styled } from '@mui/material';
-
-export const LabelItem = styled('span')(({ theme }) => ({
-    marginLeft: theme.spacing(1),
-}));
-
-export const ContainerProgress = styled('div')(({ theme }) => ({
-    padding: theme.spacing(0.75, 0),
-    margin: theme.spacing(0, 1.25),
-}));
-
-export const ContainerMenuItems = styled('div')(() => ({
-    display: 'flex',
-    flexDirection: 'column',
-    // marginBottom: theme.spacing(1),
-    // paddingBottom: theme.spacing(1),
-}));

package/src/components/LanguagePopover/types.ts

@@ -1,3 +0,0 @@
-export interface defaultProps {
-    isSkeleton?: boolean;
-}

package/src/components/Loadable/index.tsx

@@ -1,11 +0,0 @@
-import { ElementType, Suspense } from 'react';
-import { PropagateLoader } from '../animate/PropagateLoader';
-
-export const Loadable = (Component: ElementType) =>
-    function EmbededLoadable(props: any) {
-        return (
-            <Suspense fallback={<PropagateLoader />}>
-                <Component {...props} />
-            </Suspense>
-        );
-    };

package/src/components/NoItemSelected/dictionary.ts

@@ -1,11 +0,0 @@
-import { Dictionary } from '@m4l/core';
-
-export function getNoItemSelectedComponentsDictionary() {
-    return ['no_item_selected'];
-}
-
-export const defaultNoItemSelectedDictionary: Dictionary = {
-    no_item_selected: {
-        message: 'Please select a item to show detail',
-    },
-};

package/src/components/NoItemSelected/index.tsx

@@ -1,46 +0,0 @@
-// react
-//m4l
-import { useEnvironment, useModuleDictionary, useModuleSkeleton } from '@m4l/core';
-// mui
-// external libraries
-// componentes estilados
-
-import { Label, WrapperNoItemSelected, WrapperSKTNoItemSelected, Img } from './styles';
-import { Skeleton } from '@mui/material';
-
-import { useMemo } from 'react';
-// internal components
-// sub components
-// types
-
-// hooks
-
-// config
-
-// network
-
-export function NoItemSelected() {
-    const { host_static_assets, environment_assets } = useEnvironment();
-    const { getLabel } = useModuleDictionary();
-    const isSkeleton = useModuleSkeleton();
-    const src: string = useMemo(() => {
-        return `${host_static_assets}/${environment_assets}/frontend/components/no_item_selected/assets/icons/no_selected.svg`;
-    }, []);
-
-    if (isSkeleton) {
-        return (
-            <WrapperNoItemSelected id="WrapperNoItemSelected">
-                <WrapperSKTNoItemSelected id="WrapperSKTNoItemSelected">
-                    <Skeleton variant="rectangular" width={'100%'} height={'100%'} />
-                </WrapperSKTNoItemSelected>
-            </WrapperNoItemSelected>
-        );
-    }
-
-    return (
-        <WrapperNoItemSelected id="WrapperNoItemSelected">
-            <Img src={src} width={'100%'} height={'100%'} />
-            <Label>{getLabel('no_item_selected.message')}</Label>
-        </WrapperNoItemSelected>
-    );
-}

package/src/components/NoItemSelected/styles.tsx

@@ -1,32 +0,0 @@
-import { styled } from '@mui/material/styles';
-import { Image } from '../Image';
-
-export const WrapperNoItemSelected = styled('div')(({ theme }) => ({
-    width: '100%',
-    maxWidth: '400px',
-    minWidth: '300px',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: theme.spacing(3),
-}));
-
-export const Img = styled(Image)(() => ({
-    display: 'flex',
-}));
-
-export const Label = styled('span')(({ theme }) => ({
-    ...theme.typography.body2,
-    padding: `${theme.spacing(1.5)} ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)}`,
-    color: theme.palette.text.primary,
-}));
-
-export const WrapperSKTNoItemSelected = styled('div')(() => ({
-    display: 'flex',
-    width: '100%',
-    minWidth: '100%',
-    minHeight: '230px',
-    mask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`,
-    WebkitMask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`,
-}));

package/src/components/ObjectLogs/components/DetailDialog/index.tsx

@@ -1,66 +0,0 @@
-// react
-import { useEffect, useState } from 'react';
-//m4l
-import { useNetwork } from '@m4l/core';
-import { useHostTheme } from '@m4l/graphics';
-
-// librerías externas
-
-import ReactJson from 'react-json-view';
-
-// mui
-
-// styled components
-import { Container } from './styles';
-
-// hooks
-
-// types
-import type { DetailDialogProps } from './types';
-
-export function DetailDialog(props: DetailDialogProps) {
-    const { log_id } = props;
-    const { networkOperation } = useNetwork();
-    const { hostThemeOptions } = useHostTheme();
-    const [detail, setDetail] = useState({});
-
-    /// ///
-
-    useEffect(() => {
-        let mounted = true;
-
-        networkOperation({
-            method: 'GET',
-            endPoint: `logs/${log_id}`,
-        }).then((response: any) => {
-            if (mounted) {
-                const parseData = JSON.parse(String(response.data.log_detail));
-                setDetail(parseData);
-            }
-        });
-
-        return function cleanUp() {
-            /// /
-            mounted = false;
-        };
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    const modeTheme = hostThemeOptions.palette?.mode;
-
-    /* const detailConvert = JSON.parse(`'${detail}'`) */
-
-    return (
-        <Container id="objectLogsDetail">
-            <ReactJson
-                theme={modeTheme === 'dark' ? 'summerfruit' : 'rjv-default'}
-                name={null}
-                sortKeys
-                displayDataTypes={false}
-                quotesOnKeys={false}
-                src={detail}
-            />
-        </Container>
-    );
-}

package/src/components/ObjectLogs/components/DetailDialog/styles.ts

@@ -1,17 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const Container = styled('div')(({ theme }) => ({
-    color: theme.palette.text.primary,
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    width: '100%',
-}));
-
-export const Text = styled('span')(({ theme }) => ({
-    color: theme.palette.text.primary,
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    width: '100%',
-}));

package/src/components/ObjectLogs/components/DetailFormatter/index.tsx

@@ -1,45 +0,0 @@
-// mui
-import { IconButton, Tooltip } from '@mui/material';
-
-// types
-import { DetailFormatterProps } from './types';
-import { DetailDialog } from '../DetailDialog';
-
-// hooks
-import { useModal } from '../../../../hooks/useModal';
-import { useEnvironment, useModuleDictionary } from '@m4l/core';
-import { Icon } from '../../../Icon';
-import { useResponsiveDesktop } from '@m4l/graphics';
-import { WindowBase } from '../../../modal';
-
-export function DetailFormatter(props: DetailFormatterProps) {
-    const { log_id } = props;
-    const { openModal } = useModal();
-    const { getLabel } = useModuleDictionary();
-    const { host_static_assets, environment_assets } = useEnvironment();
-    const isDesktop = useResponsiveDesktop();
-
-    const onClickDetail = () => {
-        openModal({
-            // onQueryClose: () => closeModal(),
-
-            window: (
-                <WindowBase title={getLabel('data_grid.settings_title')}>
-                    <DetailDialog log_id={log_id} />,
-                </WindowBase>
-            ),
-
-            fullScreen: !isDesktop ? true : false,
-        });
-    };
-
-    return (
-        <Tooltip title={getLabel('object_logs.view_log_detail')}>
-            <IconButton onClick={onClickDetail} aria-label="filter">
-                <Icon
-                    src={`${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/search.svg`}
-                />
-            </IconButton>
-        </Tooltip>
-    );
-}