@archbase/components 3.0.0

package/src/editors/ArchbaseAvatarEdit.tsx

@@ -0,0 +1,625 @@
+import { ActionIcon, ActionIconVariant, Box, Button, Group, Input, Modal, Paper, Slider, Space, Stack, Text, Tooltip } from '@mantine/core';
+import { useForceUpdate } from '@mantine/hooks';
+import { IconCameraPlus, IconEdit, IconRotate, IconTrash, IconZoomIn } from '@tabler/icons-react';
+import type { ArchbaseDataSource, DataSourceEvent, IArchbaseDataSourceBase } from '@archbase/data';
+import { DataSourceEventNames, useArchbaseV1V2Compatibility, useArchbaseDidUpdate } from '@archbase/data';
+import { useArchbaseTheme, isBase64 } from '@archbase/core';
+import { useArchbaseTranslation } from '@archbase/core';
+import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
+import Cropper from 'react-easy-crop';
+import { useValidationErrors } from '@archbase/core';
+
+export interface ArchbaseAvatarEditProps<T, ID> {
+    /** Fonte de dados onde será atribuido o valor do avatar (V1 ou V2) */
+    dataSource?: IArchbaseDataSourceBase<T>;
+    /** Campo onde deverá ser atribuido o valor do avatar na fonte de dados */
+    dataField?: string;
+    /** Indicador se o avatar está desabilitado */
+    disabled?: boolean;
+    /** Indicador se o avatar é somente leitura. Obs: usado em conjunto com o status da fonte de dados */
+    readOnly?: boolean;
+    /** Indicador se o preenchimento do avatar é obrigatório */
+    required?: boolean;
+    /** Estilo do avatar */
+    style?: CSSProperties;
+    /** Título do avatar */
+    label?: string;
+    /** Descrição do avatar */
+    description?: string;
+    /** Último erro ocorrido no avatar */
+    error?: string;
+    /** Controla a aparência dos botões, sendo padrão "transparent". */
+    variant?: ActionIconVariant;
+    /** Image src */
+    src?: string | null;
+    /** Largura do avatar, padrão 200 */
+    width?: number;
+    /** Altura do avatar, padrão 200 */
+    height?: number;
+    /** Zoom inicial do avatar, padrão 1 */
+    initialZoom?: number;
+    /** Chave de theme.radius ou qualquer valor CSS válido para definir border-radius, 0 por padrão */
+    radius?: string | number | undefined;
+    /** Referência para o componente interno */
+    innerRef?: React.RefObject<HTMLInputElement> | undefined;
+    /** Callback quando a imagem for alterada */
+    onChangeImage?: (image: any) => void;
+    /** Desabilita conversão do conteúdo em base64 antes de salvar na fonte de dados */
+    disabledBase64Convertion?: boolean;
+    /** Cor de fundo de hover do avatar */
+    hoverBackgroundColor?: string;
+    /** Tamanho máximo da imagem em kilobytes */
+    maxSizeKB?: number;
+    /** Qualidade da compressão da imagem (0 a 1), sendo 1 melhor qualidade */
+    imageQuality?: number;
+}
+
+export function ArchbaseAvatarEdit<T, ID>({
+    width = 200,
+    height = 200,
+    dataSource,
+    dataField,
+    disabled,
+    readOnly,
+    required,
+    label,
+    description,
+    error,
+    src,
+    radius = '50%',
+    initialZoom = 1,
+    onChangeImage,
+    disabledBase64Convertion,
+    innerRef,
+    variant = 'transparent',
+    hoverBackgroundColor = 'rgba(0, 0, 0, 0.6)',
+    maxSizeKB = 0, // 0 significa sem limite
+    imageQuality = 0.95,
+    ...otherProps
+}: ArchbaseAvatarEditProps<T, ID>) {
+    const [value, setValue] = useState<string | undefined>(undefined);
+    const [image, setImage] = useState<string | undefined>(undefined);
+    const [originalImage, setOriginalImage] = useState<string | undefined>(undefined);
+    const [modalOpen, setModalOpen] = useState(false);
+    const [crop, setCrop] = useState({ x: 0, y: 0 });
+    const [zoom, setZoom] = useState(initialZoom);
+    const [rotation, setRotation] = useState(0);
+    const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
+    const innerComponentRef = useRef<any>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const cropperRef = useRef<any>(null);
+    const [internalError, setInternalError] = useState<string | undefined>(error);
+    const [cropError, setCropError] = useState<string>("");
+    const forceUpdate = useForceUpdate();
+    const theme = useArchbaseTheme()
+    // Usar tema padrão para simplificar migração Mantine 8  
+    const colorScheme: 'light' | 'dark' = 'light';
+    const [showControls, setShowControls] = useState(false);
+    const { t } = useArchbaseTranslation();
+
+    // 🔄 MIGRAÇÃO V1/V2: Hook de compatibilidade
+    const v1v2Compatibility = useArchbaseV1V2Compatibility<string | undefined>(
+        'ArchbaseAvatarEdit',
+        dataSource,
+        dataField,
+        undefined
+    );
+
+    // Contexto de validação (opcional - pode não existir)
+    const validationContext = useValidationErrors();
+
+    // Chave única para o field
+    const fieldKey = `${dataField}`;
+
+    // Recuperar erro do contexto se existir
+    const contextError = validationContext?.getError(fieldKey);
+
+    // 🔄 MIGRAÇÃO V1/V2: Debug info para desenvolvimento
+    if (process.env.NODE_ENV === 'development' && dataSource) {
+    }
+
+    // ✅ CORRIGIDO: Apenas atualizar se o prop error vier definido
+    // Não limpar o internalError se o prop error for undefined
+    useEffect(() => {
+        if (error !== undefined && error !== internalError) {
+            setInternalError(error);
+        }
+    }, [error]);
+
+    const loadDataSourceFieldValue = () => {
+        let initialValue: any = value;
+
+        if (dataSource && dataField) {
+            initialValue = dataSource.getFieldValue(dataField);
+            if (!initialValue) {
+                initialValue = '';
+            }
+        }
+
+        if (isBase64(initialValue) && !disabledBase64Convertion) {
+            initialValue = atob(initialValue);
+        }
+
+        setValue(initialValue);
+        setImage(initialValue);
+    };
+
+    const fieldChangedListener = useCallback(() => {
+        loadDataSourceFieldValue();
+    }, []);
+
+    const dataSourceEvent = useCallback((event: DataSourceEvent<T>) => {
+        if (dataSource && dataField) {
+            if (
+                event.type === DataSourceEventNames.dataChanged ||
+                event.type === DataSourceEventNames.recordChanged ||
+                event.type === DataSourceEventNames.afterScroll ||
+                event.type === DataSourceEventNames.afterCancel ||
+                event.type === DataSourceEventNames.afterEdit
+            ) {
+                loadDataSourceFieldValue();
+                // 🔄 MIGRAÇÃO V1/V2: forceUpdate apenas para V1
+                if (!v1v2Compatibility.isDataSourceV2) {
+                    forceUpdate();
+                }
+            }
+            if (event.type === DataSourceEventNames.onFieldError && event.fieldName === dataField) {
+                setInternalError(event.error);
+                // Salvar no contexto (se disponível)
+                validationContext?.setError(fieldKey, event.error);
+            }
+        }
+    }, [v1v2Compatibility.isDataSourceV2, validationContext, fieldKey]);
+
+    // Ref para manter callback sempre atualizado (corrige problema de closure desatualizada)
+    const dataSourceEventRef = useRef(dataSourceEvent);
+    useEffect(() => {
+        dataSourceEventRef.current = dataSourceEvent;
+    }, [dataSourceEvent]);
+
+    // Wrapper estável que delega para ref
+    const stableDataSourceEvent = useCallback((event: DataSourceEvent<T>) => {
+        dataSourceEventRef.current(event);
+    }, []);
+
+    // Registrar listeners com cleanup apropriado
+    useEffect(() => {
+        loadDataSourceFieldValue();
+	if (dataSource && dataField) {
+		const hasFieldListener = typeof (dataSource as any).addFieldChangeListener === 'function';
+		dataSource.addListener(stableDataSourceEvent);
+		if (hasFieldListener) {
+			(dataSource as any).addFieldChangeListener(dataField, fieldChangedListener);
+		}
+
+		return () => {
+			dataSource.removeListener(stableDataSourceEvent);
+			if (hasFieldListener) {
+				(dataSource as any).removeFieldChangeListener(dataField, fieldChangedListener);
+			}
+		};
+	}
+    }, [dataSource, dataField, stableDataSourceEvent, fieldChangedListener]);
+
+    useArchbaseDidUpdate(() => {
+        loadDataSourceFieldValue();
+    }, []);
+
+    const handleChangeImage = (image: string | undefined) => {
+        // ✅ Limpa erro quando usuário edita o campo (tanto do estado local quanto do contexto)
+        const hasError = internalError || contextError;
+        if (hasError) {
+            setInternalError(undefined);
+            validationContext?.clearError(fieldKey);
+        }
+
+        const changedValue = image;
+        setValue((_prev) => changedValue);
+        setImage(changedValue);
+
+        if (dataSource && !dataSource.isBrowsing() && dataField && dataSource.getFieldValue(dataField) !== changedValue) {
+            let valueToSave: string | undefined;
+            if (!changedValue) {
+                valueToSave = undefined;
+            } else {
+                valueToSave = disabledBase64Convertion ? changedValue : btoa(changedValue);
+            }
+            // 🔄 MIGRAÇÃO V1/V2: Usar handleValueChange do padrão de compatibilidade
+            v1v2Compatibility.handleValueChange(valueToSave);
+        }
+        if (onChangeImage) {
+            onChangeImage(image);
+        }
+    };
+
+    const isReadOnly = () => {
+        // 🔄 MIGRAÇÃO V1/V2: Usar padrão de compatibilidade para isReadOnly
+        return readOnly || v1v2Compatibility.isReadOnly;
+    };
+
+    const handleSelectImage = () => {
+        if (isReadOnly() || disabled) return;
+        fileInputRef.current?.click();
+    };
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files && e.target.files.length > 0) {
+            const file = e.target.files[0];
+            const reader = new FileReader();
+            reader.onload = () => {
+                setOriginalImage(image);
+                setImage(reader.result as string);
+                setModalOpen(true);
+                setCrop({ x: 0, y: 0 });
+                setZoom(initialZoom);
+                setRotation(0);
+            };
+            reader.readAsDataURL(file);
+            // Reset input para permitir selecionar o mesmo arquivo novamente
+            e.target.value = '';
+        }
+    };
+
+    const handleRemoveImage = () => {
+        if (isReadOnly() || disabled) return;
+
+        // ✅ Limpa erro quando usuário remove a imagem
+        const hasError = internalError || contextError;
+        if (hasError) {
+            setInternalError(undefined);
+            validationContext?.clearError(fieldKey);
+        }
+
+        setImage(undefined);
+        handleChangeImage(undefined);
+    };
+
+    const handleCropComplete = (croppedArea: any, croppedAreaPixelsData: any) => {
+        setCroppedAreaPixels(croppedAreaPixelsData);
+    };
+
+    const handleCloseModal = () => {
+        setModalOpen(false);
+        setImage(originalImage);
+    };
+
+    // Função para criar uma imagem a partir de URL
+    const createImage = (url: string): Promise<HTMLImageElement> =>
+        new Promise((resolve, reject) => {
+            const image = new Image();
+            image.addEventListener('load', () => resolve(image));
+            image.addEventListener('error', (error) => reject(error));
+            image.setAttribute('crossOrigin', 'anonymous');
+            image.src = url;
+        });
+
+    async function getCroppedImg(
+        imageSrc: string,
+        pixelCrop: any,
+        rotation = 0,
+        quality = imageQuality,
+    ): Promise<string> {
+        const image = await createImage(imageSrc);
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+
+        if (!ctx) {
+            return imageSrc;
+        }
+
+        // Calcular o tamanho do retângulo delimitador da imagem rotacionada
+        const rotRad = (rotation * Math.PI) / 180;
+        const { width: bBoxWidth, height: bBoxHeight } = getRotatedSize(
+            image.width,
+            image.height,
+            rotation
+        );
+
+        // Definir o tamanho do canvas para o tamanho do retângulo delimitador
+        canvas.width = bBoxWidth;
+        canvas.height = bBoxHeight;
+
+        // Preencher com branco para imagens com transparência
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(0, 0, bBoxWidth, bBoxHeight);
+
+        // Transladar para o centro do canvas
+        ctx.translate(bBoxWidth / 2, bBoxHeight / 2);
+        ctx.rotate(rotRad);
+        ctx.translate(-image.width / 2, -image.height / 2);
+
+        // Desenhar a imagem
+        ctx.drawImage(image, 0, 0);
+
+        // Obter os dados da imagem
+        const data = ctx.getImageData(0, 0, bBoxWidth, bBoxHeight);
+
+        // Definir o tamanho do canvas para o tamanho desejado
+        canvas.width = pixelCrop.width;
+        canvas.height = pixelCrop.height;
+
+        // Colocar os dados da imagem rotacionada de volta no canvas
+        ctx.putImageData(data, -pixelCrop.x, - pixelCrop.y);
+
+        // Retornar como base64 com a qualidade especificada
+        return canvas.toDataURL('image/jpeg', quality);
+    }
+
+    // Função auxiliar para calcular o tamanho do retângulo delimitador após rotação
+    function getRotatedSize(width: number, height: number, rotation: number) {
+        const rotRad = (rotation * Math.PI) / 180;
+
+        return {
+            width: Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
+            height: Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height),
+        };
+    }
+
+    const handleSaveCrop = async () => {
+        if (!image || !croppedAreaPixels) return;
+
+        try {
+            // Função para verificar o tamanho da imagem em KB
+            const getImageSizeInKB = (dataUrl: string): number => {
+                // Remove o cabeçalho da URL de dados
+                const base64String = dataUrl.split(',')[1];
+                // Calcula o tamanho em bytes e converte para KB
+                const sizeInBytes = window.atob(base64String).length;
+                return sizeInBytes / 1024;
+            };
+
+            // Função para comprimir a imagem até atingir o tamanho desejado
+            const compressImage = async (
+                imgSrc: string,
+                pixelCrop: any,
+                rotation: number,
+                maxSize: number,
+                initialQuality = imageQuality
+            ): Promise<string> => {
+                let quality = initialQuality;
+                let compressedImage = await getCroppedImg(imgSrc, pixelCrop, rotation, quality);
+                let currentSize = getImageSizeInKB(compressedImage);
+
+                // Se não houver limite de tamanho ou já estiver abaixo do limite, retorna a imagem
+                if (maxSize <= 0 || currentSize <= maxSize) {
+                    return compressedImage;
+                }
+
+                // Tenta comprimir a imagem até 10 vezes, reduzindo a qualidade gradualmente
+                let attempts = 0;
+                const maxAttempts = 10;
+
+                while (currentSize > maxSize && attempts < maxAttempts) {
+                    // Reduz a qualidade com base no quão longe estamos do tamanho desejado
+                    const ratio = Math.min(maxSize / currentSize, 0.9);
+                    quality = quality * ratio;
+
+                    // Não permite que a qualidade fique muito baixa
+                    if (quality < 0.1) quality = 0.1;
+
+                    compressedImage = await getCroppedImg(imgSrc, pixelCrop, rotation, quality);
+                    currentSize = getImageSizeInKB(compressedImage);
+                    attempts++;
+                }
+
+                return compressedImage;
+            };
+
+            // Comprime a imagem se necessário
+            const processedImage = await compressImage(image, croppedAreaPixels, rotation, maxSizeKB);
+
+            // Mostra um aviso se não foi possível atingir o tamanho desejado
+            const finalSize = getImageSizeInKB(processedImage);
+            if (maxSizeKB > 0 && finalSize > maxSizeKB) {
+                setCropError(`${t('archbase:erro_avatar_crop', {
+                    imageSize: finalSize.toFixed(2),
+                    maxImageSize: maxSizeKB,
+                })}`)
+                return
+            }
+
+            handleChangeImage(processedImage);
+            setModalOpen(false);
+            setOriginalImage(undefined);
+            setCropError("")
+        } catch (error) {
+            setCropError(`Error cropping the image: ${error}`)
+        }
+    };
+
+    // Erro a ser exibido: local ou do contexto
+    const displayError = internalError || contextError;
+
+    return (
+        <div style={{ position: 'relative', display: 'inline-block' }}>
+            <Input.Wrapper
+                withAsterisk={required}
+                label={label}
+                description={description}
+                error={displayError}
+                ref={innerRef || innerComponentRef}
+            >
+                <Paper
+                    radius={radius}
+                    style={{
+                        width,
+                        height,
+                        overflow: 'hidden',
+                        position: 'relative',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    {image ? (
+                        <>
+                            <img
+                                src={image}
+                                alt="Avatar"
+                                style={{
+                                    width: '100%',
+                                    height: '100%',
+                                    objectFit: 'cover',
+                                    borderRadius: radius,
+                                }}
+                            />
+                            {!isReadOnly() && !disabled && (
+                                <div
+                                    style={{
+                                        position: 'absolute',
+                                        top: 0,
+                                        left: 0,
+                                        right: 0,
+                                        bottom: 0,
+                                        background: hoverBackgroundColor,
+                                        borderRadius: radius,
+                                        opacity: showControls ? 1 : 0,
+                                        transition: 'opacity 0.2s',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        gap: 10,
+                                    }}
+                                    onMouseEnter={() => setShowControls(true)}
+                                    onMouseLeave={() => setShowControls(false)}
+                                >
+                                    <Tooltip label={`${t('archbase:Edit')}`}>
+                                        <ActionIcon
+                                            radius="xl"
+                                            size="lg"
+                                            color="blue"
+                                            variant={variant}
+                                            onClick={handleSelectImage}
+                                        >
+                                            <IconEdit color={theme.colors.blue[4]} />
+                                        </ActionIcon>
+                                    </Tooltip>
+                                    <Tooltip label={`${t('archbase:Remove')}`}>
+                                        <ActionIcon
+                                            radius="xl"
+                                            size="lg"
+                                            color="red"
+                                            variant={variant}
+                                            onClick={handleRemoveImage}
+                                        >
+                                            <IconTrash color={theme.colors.red[4]} />
+                                        </ActionIcon>
+                                    </Tooltip>
+                                </div>
+                            )}
+                        </>
+                    ) : (
+                        <Box
+                            style={{
+                                width: '100%',
+                                height: '100%',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                cursor: isReadOnly() || disabled ? 'default' : 'pointer',
+                                border: "3px solid #B2B2B2",
+                                borderRadius: "50%"
+                            }}
+                            onClick={handleSelectImage}
+                        >
+                            <IconCameraPlus
+                                size={width * 0.3}
+                                opacity={0.3}
+                                style={{ color: isReadOnly() || disabled ? 'gray' : 'inherit' }}
+                            />
+                        </Box>
+                    )}
+                </Paper>
+
+                <input
+                    ref={fileInputRef}
+                    type="file"
+                    style={{ display: 'none' }}
+                    accept="image/*"
+                    onChange={handleFileChange}
+                />
+
+                <Modal
+                    opened={modalOpen}
+                    onClose={handleCloseModal}
+                    size="lg"
+                >
+                    <Input.Wrapper
+                        error={cropError}
+                    >
+                        <Box style={{ position: 'relative', height: 400, width: '100%' }}>
+                            {image && (
+                                <Cropper
+                                    image={image}
+                                    crop={crop}
+                                    zoom={zoom}
+                                    rotation={rotation}
+                                    aspect={1}
+                                    cropShape="round"
+                                    showGrid={false}
+                                    onCropChange={setCrop}
+                                    onCropComplete={handleCropComplete}
+                                    onZoomChange={setZoom}
+                                    onRotationChange={setRotation}
+                                    ref={cropperRef}
+                                />
+                            )}
+                        </Box>
+                        <Space h={8} />
+                        {(maxSizeKB > 0 && !cropError) && (
+                            <Text fz={12} style={{ color: theme.colors.gray[6] }}>
+                                {`${t('archbase:Image max size')}`}: {maxSizeKB} KB
+                            </Text>
+                        )}
+                    </Input.Wrapper>
+                    <Stack gap="xs" mt="md">
+                        <Group justify="space-between">
+                            <Box style={{ flex: 1 }}>
+                                <Tooltip label={'Zoom'}>
+                                    <IconZoomIn size={20} />
+                                </Tooltip>
+                                <Slider
+                                    value={zoom}
+                                    onChange={setZoom}
+                                    min={1}
+                                    max={3}
+                                    step={0.1}
+                                    label={(value) => value.toFixed(1)}
+                                    style={{ flex: 1 }}
+                                />
+                            </Box>
+                        </Group>
+
+                        <Group justify="space-between">
+                            <Box style={{ flex: 1 }}>
+                                <Tooltip label={`${t('archbase:Rotation')}`}>
+                                    <IconRotate size={20} />
+                                </Tooltip>
+                                <Slider
+                                    value={rotation}
+                                    onChange={setRotation}
+                                    min={0}
+                                    max={360}
+                                    step={1}
+                                    label={(value) => `${value}°`}
+                                    style={{ flex: 1 }}
+                                />
+                            </Box>
+                        </Group>
+                    </Stack>
+
+                    <Group justify="space-between" mt="md">
+                        <Group>
+                            <Button variant="outline" onClick={handleCloseModal}>
+                                {`${t('archbase:Cancel')}`}
+                            </Button>
+                            <Button onClick={handleSaveCrop}>
+                                {`${t('archbase:Apply')}`}
+                            </Button>
+                        </Group>
+                    </Group>
+                </Modal>
+            </Input.Wrapper>
+        </div>
+    );
+}

package/src/editors/ArchbaseCheckbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseCheckbox.d.ts","sourceRoot":"","sources":["ArchbaseCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,WAAW,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,KAAK,EAAE,aAAa,EAAqB,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AACnF,OAAO,KAAK,EAAE,kBAAkB,EAAmB,MAAM,gBAAgB,CAAC;AAK1E,MAAM,WAAW,qBAAqB,CAAC,CAAC,EAAE,EAAE;IAC3C,6DAA6D;IAC7D,UAAU,CAAC,EAAE,kBAAkB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACvC,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uGAAuG;IACvG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,oHAAoH;IACpH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACrC,2CAA2C;IAC3C,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yBAAyB;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACpC,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAClE,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnE,mDAAmD;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACjD,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAC;CACzD;AAED,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAAE,EAAE,EACvC,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,QAAgB,EAChB,QAAgB,EAChB,KAAK,EACL,SAAgB,EAChB,UAAkB,EAClB,SAAiB,EACjB,KAAK,EACL,KAAK,EACL,WAAW,EACX,KAAK,EACL,IAAI,EACJ,MAAM,EACN,WAAsB,EACtB,YAAuB,EACvB,aAAwB,EACxB,QAAQ,GACR,EAAE,qBAAqB,CAAC,CAAC,EAAE,EAAE,CAAC,2CAoI9B"}