@archbase/components 3.0.0

package/src/jsonschema/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,6CAA6C,CAAC;AACvF,YAAY,EAAE,6BAA6B,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,6CAA6C,CAAC"}

package/src/jsonschema/index.ts

@@ -0,0 +1,2 @@
+export { ArchbaseJsonSchemaEditor } from './JsonSchemaEditor/ArchbaseJsonSchemaEditor';
+export type { ArchbaseJsonSchemaEditorProps, JSONSchema7, Schema2 } from './JsonSchemaEditor/ArchbaseJsonSchemaEditor';

package/src/list/ArchbaseList.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseList.context.d.ts","sourceRoot":"","sources":["ArchbaseList.context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,WAAW,wBAAwB,CAAC,CAAC,EAAE,EAAE;IAC9C,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,UAAU,CAAC,EAAE,kBAAkB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACvC,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACpD,sBAAsB;IACtB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,+DAA+D;IAC/D,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,CAAC;IACxC,sDAAsD;IACtD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3D,kDAAkD;IAClD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3D;AACD,QAAA,MAAM,mBAAmB,mDAA8D,CAAC;AACxF,eAAO,MAAM,oBAAoB,oDAA+B,CAAC;AACjE,eAAe,mBAAmB,CAAC"}

package/src/list/ArchbaseList.context.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ArchbaseDataSource, IArchbaseDataSourceBase } from '@archbase/data';
+
+export interface ArchbaseListContextValue<T, ID> {
+	/** Indica se a lista esta desabilitada */
+	disabled?: boolean;
+	/** Fonte de dados da lista (V1 ou V2) */
+	dataSource?: IArchbaseDataSourceBase<T>;
+	/** Function para notificar a lista que o item foi selecionado */
+	handleSelectItem?: (index: number, data: T) => void;
+	/** Id da lista pai */
+	ownerId?: any;
+	/** Cor de fundo do item ativo definido globalmente na lista */
+	activeBackgroundColor?: string;
+	/** Cor da fonte do item ativo definido globalmente na lista */
+	activeColor?: string;
+	/** Alinhamento do item na lista */
+	align?: 'left' | 'right' | 'center';
+	/** Tipo de lista */
+	type?: 'ordered' | 'unordered' | 'none';
+	/** Evento gerado quando o mouse está sobre um item */
+	onItemEnter?: (event: React.MouseEvent, data: any) => void;
+	/** Evento gerado quando o mouse sai de um item */
+	onItemLeave?: (event: React.MouseEvent, data: any) => void;
+}
+const ArchbaseListContext = React.createContext<ArchbaseListContextValue<any, any>>({});
+export const ArchbaseListProvider = ArchbaseListContext.Provider;
+export default ArchbaseListContext;

package/src/list/ArchbaseList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseList.d.ts","sourceRoot":"","sources":["ArchbaseList.tsx"],"names":[],"mappings":"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"}

package/src/list/ArchbaseList.tsx

@@ -0,0 +1,533 @@
+/**
+ * ArchbaseList — lista com seleção opcional e integração com dataSource.
+ * @status stable
+ */
+import { Box, Paper, useMantineColorScheme, useMantineTheme } from '@mantine/core';
+import { useForceUpdate } from '@mantine/hooks';
+import { uniqueId } from 'lodash';
+import React, { FocusEventHandler, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { ArchbaseError } from '@archbase/core';
+import { ArchbaseObjectHelper } from '@archbase/core';
+import { useArchbaseV1V2Compatibility } from '@archbase/data';
+import { ArchbaseDataSource, DataSourceEvent, DataSourceEventNames, IArchbaseDataSourceBase } from '@archbase/data';
+import { useArchbaseDidMount, useArchbaseWillUnmount } from '@archbase/data';
+import { useArchbaseForceRerender } from '@archbase/data';
+import { ArchbaseListProvider } from './ArchbaseList.context';
+import { ArchbaseListItem } from './ArchbaseListItem';
+
+export interface ArchbaseListCustomItemProps<T, _ID> {
+	/** Chave */
+	key: string;
+	/** Id do item */
+	id: any;
+	/** Indicador se o Item está ativo */
+	active: boolean;
+	/** Indice dentro da lista */
+	index: number;
+	/** Registro contendo dados de uma linha na lista */
+	recordData: T;
+	/** Indicador se item da lista está desabilitado */
+	disabled: boolean;
+}
+
+export interface ComponentDefinition {
+	type: React.ElementType;
+	props?: any;
+}
+
+export interface ArchbaseListProps<T, ID> {
+	/** Cor de fundo do item ativo */
+	activeBackgroundColor?: string;
+	/** Cor do item ativo */
+	activeColor?: string;
+	/** Alinhamento dos itens na lista */
+	align?: 'left' | 'right' | 'center';
+	/** Cor de fundo da lista */
+	backgroundColor?: string;
+	/** Cor do texto da lista */
+	color?: string;
+	/** Altura da lista */
+	height?: number | string;
+	/** Largura da lista */
+	width?: number | string;
+	/** desabilita todos os itens da lista */
+	disabled?: boolean;
+	/** Indicador se os itens da lista devem ser justificados */
+	justify?: 'flex-start' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+	/** Evento que ocorre quando um item da lista é selecionado */
+	onSelectListItem?: (index: number, data: any) => void;
+	/** Mostra uma borda ao redor da lista */
+	withBorder?: boolean;
+	/** Cor da borda */
+	borderColor?: string;
+	/** Arredondamento dos cantos da borda */
+	borderRadius?: string | number | undefined;
+	/** Propriedade do objeto de dados que representa o texto a ser apresentado na lista */
+	dataFieldText?: string;
+	/** Propriedade do objeto de dados que representa o ID do item na lista para controle */
+	dataFieldId?: string;
+	/** Indice do item ativo na lista */
+	activeIndex?: number | undefined;
+	/** Evento gerado quando o mouse está sobre um item */
+	onItemEnter?: (event: React.MouseEvent, data: any) => void;
+	/** Evento gerado quando o mouse sai de um item */
+	onItemLeave?: (event: React.MouseEvent, data: any) => void;
+	/** Permite costumizar o style da lista */
+	style?: React.CSSProperties;
+	/** Id da lista */
+	id?: string;
+	/** Fonte de dados a ser usado pela lista (V1 ou V2) */
+	dataSource?: IArchbaseDataSourceBase<T>;
+	/** Filtro a ser aplicado na lista */
+	filter?: string;
+	/** Function a ser aplicada na lista para filtrar os itens */
+	onFilter?: (record: any) => boolean;
+	/** Definições do componente customizado a ser renderizado para um Item da lista */
+	component?: ComponentDefinition;
+	/** Somente componentes <ArchbaseListItem /> */
+	children?: React.ReactNode[];
+	/** Tipo de lista: ol,ul,div */
+	type?: 'ordered' | 'unordered' | 'none';
+	/** Incluir preenchimento à esquerda para compensar a lista do conteúdo principal */
+	withPadding?: boolean;
+	/** Tamanho da fonte do tema ou número para definir o valor */
+	size?: string | number | undefined;
+	/** Ícone que deve substituir o ponto do item da lista */
+	icon?: React.ReactNode;
+	/** Imagem ou source de uma imagem para mostrar no item da lista */
+	image?: React.ReactNode | string;
+	/** Arredondamento da Imagem */
+	imageRadius?: string | number | undefined;
+	/** Altura da imagem */
+	imageHeight?: number | string;
+	/** Largura da Imagem */
+	imageWidth?: number | string;
+	/** Espaçamento entre os valores do item */
+	spacing?: string | number | undefined;
+	/** Centralizar itens com ícone */
+	center?: boolean;
+	/** Lista horizontal */
+	horizontal?: boolean;
+	/** force update list */
+	update?: number;
+	/** Estilo de lista */
+	listStyleType?: React.CSSProperties['listStyleType'];
+	onFocusEnter?: FocusEventHandler<HTMLDivElement> | undefined;
+	onFocusExit?: FocusEventHandler<HTMLDivElement> | undefined;
+}
+
+export function ArchbaseList<T, ID>(props: ArchbaseListProps<T, ID>) {
+	const theme = useMantineTheme();
+	const { colorScheme } = useMantineColorScheme();
+	const {
+		activeBackgroundColor = theme.colors[theme.primaryColor][colorScheme === 'dark' ? 5 : 5],
+		activeColor = 'white',
+		backgroundColor,
+		align,
+		color,
+		height = '20rem',
+		justify = 'flex-start',
+		onSelectListItem,
+		width,
+		withBorder = true,
+		borderRadius,
+		dataFieldText = 'text',
+		dataFieldId = 'id',
+		activeIndex: controlledActiveIndex,
+		onItemEnter,
+		onItemLeave,
+		style,
+		id,
+		dataSource,
+		filter,
+		horizontal = false,
+		onFilter,
+		children,
+		withPadding = false,
+		listStyleType = '',
+		center = false,
+		spacing = 'md',
+		type = 'none',
+		icon,
+		image,
+		imageRadius,
+		imageWidth,
+		imageHeight,
+		disabled,
+		update = 0,
+		onFocusEnter = () => {},
+		onFocusExit = () => {},
+	} = props;
+	// Estado interno para o índice ativo (modo não controlado)
+	const [activeIndex, setActiveIndex] = useState(controlledActiveIndex || -1);
+	const [updateCounter, setUpdateCounter] = useState(0);
+	const [rebuildedChildrens, setRebuildedChildrens] = useState<ReactNode[]>([]);
+	const classes = {
+		root: {
+			listStyleType,
+			color: colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+			margin: 0,
+			paddingLeft: withPadding ? theme.spacing.xl : 0,
+			listStylePosition: 'inside',
+			flexDirection: horizontal ? 'row' : 'column',
+			display: horizontal ? 'flex' : 'inherit',
+			width: '100%',
+			height: height,
+			overflowY: 'auto',
+			...style,
+		},
+	} as const;
+
+	const [currentFilter, setCurrentFilter] = useState(filter);
+	const [idList] = useState(id);
+
+	// V1/V2 Compatibility Pattern
+	const v1v2Compatibility = useArchbaseV1V2Compatibility<T>(
+		'ArchbaseList',
+		dataSource
+	);
+	const forceUpdate = useForceUpdate();
+
+	// Efeito para atualizar o índice ativo quando a propriedade controlledActiveIndex muda
+	useEffect(() => {
+		if (controlledActiveIndex !== undefined) {
+			setActiveIndex(controlledActiveIndex);
+		}
+	}, [controlledActiveIndex]);
+
+	// Efeito para atualizar o índice ativo com base na fonte de dados
+	useEffect(() => {
+		const dataSourceListener = (event: DataSourceEvent<T>) => {
+			if (
+				event.type === DataSourceEventNames.afterScroll ||
+				event.type === DataSourceEventNames.fieldChanged ||
+				event.type === DataSourceEventNames.dataChanged ||
+				event.type === DataSourceEventNames.afterRemove ||
+				event.type === DataSourceEventNames.recordChanged
+			) {
+				// Obtenha o índice ativo do dataSource
+				const dataSourceActiveIndex = dataSource!.getCurrentIndex();
+
+				// Atualize o índice ativo do componente apenas se for diferente
+				if (activeIndex !== dataSourceActiveIndex) {
+					setActiveIndex(dataSourceActiveIndex);
+
+					// Chame a função de retorno de chamada (callback) se estiver definida (modo controlado)
+					if (onSelectListItem) {
+						onSelectListItem(dataSourceActiveIndex, dataSource?.getCurrentRecord());
+					}
+				} else {
+					setUpdateCounter((prev) => prev + 1);
+					// Force update for V1 DataSource
+					if (!v1v2Compatibility.isDataSourceV2) {
+						forceUpdate();
+					}
+				}
+			}
+		};
+
+		// Adicione o ouvinte da fonte de dados no momento da montagem
+		if (dataSource) {
+			dataSource!.addListener(dataSourceListener);
+		}
+
+		// Retire o ouvinte da fonte de dados no momento da desmontagem
+		return () => {
+			if (dataSource) {
+				dataSource.removeListener(dataSourceListener);
+			}
+		};
+	}, [dataSource, activeIndex, onSelectListItem, forceUpdate, v1v2Compatibility.isDataSourceV2]);
+
+	useEffect(() => {
+		setCurrentFilter(filter);
+	}, [filter]);
+
+	// Função para lidar com a seleção de um item
+	const handleSelectItem = (index: number, data: T) => {
+		// Atualize o índice ativo no estado interno (modo não controlado)
+		if (controlledActiveIndex === undefined) {
+			setActiveIndex(index);
+		}
+
+		// Chame a função de retorno de chamada (callback) se estiver definida (modo controlado)
+		if (onSelectListItem) {
+			onSelectListItem(index, data);
+		}
+	};
+
+	useEffect(() => {
+		// Atualize o índice da fonte de dados usando gotoRecord
+		if (dataSource && dataSource instanceof ArchbaseDataSource && activeIndex >= 0) {
+			if (dataSource.getCurrentIndex() !== activeIndex && !dataSource.isEmpty()) {
+				dataSource.gotoRecord(activeIndex);
+			}
+		}
+	}, [activeIndex]);
+
+	const handleKeyDown = (event) => {
+		const keyActions = {
+			38: () => handleArrowUp(),
+			37: () => handleArrowLeft(),
+			40: () => handleArrowDown(),
+			39: () => handleArrowRight(),
+			33: () => handlePageUp(),
+			34: () => handlePageDown(),
+			36: () => handleHome(),
+			35: () => handleEnd(),
+		};
+		if (activeIndex >= 0 && rebuildedChildrens.length > 0) {
+			const action = keyActions[event.keyCode];
+			if (action) {
+				event.preventDefault();
+				action();
+			}
+		}
+	};
+
+	const handleArrowUp = () => {
+		const index = activeIndex;
+		if (index - 1 >= 0) {
+			handleSelectItem(index - 1, getRecordDataFromChildren(index - 1));
+		}
+	};
+
+	const handleArrowLeft = () => {
+		handleArrowUp();
+	};
+
+	const handleArrowDown = () => {
+		const index = activeIndex;
+		if (index + 1 < rebuildedChildrens.length) {
+			handleSelectItem(index + 1, getRecordDataFromChildren(index + 1));
+		}
+	};
+
+	const handleArrowRight = () => {
+		handleArrowDown();
+	};
+
+	const handlePageUp = () => {
+		const index = Math.max(activeIndex - 5, 0);
+		handleSelectItem(index, getRecordDataFromChildren(index));
+	};
+
+	const handlePageDown = () => {
+		const index = Math.min(activeIndex + 5, rebuildedChildrens.length - 1);
+		handleSelectItem(index, getRecordDataFromChildren(index));
+	};
+
+	const handleHome = () => {
+		handleSelectItem(0, getRecordDataFromChildren(0));
+	};
+
+	const handleEnd = () => {
+		const index = rebuildedChildrens.length - 1;
+		handleSelectItem(index, getRecordDataFromChildren(index));
+	};
+
+	const buildChildrensFromDataSource = (dataSource: IArchbaseDataSourceBase<T>) => {
+		const sourceData = dataSource.browseRecords();
+		return sourceData.map((record: any, index: number) => {
+			if (!record) {
+				return null;
+			}
+			let itemIsValid = true;
+			if (currentFilter && dataFieldText) {
+				if (ArchbaseObjectHelper.getNestedProperty(record, dataFieldText)) {
+					if (!ArchbaseObjectHelper.getNestedProperty(record, dataFieldText).includes(currentFilter)) {
+						itemIsValid = false;
+					}
+				}
+			}
+			if (onFilter) {
+				itemIsValid = onFilter(record);
+			}
+
+			if (itemIsValid) {
+				let active = record.active === undefined ? false : record.active;
+				if (activeIndex >= 0) {
+					active = false;
+					if (activeIndex === index) {
+						active = true;
+					}
+				}
+				const { component, id, dataSource, ...rest } = props;
+				if (component) {
+					const DynamicComponent = component.type;
+					let compProps = {};
+					if (component.props) {
+						compProps = component.props;
+					}
+
+					let newId = ArchbaseObjectHelper.getNestedProperty(record, dataFieldId);
+					if (!newId) {
+						newId = `${idList}_${index}`;
+					}
+
+					const newKey = `${idList}_${index}`;
+
+					return (
+						<DynamicComponent
+							key={newKey}
+							id={newId}
+							active={active}
+							index={index}
+							dataSource={dataSource}
+							recordData={record}
+							disabled={record.disabled || disabled}
+							{...compProps}
+							{...rest}
+							{...component.props}
+						/>
+					);
+				} else {
+					let newId = ArchbaseObjectHelper.getNestedProperty(record, dataFieldId);
+					if (!newId) {
+						newId = `${idList}_${index}`;
+					}
+					const newKey = `${idList}_${index}`;
+					return (
+						<ArchbaseListItem
+							key={newKey}
+							disabled={record.disabled || disabled}
+							id={newId}
+							index={index}
+							active={active}
+							align={record.align}
+							justify={record.justify === undefined ? justify : record.justify}
+							activeBackgroundColor={
+								record.activeBackColor === undefined ? activeBackgroundColor : record.activeBackColor
+							}
+							activeColor={record.activeColor === undefined ? activeColor : record.activeColor}
+							backgroundColor={record.backgroundColor === undefined ? backgroundColor : record.backgroundColor}
+							color={record.color === undefined ? color : record.color}
+							imageRadius={imageRadius}
+							imageHeight={imageHeight}
+							imageWidth={imageWidth}
+							icon={record.icon ? record.icon : icon}
+							image={image}
+							spacing={spacing}
+							caption={ArchbaseObjectHelper.getNestedProperty(record, dataFieldText)}
+							withBorder={record.withBorder === undefined ? withBorder : record.withBorder}
+							visible={true}
+							recordData={record}
+						/>
+					);
+				}
+			}
+			return null;
+		});
+	};
+
+	const getRecordDataFromChildren = (index) => {
+		let result;
+		rebuildedChildrens.forEach((item: any) => {
+			if (item.props.index === index) {
+				result = item.props.recordData;
+			}
+		});
+		return result;
+	};
+
+	const rebuildChildrens = (): ReactNode[] => {
+		return React.Children.toArray(children).map((child: any, index: number) => {
+			if (child.props.visible)
+				if (child.type && child.type.componentName !== 'ArchbaseListItem') {
+					throw new ArchbaseError(
+						'Apenas componentes do tipo ArchbaseListItem podem ser usados como filhos de ArchbaseList.',
+					);
+				}
+			if (!child.id) {
+				throw new ArchbaseError('Todos os itens da lista devem conter um ID.');
+			}
+			let active: boolean = child.active;
+			if (activeIndex >= 0) {
+				active = false;
+				if (activeIndex === index) {
+					active = true;
+				}
+			}
+			return (
+				<ArchbaseListItem
+					key={child.id}
+					disabled={child.disabled || disabled}
+					id={child.id}
+					index={index}
+					active={active}
+					align={align}
+					justify={child.justify === undefined ? justify : child.justify}
+					activeBackgroundColor={child.activeBackColor === undefined ? activeBackgroundColor : child.activeBackColor}
+					activeColor={child.activeColor === undefined ? activeColor : child.activeColor}
+					backgroundColor={child.backgroundColor === undefined ? backgroundColor : child.backgroundColor}
+					color={child.color === undefined ? color : child.color}
+					imageRadius={child.imageRadius ? child.imageRadius : imageRadius}
+					imageHeight={child.imageHeight ? child.imageHeight : imageHeight}
+					imageWidth={child.imageWidth ? child.imageWidth : imageWidth}
+					icon={child.icon ? child.icon : icon}
+					image={child.image ? child.image : image}
+					spacing={child.spacing ? child.spacing : spacing}
+					caption={child.caption}
+					withBorder={child.withBorder === undefined ? withBorder : child.withBorder}
+					visible={child.visible}
+				>
+					{child.children}
+				</ArchbaseListItem>
+			);
+		});
+	};
+
+	useEffect(() => {
+		if (dataSource) {
+			const newChildrens = buildChildrensFromDataSource(dataSource);
+			setRebuildedChildrens(newChildrens);
+			// Force update for V1 DataSource on data changes
+			if (!v1v2Compatibility.isDataSourceV2) {
+				forceUpdate();
+			}
+		} else if (children) {
+			const newChildrens = rebuildChildrens();
+			setRebuildedChildrens(newChildrens);
+		} else {
+			setRebuildedChildrens([]);
+		}
+	}, [updateCounter, activeIndex, (dataSource as any)?.lastDataChangedAt, (dataSource as any)?.lastDataBrowsingOn, children, forceUpdate, v1v2Compatibility.isDataSourceV2]);
+
+	return (
+		<Paper
+			id={idList}
+			tabIndex={-1}
+			withBorder={withBorder}
+			radius={borderRadius}
+			onKeyDown={handleKeyDown}
+			onFocus={onFocusEnter}
+			onBlur={onFocusExit}
+			w={width}
+		>
+			<Box<any>
+				component={type === 'unordered' ? 'ul' : type === 'ordered' ? 'ol' : 'div'}
+				style={classes.root}
+				tabIndex={-1}
+			>
+				<ArchbaseListProvider
+					value={{
+						dataSource,
+						ownerId: id,
+						handleSelectItem,
+						activeBackgroundColor,
+						activeColor,
+						type,
+						onItemEnter,
+						onItemLeave,
+						align,
+						disabled,
+					}}
+				>
+					{rebuildedChildrens}
+				</ArchbaseListProvider>
+			</Box>
+		</Paper>
+	);
+}
+
+ArchbaseList.displayName = 'ArchbaseList';

package/src/list/ArchbaseListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseListItem.d.ts","sourceRoot":"","sources":["ArchbaseListItem.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,SAAS,EAAiC,MAAM,OAAO,CAAC;AAGxE,MAAM,WAAW,qBAAqB,CAAC,CAAC,EAAE,EAAE;IAC3C,kDAAkD;IAClD,MAAM,EAAE,OAAO,CAAC;IAChB,2BAA2B;IAC3B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,2CAA2C;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4CAA4C;IAC5C,QAAQ,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iBAAiB;IACjB,EAAE,EAAE,GAAG,CAAC;IACR,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC1C,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,2DAA2D;IAC3D,OAAO,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;IACtF,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC3C,sCAAsC;IACtC,UAAU,CAAC,EAAE,CAAC,CAAC;IACf,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACtC;AAED,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAAE,EAAE,EACvC,MAAM,EACN,qBAAqB,EACrB,WAAW,EAEX,eAAe,EACf,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,EAAE,EACF,KAAK,EACL,KAAK,EACL,WAAW,EACX,WAAW,EACX,UAAU,EACV,OAAsB,EACtB,QAAQ,EACR,UAAU,EACV,OAAc,GACd,EAAE,qBAAqB,CAAC,CAAC,EAAE,EAAE,CAAC,2CA0E9B;yBA9Fe,gBAAgB"}