import { PoTreeViewItem } from './po-tree-view-item/po-tree-view-item.interface'; /** * @description * * O componente fornece um modelo de visualização em árvore, possibilitando a exibição de informações de maneira * hierárquica com suporte a múltiplos níveis (configurável via `p-max-level`). * * O componente permite: * - Navegação completa por teclado seguindo o padrão WAI-ARIA TreeView; * - Expansão e recolhimento de itens agrupadores; * - Seleção múltipla (checkbox) ou única (radio) dos itens; * - Exibição de ícones automáticos para agrupadores e itens finais; * - Estado desabilitado global ou individual por item; * - Execução de itens finais via clique ou teclado. * * #### Navegação por teclado * * | Tecla | Descrição | * |-----------------------|-----------------------------------------------------------------------------------------------------------| * | **Tab** | Entra no componente posicionando o foco no primeiro nó ativo. Ao pressionar novamente, sai do componente. | * | **ArrowDown** | Move o foco para o próximo nó visível. | * | **ArrowUp** | Move o foco para o nó visível anterior. | * | **ArrowRight** | Se colapsado, expande o nó. Se expandido, move o foco para o nó filho. | * | **ArrowLeft** | Se expandido, recolhe o nó. Se filho, move o foco para o nó pai. | * | **Home** | Move o foco para o primeiro nó visível. | * | **End** | Move o foco para o último nó visível. | * | **Enter / Space** | Com `p-selectable`: alterna a seleção do item. Sem `p-selectable`: executa o item final. | * | **Caractere** | Move o foco para o próximo nó cujo label inicia com o caractere pressionado (busca cíclica). | * * #### Tokens customizáveis * * É possível alterar o estilo do componente usando os seguintes tokens (CSS): * * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization). * * | Propriedade | Descrição | Valor Padrão | * |----------------------------------------|-------------------------------------------------------|-------------------------------------------------| * | **Default** | | | * | `--background-color` | Cor de background do item | `var(--color-neutral-light-00)` | * | `--divider-color` | Cor do divider dos agrupadores de nível 0 | `var(--color-neutral-mid-40)` | * | `--font-family` | Família tipográfica | `var(--font-family-theme)` | * | `--font-size` | Tamanho da fonte | `var(--font-size-default)` | * | `--line-height` | Altura da linha | `var(--line-height-md)` | * | `--color` | Cor padrão do item | `var(--color-action-default)` | * | **Hover** | | | * | `--color-hover` | Cor do item em hover | `var(--color-action-hover)` | * | **Pressed** | | | * | `--color-pressed` | Cor do item em pressed | `var(--color-action-pressed)` | * | **Disabled** | | | * | `--color-disabled` | Cor do item desabilitado | `var(--color-action-disabled)` | * | **Selected** | | | * | `--title-color` | Cor do label quando selecionado | `var(--color-action-focus)` | */ export declare class PoTreeViewBaseComponent { /** * @optional * * @description * * Define o tamanho dos componentes de formulário: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ readonly componentsSizeInput: import("@angular/core").InputSignal; /** * @optional * * @description * * Desabilita o componente inteiro. * * Quando `true`, todos os itens do tree-view serão exibidos no estado desabilitado, * independentemente do valor individual da propriedade `disabled` de cada item. * * > O botão de expansão/recolhimento (arrow) permanece interativo mesmo quando o componente está desabilitado. * * @default `false` */ readonly disabled: import("@angular/core").InputSignalWithTransform; /** * Lista de itens do tipo `PoTreeViewItem` que será renderizada pelo componente. * * > Consulte a documentação de `PoTreeViewItem` para detalhes sobre as propriedades disponíveis em cada item. */ readonly inputedItems: import("@angular/core").InputSignal; /** * @optional * * @description * * Define o máximo de níveis para o tree-view. * * > O valor padrão é 4 * * @default 4 */ readonly maxLevel: import("@angular/core").InputSignalWithTransform; /** * @optional * * @description * * Remove a borda do container do componente. * * @default false */ readonly noBorder: import("@angular/core").InputSignalWithTransform; /** * @optional * * @description * * Habilita uma caixa de seleção para selecionar e/ou desmarcar um item da lista. * * > Quando habilitado, a propriedade `showIcon` dos itens não será aplicada. * * @default false */ readonly selectable: import("@angular/core").InputSignalWithTransform; /** * @optional * * @description * * Habilita a seleção para item único atráves de po-radio. * * @default false */ readonly singleSelect: import("@angular/core").InputSignalWithTransform; /** * @optional * * @description * * Ação que será disparada ao colapsar um item. * * > Como parâmetro o componente envia o item colapsado. */ readonly collapsed: import("@angular/core").OutputEmitterRef; /** * @optional * * @description * * Ação que será disparada ao expandir um item. * * > Como parâmetro o componente envia o item expandido. */ readonly expanded: import("@angular/core").OutputEmitterRef; /** * @optional * * @description * * Ação que será disparada ao selecionar um item. * * > Como parâmetro o componente envia o item selecionado. */ readonly selected: import("@angular/core").OutputEmitterRef; /** * @optional * * @description * * Ação que será disparada ao desfazer a seleção de um item. * * > Como parâmetro o componente envia o item que foi desmarcado. */ readonly unselected: import("@angular/core").OutputEmitterRef; /** * @optional * * @description * * Ação que será disparada ao executar um item final (sem `subItems`). * * > Como parâmetro o componente envia o item executado. */ readonly activated: import("@angular/core").OutputEmitterRef; private _componentsSize; private _items; selectedValue: string | number; protected get componentsSize(): string; protected set items(value: Array); protected get items(): Array; constructor(); protected onThemeChange(): void; protected emitExpanded(treeViewItem: PoTreeViewItem): void; protected emitSelected(treeViewItem: PoTreeViewItem): void; protected emitActivated(treeViewItem: PoTreeViewItem): void; private selectSingleFinalItem; private setSingleFinalSelection; private setSingleSelectionByValue; private getExpandedState; private applyExpandedState; private getSelectedState; private applySelectedState; private getLastSelectedFinalItemValue; private addChildItemInParent; private addItem; private selectAllItems; private selectItemBySubItems; private getSelectableSubItems; private everyItemSelected; private expandParentItem; private getItemsByMaxLevel; private getItemsWithParentSelected; private updateItemsOnSelect; private applySizeBasedOnA11y; }