@archbase/components 3.0.0

package/src/editors/ArchbaseSelect.tsx

@@ -0,0 +1,550 @@
+import { ComboboxItem, ComboboxLikeRenderOptionInput, CSSProperties, MantineSize, MantineStyleProp, MantineTheme, Select, SelectProps, SelectStylesNames } from '@mantine/core'
+import { useDebouncedState, useUncontrolled } from '@mantine/hooks'
+import { uniqueId } from 'lodash'
+import React, {
+  FocusEventHandler,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react'
+import { ArchbaseDataSource, DataSourceEvent, DataSourceEventNames, IArchbaseDataSourceBase } from '@archbase/data'
+import { useArchbaseDidUpdate } from '@archbase/data'
+import { useArchbaseV1V2Compatibility } from '@archbase/data'
+import { useForceUpdate } from '@mantine/hooks'
+import { useValidationErrors } from '@archbase/core'
+
+
+export interface SelectItem extends ComboboxItem {
+  selected?: boolean
+  group?: string
+  [key: string]: any
+}
+
+export interface ArchbaseSelectProps<T, ID, O> {
+  /** Permite ou não delecionar um item */
+  allowDeselect?: boolean
+  /** Indicador se permite limpar o select */
+  clearable?: boolean
+  /** Fonte de dados onde será atribuido o item selecionado (V1 ou V2) */
+  dataSource?: IArchbaseDataSourceBase<T>
+  /** Campo onde deverá ser atribuido o item selecionado na fonte de dados */
+  dataField?: string
+  /** Tempo de espero antes de realizar a busca */
+  debounceTime?: number
+  /** Indicador se o select está desabilitado */
+  disabled?: boolean
+  /** Indicador se o select é somente leitura. Obs: usado em conjunto com o status da fonte de dados */
+  readOnly?: boolean
+  /** Estilo do select */
+  style?: MantineStyleProp
+  /** Texto explicativo do select */
+  placeholder?: string
+  /** Título do select */
+  label?: string
+  /** Descrição do select */
+  description?: string
+  /** Último erro ocorrido no select */
+  error?: string
+  /** Permite pesquisar no select */
+  searchable?: boolean
+  /** Icon a esquerda do select */
+  icon?: ReactNode
+  /** Largura do icone a esquerda do select */
+  iconWidth?: MantineSize
+  /** Valor de entrada controlado */
+  value?: any
+  /** Valor padrão de entrada não controlado */
+  defaultValue?: any
+  /** Função com base em quais itens no menu suspenso são filtrados */
+  filter?(value: string, item: any): boolean
+  /** Tamanho de entrada */
+  size?: MantineSize
+  /** Estado aberto do menu suspenso inicial */
+  initiallyOpened?: boolean
+  /** Alterar renderizador de item */
+  itemComponent?: React.FC<any>
+  /** Largura do select */
+  width?: string | number
+  /** Estado do dropdown controlado*/
+  dropdownOpened?: boolean;
+  /** Chamado quando o menu suspenso é aberto */
+  onDropdownOpen?(): void
+  /** Chamado quando o menu suspenso é aberto */
+  onDropdownClose?(): void
+  /** Limite a quantidade de itens exibidos por vez para seleção pesquisável */
+  limit?: number
+  /** Rótulo nada encontrado */
+  nothingFound?: React.ReactNode
+  /** Índice z dropdown */
+  zIndex?: React.CSSProperties['zIndex']
+  /** Comportamento de posicionamento dropdown */
+  dropdownPosition?: 'bottom' | 'top' | 'flip'
+  /** Evento quando um valor é selecionado */
+  onSelectValue?: (value: O, origin: any) => void
+  /** Evento de click */
+  onClick?: React.MouseEventHandler<HTMLInputElement>
+  /** Evento quando o foco sai do select */
+  onFocusExit?: (event: React.FocusEvent<HTMLInputElement>) => void
+  /** Evento quando o select recebe o foco */
+  onFocusEnter?: (event: React.FocusEvent<HTMLInputElement>) => void
+  /** Opções de seleção iniciais */
+  initialOptions?: O[]
+  /** Function que retorna o label de uma opção */
+  getOptionLabel: (option: O) => string
+  /** Function que retorna o valor de uma opção */
+  getOptionValue: (option: O) => string
+  /** Coleção de ArchbaseSelectItem[] que representam as opções do select */
+  children?: ReactNode | ReactNode[]
+  /** Indica se o select tem o preenchimento obrigatório */
+  required?: boolean
+  /** Referência para o componente interno */
+  innerRef?: React.RefObject<HTMLInputElement> | undefined
+  /** Selecione os dados usados ​​para renderizar itens no menu suspenso */
+  options?: ReadonlyArray<string | SelectItem> | ArchbaseDataSource<any, any>
+  optionsLabelField?: string
+  customGetDataSourceFieldValue?: () => any
+  customSetDataSourceFieldValue?: (value: any) => void
+  classNames?: Partial<Record<SelectStylesNames, string>> | ((theme: MantineTheme, props: SelectProps, ctx: unknown) => Partial<Record<SelectStylesNames, string>>)
+  styles?: Partial<Record<SelectStylesNames, CSSProperties>> | ((theme: MantineTheme, props: SelectProps, ctx: unknown) => Partial<Record<SelectStylesNames, CSSProperties>>)
+  /** Converte o valor antes de atribuir ao field do registro atual no datasource
+   * Por exemplo: (obj) => obj.id para armazenar apenas o ID de um objeto
+   */
+  converter?: (value: O) => any
+  /** Function que busca o valor original antes de converter pelo valor de retorno do converter
+   * Por exemplo: (id) => fetchObjectById(id) para converter ID de volta ao objeto
+   */
+  getConvertedOption?: (value: any) => Promise<O>
+}
+
+function buildGroupOptions(
+  options,
+) {
+  let uniqueGroups: [] = options.map(item => item.group).filter((value, index, array) => array.indexOf(value) === index);
+  let newOptions: any = []
+  uniqueGroups.forEach(groupName => {
+    const newOption = {
+      group: groupName,
+      items: options.filter(item => item.group === groupName).sort((a, b) => a.label.localeCompare(b.label)).map((item) => {
+        return {
+          value: item.value,
+          label: item.label,
+          origin: item.origin !== undefined ? item.origin : item.value
+        }
+      })
+    }
+    newOptions.push(newOption)
+  })
+  return newOptions
+}
+
+function buildOptions<O>(
+  options?: ReadonlyArray<string | SelectItem> | ArchbaseDataSource<any, any>,
+  initialOptions?: O[],
+  children?: ReactNode | ReactNode[] | undefined,
+  getOptionLabel?: (option: O) => string,
+  getOptionValue?: (option: O) => any,
+  optionsLabelField?: string
+): any {
+  if (!initialOptions && !children && !options) {
+    return []
+  }
+  if (
+    options &&
+    options instanceof ArchbaseDataSource &&
+    getOptionLabel &&
+    getOptionValue &&
+    optionsLabelField
+  ) {
+    const ds = options as ArchbaseDataSource<any, any>
+    ds.first()
+    const result: SelectItem[] = []
+    while (!ds.isEOF()) {
+      result.push({
+        label: ds.getFieldValue(optionsLabelField),
+        value: getOptionValue!(ds.getCurrentRecord()),
+        origin: ds.getCurrentRecord(),
+        key: uniqueId('select')
+      })
+      ds.next()
+    }
+    ds.first()
+    return result
+  }
+  if (options && Array.isArray(options) && options.length > 0 && options[0].group) {
+    return buildGroupOptions(options)
+  }
+  if (options) {
+    return options
+  }
+  if (children) {
+    return React.Children.toArray(children).map((item: any) => {
+      const { label, value, origin, ...others } = item.props
+      return {
+        label: label,
+        value: value,
+        origin: origin !== undefined ? origin : value,
+        key: uniqueId('select'),
+        ...others
+      }
+    })
+  }
+  return initialOptions!.map((item: O) => {
+    return {
+      label: getOptionLabel!(item),
+      value: getOptionValue!(item),
+      origin: item,
+      key: uniqueId('select')
+    }
+  })
+}
+
+export function ArchbaseSelect<T, ID, O>({
+  allowDeselect = true,
+  clearable = true,
+  dataSource,
+  dataField,
+  disabled = false,
+  debounceTime = 500,
+  readOnly = false,
+  placeholder,
+  initialOptions = [],
+  searchable = false,
+  label,
+  description,
+  error,
+  icon,
+  iconWidth,
+  required,
+  width,
+  getOptionLabel,
+  getOptionValue,
+  optionsLabelField,
+  onFocusEnter,
+  onFocusExit,
+  onSelectValue,
+  onClick,
+  value,
+  defaultValue,
+  filter,
+  size,
+  initiallyOpened,
+  itemComponent: ItemComponent,
+  dropdownOpened,
+  onDropdownOpen,
+  onDropdownClose,
+  limit = Infinity,
+  nothingFound,
+  zIndex,
+  style = {},
+  dropdownPosition,
+  children,
+  innerRef,
+  options,
+  customGetDataSourceFieldValue,
+  customSetDataSourceFieldValue,
+  classNames,
+  styles,
+  converter,
+  getConvertedOption
+}: ArchbaseSelectProps<T, ID, O>) {
+  const forceUpdate = useForceUpdate();
+
+  // 🔄 MIGRAÇÃO V1/V2: Hook de compatibilidade
+  const v1v2Compatibility = useArchbaseV1V2Compatibility<any>(
+    'ArchbaseSelect',
+    dataSource,
+    dataField,
+    null
+  );
+
+  // 🔄 MIGRAÇÃO V1/V2: Debug info para desenvolvimento
+  if (process.env.NODE_ENV === 'development' && dataSource) {
+  }
+
+  const innerComponentRef = useRef<any>(null)
+  const [selectedValue, setSelectedValue] = useState<any>(value)
+  const [queryValue, setQueryValue] = useDebouncedState('', debounceTime)
+  const [internalError, setInternalError] = useState<string | undefined>(error)
+  const [updateCounter, setUpdateCounter] = useState(0)
+  const sRef = useRef<any>(null)
+  const [currentLimit, setCurrentLimit] = useState(limit);
+
+  // 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);
+
+  const currentOptions: any[] = useMemo(() => {
+    return buildOptions<O>(
+      options,
+      initialOptions,
+      children,
+      getOptionLabel,
+      getOptionValue,
+      optionsLabelField
+    )
+  }, [
+    updateCounter,
+    options,
+    initialOptions,
+    children,
+    getOptionLabel,
+    getOptionValue,
+    optionsLabelField
+  ])
+
+  const handleConverter = (value) => {
+    if (converter && value) {
+      return converter(value)
+    }
+    return value
+  }
+
+  const handleChange = (vl: string | null, option: SelectItem) => {
+    const value = option && option.origin ? option.origin : vl;
+
+    // ✅ 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);
+    }
+
+    setSelectedValue((_prev) => value);
+
+    // 🔄 MIGRAÇÃO V1/V2: Usar handleValueChange do padrão de compatibilidade
+    if (dataSource && dataField) {
+      const convertedValue = handleConverter(value);
+      if (customSetDataSourceFieldValue) {
+        customSetDataSourceFieldValue(convertedValue);
+      } else {
+        v1v2Compatibility.handleValueChange(convertedValue);
+      }
+    }
+
+    if (onSelectValue) {
+      onSelectValue(value, option ? option.origin : undefined);
+    }
+  };
+
+  const handleOnFocusExit = (event) => {
+    if (onFocusExit) {
+      onFocusExit(event)
+    }
+  }
+
+  const handleOnFocusEnter = (event) => {
+    if (onFocusEnter) {
+      onFocusEnter(event)
+    }
+  }
+
+  const handleScrollPositionChange = (_position: { x: number; y: number }): void => {
+    if (sRef && sRef.current) {
+      if (sRef.current.scrollTop === sRef.current.scrollHeight - sRef.current.offsetHeight) {
+        if (limit !== Infinity) {
+          setCurrentLimit(prevLimit => prevLimit + limit);
+        }
+      }
+    }
+  }
+
+  const handleItemComponent = ({ option, checked }) => {
+    if (!ItemComponent) {
+      return undefined
+    }
+    return <ItemComponent {...option} checked={checked} />
+  }
+
+  const renderOption = ItemComponent
+    ? {
+      renderOption: ({ option, checked }: ComboboxLikeRenderOptionInput<ComboboxItem>) =>
+        handleItemComponent({ option, checked })
+    }
+    : {}
+
+  // ❌ REMOVIDO: Não limpar erro automaticamente quando valor muda
+  // O erro deve ser limpo apenas quando o usuário EDITA o campo (no handleChange)
+  // useEffect(() => {
+  //   setInternalError(undefined)
+  // }, [selectedValue])
+
+  // ✅ 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 = async () => {
+    let initialValue: any = value
+    if (dataSource && dataField && !dataSource.isEmpty()) {
+      initialValue = customGetDataSourceFieldValue
+        ? customGetDataSourceFieldValue()
+        : dataSource.getFieldValue(dataField)
+      if (!initialValue) {
+        initialValue = ''
+      }
+    }
+
+    if (getConvertedOption && converter && initialValue) {
+      initialValue = await getConvertedOption(initialValue)
+    }
+
+    setSelectedValue(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
+      ) {
+        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);
+        setUpdateCounter((prevCounter) => prevCounter + 1)
+        // Força re-render para garantir que o erro seja exibido
+        if (!v1v2Compatibility.isDataSourceV2) {
+          forceUpdate();
+        }
+      }
+    }
+  }, [v1v2Compatibility.isDataSourceV2, dataSource, dataField, loadDataSourceFieldValue, forceUpdate, validationContext, fieldKey])
+
+  const dataSourceOptionsEvent = useCallback((event: DataSourceEvent<T>) => {
+    if (dataSource && dataField) {
+      if (event.type === DataSourceEventNames.dataChanged) {
+        setUpdateCounter((prevCounter) => prevCounter + 1)
+      }
+    }
+  }, [])
+
+  // 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 - nunca muda, então o listener permanece consistente
+  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)
+      }
+    }
+
+    if (options && options instanceof ArchbaseDataSource) {
+      ; (options as ArchbaseDataSource<T, ID>).addListener(dataSourceOptionsEvent)
+    }
+
+    return () => {
+      if (dataSource && dataField) {
+        const hasFieldListener = typeof (dataSource as any).addFieldChangeListener === 'function'
+        dataSource.removeListener(stableDataSourceEvent)
+        if (hasFieldListener) {
+          ;(dataSource as any).removeFieldChangeListener(dataField, fieldChangedListener)
+        }
+      }
+
+      if (options && options instanceof ArchbaseDataSource) {
+        ; (options as ArchbaseDataSource<T, ID>).removeListener(dataSourceOptionsEvent)
+      }
+    }
+  }, [dataSource, dataField, stableDataSourceEvent, fieldChangedListener])
+
+  useEffect(() => {
+    if (value !== undefined) {
+      setSelectedValue(value);
+    }
+  }, [value]);
+
+  useArchbaseDidUpdate(() => {
+    loadDataSourceFieldValue()
+  }, [])
+
+  const isReadOnly = () => {
+    // 🔄 MIGRAÇÃO V1/V2: Usar padrão de compatibilidade para isReadOnly
+    return readOnly || v1v2Compatibility.isReadOnly;
+  };
+
+  // Erro a ser exibido: local ou do contexto
+  const displayError = internalError || contextError;
+
+  return (
+    <Select
+      classNames={classNames}
+      style={style}
+      styles={styles}
+      allowDeselect={allowDeselect}
+      clearable={clearable}
+      disabled={disabled}
+      description={description}
+      placeholder={placeholder}
+      searchable={searchable}
+      maxDropdownHeight={280}
+      ref={innerRef || innerComponentRef}
+      label={label}
+      error={displayError}
+      data={currentOptions}
+      size={size!}
+      leftSection={icon}
+      width={width}
+      leftSectionWidth={iconWidth}
+      readOnly={isReadOnly()}
+      required={required}
+      onChange={(value, option) => handleChange(value, option as SelectItem)}
+      onClick={onClick}
+      onBlur={handleOnFocusExit}
+      onFocus={handleOnFocusEnter}
+      value={selectedValue !== undefined ? selectedValue : null}
+      onSearchChange={setQueryValue}
+      searchValue={selectedValue && getOptionLabel ? getOptionLabel(selectedValue) : queryValue}
+      defaultValue={selectedValue && getOptionLabel ? getOptionLabel(selectedValue) : defaultValue || ''}
+      // filter={filter}
+      defaultDropdownOpened={initiallyOpened}
+      dropdownOpened={dropdownOpened}
+      onDropdownOpen={onDropdownOpen}
+      onDropdownClose={onDropdownClose}
+      limit={currentLimit}
+      nothingFoundMessage={nothingFound}
+      scrollAreaProps={{
+        viewportProps: { tabIndex: -1 },
+        viewportRef: sRef,
+        onScrollPositionChange: handleScrollPositionChange
+      }}
+      {...renderOption}
+    />
+  )
+}
+
+ArchbaseSelect.displayName = 'ArchbaseSelect'

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseSelectItem.d.ts","sourceRoot":"","sources":["ArchbaseSelectItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,uBAAuB,CAAC,CAAC;IACzC,wCAAwC;IACxC,KAAK,EAAE,SAAS,CAAC;IACjB,oBAAoB;IACpB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB;AAED,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,OAEvE;yBAFe,kBAAkB"}

package/src/editors/ArchbaseSelectItem.tsx

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+
+export interface ArchbaseSelectItemProps<T> {
+	/** Texto a ser apresentado no select */
+	label: ReactNode;
+	/** Valor do item */
+	value?: T;
+	/** Indicador se o item está desabilitado */
+	disabled?: boolean;
+	/** Parâmetros adicionais */
+	[key: string]: any;
+}
+
+export function ArchbaseSelectItem<T>(_props: ArchbaseSelectItemProps<T>) {
+	return null;
+}
+
+ArchbaseSelectItem.displayName = 'ArchbaseSelectItem';

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseSwitch.d.ts","sourceRoot":"","sources":["ArchbaseSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAU,MAAM,eAAe,CAAC;AAElE,OAAO,KAAK,EAAE,aAAa,EAAqB,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAmB,MAAM,gBAAgB,CAAC;AAK1E,MAAM,WAAW,mBAAmB,CAAC,CAAC,EAAE,EAAE;IACzC,2DAA2D;IAC3D,UAAU,CAAC,EAAE,kBAAkB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACvC,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qGAAqG;IACrG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,yCAAyC;IACzC,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,4DAA4D;IAC5D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kFAAkF;IAClF,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,mCAAmC;IACnC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,qGAAqG;IACrG,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACrC,6CAA6C;IAC7C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACpC,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAClE,2CAA2C;IAC3C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnE,iDAAiD;IACjD,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,cAAc,CAAC,CAAC,EAAE,EAAE,EAAE,EACrC,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,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,WAAsB,EACtB,YAAuB,EACvB,aAAwB,EACxB,QAAQ,GACR,EAAE,mBAAmB,CAAC,CAAC,EAAE,EAAE,CAAC,2CAwI5B"}