import { EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core'; import { Observable } from 'rxjs'; import { PoDateService } from '../../services/po-date/po-date.service'; import { PoLanguageService } from '../../services/po-language/po-language.service'; import { PoSearchFilterMode } from '../po-search/enums/po-search-filter-mode.enum'; import { PoTableAction } from './interfaces/po-table-action.interface'; import { PoTableColumnSort } from './interfaces/po-table-column-sort.interface'; import { PoTableColumn } from './interfaces/po-table-column.interface'; import { PoTableLiterals } from './interfaces/po-table-literals.interface'; import { PoTableResponseApi } from './interfaces/po-table-response-api.interface'; import { PoTableService } from './services/po-table.service'; export type QueryParamsType = string | number | boolean; export declare const poTableContainer: string[]; export declare const poTableContainerDefault = "border"; export declare const poTableParamDeleteApi = "id"; export declare const poTableLiteralsDefault: { en: PoTableLiterals; es: PoTableLiterals; pt: PoTableLiterals; ru: PoTableLiterals; }; /** * @description * * Este componente de tabela é utilizado para exibição de dados com diferentes tipos como por exemplo textos, data, horas e números com * formato personalizado. * * Também é possivel criar tabelas com ordenação de dados, linhas com detalhes, coluna para seleção de linhas, coluna com ações e também * carregamento por demanda através do botão **Carregar mais resultados**. * * > As linhas de detalhes podem também ser customizadas através do [`p-table-row-template`](/documentation/po-table-row-template). * * > As colunas podem ser customizadas através dos templates [`p-table-column-template`](/documentation/po-table-column-template) * e [`p-table-cell-template`](/documentation/po-table-cell-template). * * O componente permite gerenciar a exibição das colunas dinamicamente. Esta funcionalidade pode ser acessada através do ícone de engrenagem * no canto superior direito do cabeçalho da tabela. * * Caso a largura de todas as colunas forem definidas e o total ultrapassar o tamanho tabela, será exibido um *scroll* na horizontal para a * completa visualização dos dados. * * #### 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 Values** | | | * | `--font-family` | Família tipográfica usada | `var(--font-family-theme)` | * | `--background-color` | Cor de background | `var(--color-neutral-light-00)` | * | `--color` | Cor principal da table | `var(--color-neutral-dark-95)` | * | `--background-striped-color` | Cor do background quando striped | `var(--color-neutral-light-05)` | * | `--color-line` | Cor das linhas | `var(--color-neutral-mid-40)` | * | **Hover** | | | * | `--color-hover` | Cor principal no estado hover | `var(--color-action-hover)` | * | `--background-color-hover` | Cor de background no estado hover | `var(--color-brand-01-lighter)` | * | **Focused** | | | * | `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` | * | **Disabled** | | | * | `--color-disabled` | Cor principal no estado disabled | `var(--color-neutral-mid-40)` | * | **Headline** | | | * | `--background-color-headline`   | Cor do cabeçalho | `var(--color-neutral-light-10)` | * | `--font-weight-headline` | Peso da fonte do cabeçalho | `var(--font-weight-bold)` | * | **Selected** | | | * | `--background-color-selected`  | Cor de background no estado de selecionado | `var(--color-brand-01-lightest)` | * | **Actived** | | | * | `--color-actived` | Cor do texto no estado de selecionado | `var(--color-neutral-dark-90)` | * | `--background-color-actived` | Cor de background no estado de selecionado | `var(--color-brand-01-light)` | * */ export declare abstract class PoTableBaseComponent implements OnChanges, OnDestroy { private readonly poDate; private readonly poTableService; /** * @optional * * @description * * Permite que o gerenciador de colunas, responsável pela definição de quais colunas serão exibidas, seja escondido. * * @default `false` */ hideColumnsManager: boolean; /** * @optional * * @description * * Permite que as ações em lote, responsável por excluir e exibir a quantidade de itens, sejam escondidas. * * @default `true` */ hideBatchActions: boolean; /** * @optional * * @description * * Habilita ou desabilita a quebra automática de texto. Quando ativada, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * > Incompatível com `virtual-scroll`, que requer altura fixa nas linhas. * * @default `false` */ textWrap?: boolean; /** * @optional * * @description * * Permite que as ações para fixar uma coluna da tabela sejam escondidas. * * @default `false` */ set hideActionFixedColumns(hide: boolean); get hideActionFixedColumns(): boolean; /** * @optional * * @description * * Permite que o campo de pesquisa seja escondido. * * @default `true` */ hideTableSearch: boolean; /** * @optional * * @description * * Permite fechar um detalhe ou row template automaticamente, ao abrir outro item. * * @default `false` */ autoCollapse: boolean; /** * @optional * * @description * * Permite que seja adicionado o estado de carregamento no botão "Carregar mais resultados". * * @default `false` */ loadingShowMore: boolean; /** * @optional * * @description * * Habilita em todas as colunas a opção de ordenação de dados. Caso a coluna seja do tipo 'data' ou 'dateTime' a * mesma deve respeitar os tipos de entrada definidos para que sejam ordenadas. * * @default `false` */ sort: boolean; /** * @description * * Se verdadeiro, torna habilitado o botão "Carregar mais resultados". * * @default `false` */ showMoreDisabled: boolean; /** * @description * * Habilita ou desabilita o estilo listrado da tabela (`striped`). * > Recomendado para tabelas com maior número de dados, facilitando a sua visualização na tabela. * * @default `false` */ striped: boolean; /** * @description * * Esconde o *checkbox* para seleção de todas as linhas. * * > Sempre receberá *true* caso a seleção de apenas uma linha esteja ativa. * * @default `false` */ hideSelectAll: boolean; /** * @description * * Define que somente uma linha da tabela pode ser selecionada. * * > Esta definição não se aplica aos itens filhos, os mesmos possuem comportamento independente do item pai. */ singleSelect: boolean; /** * @description * * Permite selecionar um item da tabela clicando na linha. * * > Caso haja necessidade de selecionar o item apenas via radio ou checkbox, deve-se definir esta propriedade como `false`. * * @default `true` */ selectableEntireLine: boolean; /** * @optional * * @description * * Define que a coluna de ações ficará no lado direito da tabela. * * @default `false` */ actionRight: boolean; /** * @optional * * @description * * Define uma quantidade máxima de colunas que serão exibidas na tabela. * * Quando chegar no valor informado, as colunas que não estiverem selecionadas ficarão * desabilitadas e caso houver mais colunas visíveis do que o permitido, as excedentes * serão ignoradas por ordem de posição. */ maxColumns?: number; /** * @optional * * @description * * Define o modo de pesquisa utilizado no campo de busca, quando habilitado. * Valores definidos no enum: PoSearchFilterMode * > Obs: A pesquisa é realizada exclusivamente nos dados locais, ou seja, aqueles que foram * > renderizados na tabela. * * @default `startsWith` */ filterType: PoSearchFilterMode; /** * @optional * * @description * Evento executado quando todas as linhas são selecionadas por meio do *checkbox* que seleciona todas as linhas. */ allSelected: EventEmitter; /** * @optional * * @description * Evento executado quando a seleção das linhas é desmarcada por meio do *checkbox* que seleciona todas as linhas. */ allUnselected: EventEmitter; /** * @optional * * @description * * Evento executado ao colapsar uma linha do `po-table`. * * > Como parâmetro o componente envia o item colapsado. */ collapsed: EventEmitter; /** * @optional * * @description * * Evento executado ao expandir uma linha do `po-table`. * * > Como parâmetro o componente envia o item expandido. */ expanded: EventEmitter; /** * @optional * * @description * * Evento executado após o método de exclusão ser finalizado. * * ``` * * * ``` * * * > Como parâmetro o componente envia a lista atualizada, sem os itens excluídos. */ eventDelete: EventEmitter; /** * @optional * * @description * * Evento executado ao selecionar uma linha do `po-table`. */ selected: EventEmitter; /** * @optional * * @description * * Recebe uma ação de clique para o botão "Carregar mais resultados", caso nenhuma ação for definida o mesmo * não é visível. * * Recebe um objeto `{ column, type }` onde: * * - column (`PoTableColumn`): objeto da coluna que está ordenada. * - type (`PoTableColumnSortType`): tipo da ordenação. */ showMore: EventEmitter; /** * @optional * * @description * * Evento executado ao ordenar colunas da tabela. * * Recebe um objeto `{ column, type }` onde: * * - column (`PoTableColumn`): objeto da coluna que foi clicada/ordenada. * - type (`PoTableColumnSortType`): tipo da ordenação. */ sortBy: EventEmitter; /** * @optional * * @description * Evento executado ao desmarcar a seleção de uma linha do `po-table`. */ unselected: EventEmitter; /** * @optional * * @description * Evento disparado ao fechar o page slide do gerenciador de colunas após alterar as colunas visíveis. * * O componente envia como parâmetro um array de string com as colunas visíveis atualizadas. * Por exemplo: ["idCard", "name", "hireStatus", "age"]. */ changeVisibleColumns: EventEmitter; /** * @optional * * @description * Evento disparado ao alterar o estado de fixação de uma coluna no gerenciador de colunas. * * O componente envia como parâmetro um array de string com as propriedades das colunas fixas. * Por exemplo: ["name", "age"]. * * > Incompatível com `p-hide-action-fixed-columns`. Quando esta propriedade estiver ativa, o evento não será disparado. * * @example * * ```html * * * ``` */ changeFixedColumns: import("@angular/core").OutputEmitterRef; /** * @optional * * @description * Evento disparado ao clicar no botão de restaurar padrão no gerenciador de colunas. * * O componente envia como parâmetro um array de string com as colunas configuradas inicialmente. * Por exemplo: ["idCard", "name", "hireStatus", "age"]. */ columnRestoreManager: EventEmitter; allColumnsWidthPixels: boolean; columnMasterDetail: PoTableColumn; hasMainColumns: boolean; mainColumns: Array; selectAll: boolean; sortedColumn: { property: PoTableColumn; ascending: boolean; }; subtitleColumns: Array; page: number; pageSize: number; hasService?: boolean; initialColumns: Array; showBatchActions: boolean; itemsSelected: Array; paramsFilter: {}; filteredItems: Array; initialized: boolean; fixedLayout: boolean; private initialVisibleColumns; private _componentsSize?; private _initialComponentsSize?; private _spacing; private _initialSpacing?; private _filteredColumns; private _actions?; private _columns; private _container?; private _paramDelete; private _height?; private _hideDetail?; private _items; private _literals; private _loading?; private _selectable?; private readonly language; private _serviceApi; private _serviceDeleteApi; private poTableServiceSubscription; private sortStore; private _infiniteScrollDistance?; private _infiniteScroll?; private _draggable?; private _hideActionFixedColumns?; private _virtualScroll?; constructor(poDate: PoDateService, languageService: PoLanguageService, poTableService: PoTableService); /** * @optional * * @description * * Define o tamanho dos componentes de formulário no table: * - `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` */ set componentsSize(value: string); get componentsSize(): string; /** * @description * * Lista de itens da tabela. * > Se falso, será inicializado como um *array* vazio. */ set items(items: Array); get items(): Array; /** * @optional * * @description * * Lista das colunas da tabela, deve receber um *array* de objetos que implementam a interface `PoTableColumn`. * Por padrão receberá como valor a primeira coluna da lista de itens da tabela. * > Caso não encontre valor, a mensagem 'Nenhuma definição de colunas' será exibida. * */ set columns(columns: Array); get columns(): Array; /** * @optional * * @description * * Adiciona um contorno arredondado ao `po-table`, as opções são: * - `border`: com bordas/linhas. * - `shadow`: com sombras. * * @default `border` */ set container(value: string); get container(): string; /** * @optional * * @description * * Adiciona o parâmetro a ser enviado para a requisição de DELETE. * * É necessário a utilização da propriedade `p-service-delete` em conjunto. * * @default `id` */ set paramDeleteApi(value: string); get paramDeleteApi(): string; /** * @optional * * @description * * Define a altura da tabela em *pixels* e fixa o cabeçalho. * * Ao utilizar essa propriedade será inserido o `virtual-scroll` na tabela melhorando a performance. */ set height(height: number); get height(): number; /** * @optional * * @description * * Habilita a visualização da lista de detalhes de cada linha da coluna. * * @default `false` */ set hideDetail(hideDetail: boolean); get hideDetail(): boolean; /** * @optional * * @description * * Objeto com as literais usadas no `po-table`. * * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis: * * ``` * const customLiterals: PoTableLiterals = { * noColumns: 'Nenhuma definição de colunas', * noData: 'Nenhum dado encontrado', * noVisibleColumn: 'Nenhuma coluna visível', * noItem: 'Nenhum item selecionado', * oneItem: '1 item selecionado', * multipleItems: 'itens selecionados', * loadingData: 'Carregando', * loadMoreData: 'Carregar mais resultados', * seeCompleteSubtitle: 'Ver legenda completa', * completeSubtitle: 'Legenda completa', * columnsManager: 'Gerenciador de colunas', * bodyDelete: 'Deseja realmente excluir esse item?', * cancel: 'Cancelar', * delete: 'Excluir', * deleteSuccessful: 'Itens removidos com sucesso', * deleteApiError: 'Ocorreu um erro inesperado, tente novamente mais tarde!', * }; * ``` * * Ou passando apenas as literais que deseja customizar: * * ``` * const customLiterals: PoTableLiterals = { * noData: 'Sem dados' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do * [`PoI18nService`](/documentation/po-i18n) ou do browser. */ set literals(value: PoTableLiterals); get literals(): PoTableLiterals; /** * @optional * * @description * * Bloqueia a interação do usuário com os dados da _table_. * * @default `false` */ set loading(loading: boolean); get loading(): boolean; /** * @optional * * @description * * Define uma lista de ações. * * Quando houver apenas uma ação definida ela será exibida diretamente na coluna, caso contrário, o componente * se encarrega de agrupá-las exibindo o ícone [**an an-dots-three**](https://po-ui.io/icons) que listará as ações ao ser clicado. * * **A coluna de ações não será exibida quando:** * - a lista conter valores inválidos ou indefinidos. * - tenha uma única ação e a mesma não for visível. */ set actions(actions: Array); get actions(): Array; /** * @optional * * @description * * Permite a seleção de linhas na tabela e, caso a propriedade `p-single-select` esteja definida será possível * selecionar apenas uma única linha. * * **Importante:** * - As linhas de detalhe definidas em `PoTableDetail` possuem comportamento independente da linha mestre; * - Cada linha possui por padrão a propriedade dinâmica `$selected`, na qual é possível validar se a linha * está selecionada, por exemplo: `item.$selected` ou `item['$selected']`. * * @default `false` */ set selectable(value: boolean); get selectable(): boolean; /** * @optional * * @description * * Se verdadeiro, ativa a funcionalidade de scroll infinito para a tabela e o botão "Carregar Mais" deixará de ser exibido. Ao chegar no fim da tabela * executará a função `p-show-more`. * * **Regras de utilização:** * - O scroll infinito só funciona para tabelas que utilizam a propriedade `p-height` e que possuem o scroll já na carga inicial dos dados. * * @default `false` */ set infiniteScroll(value: boolean); get infiniteScroll(): boolean; /** * @optional * * @description * * Define o percentual necessário para disparar o evento `p-show-more`, que é responsável por carregar mais dados na tabela. Caso o valor informado seja maior que 100 ou menor * que 0, o valor padrão será 100% * * **Exemplos:** * - p-infinite-scroll-distance = 80: Quando atingir 80% do scroll da tabela, o `p-show-more` será disparado. */ set infiniteScrollDistance(value: number); get infiniteScrollDistance(): number; /** * @optional * * @description * * URL da API responsável por retornar os registros. * * Ao realizar a busca de mais registros via paginação (Carregar mais resultados), será enviado os parâmetros `page` e `pageSize`, conforme abaixo: * * ``` * url + ?page=1&pageSize=10 * ``` * * Caso utilizar ordenação, a coluna ordenada será enviada através do parâmetro `order`, por exemplo: * - Coluna decrescente: * ``` * url + ?page=1&pageSize=10&order=-name * ``` * * - Coluna ascendente: * ``` * url + ?page=1&pageSize=10&order=name * ``` * * > Esta URL deve retornar e receber os dados no padrão de [API do PO UI](https://po-ui.io/guides/api). */ set serviceApi(service: string); get serviceApi(): string; /** * @optional * * @description * * URL da API responsável por excluir os registros. * * Ao selecionar o botão de excluir itens, essa url será executada utilizando o parâmetro enviado na propriedade `p-param-delete-api`. * Caso ela não seja utilizada, o parâmetro padrão a ser enviado será `id`. * * > Esta URL deve retornar e receber os dados no padrão de [API do PO UI](https://po-ui.io/guides/api). */ set serviceDeleteApi(service: string); get serviceDeleteApi(): string; /** * @optional * * @description * * Define o espaçamento interno das células, impactando diretamente na altura das linhas do table. Os valores * permitidos são definidos pelo enum **PoTableColumnSpacing**. * * > Em nível de acessibilidade **AA**, caso o valor de `p-spacing` não seja definido, o valor padrão será `extraSmall` * > nos seguintes cenários: * > - Quando o valor de `p-components-size` for `small`; * > - Quando o valor padrão dos componentes for configurado como `small` no * > [serviço de tema](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set spacing(value: string); get spacing(): string; /** * @optional * * @description * * Define as colunas que serão filtradas no campo de pesquisa. * Aceita um array de strings, representando as colunas específicas que serão consideradas na filtragem. * */ set filteredColumns(values: Array); get filteredColumns(): Array; get hasColumns(): boolean; get hasItems(): boolean; get nameColumnDetail(): string; get validColumns(): PoTableColumn[]; get visibleActions(): PoTableAction[]; private getFilteredColumns; private get sortType(); /** * @optional * * @description * * Habilita o modo drag and drop para as colunas da tabela. * * @default `false` */ set draggable(draggable: boolean); get draggable(): boolean; /** * @optional * * @description * * Habilita o `virtual-scroll` na tabela para melhorar a performance com grandes volumes de dados. * Requer altura (`p-height`) para funcionar corretamente. * * > Incompatível com `p-text-wrap` e `master-detail`, pois o `virtual-scroll` exige altura fixa nas linhas. * * @default `true` */ set virtualScroll(value: boolean); get virtualScroll(): boolean; ngOnDestroy(): void; ngOnChanges(changes: SimpleChanges): void; protected onThemeChange(): void; selectAllRows(): void; selectRow(row: any): void; hasSelectableRow(): boolean; selectDetailRow(event: any): void; updateParentRowSelection(parentRow: any): void; setSelectedList(): void; getClassColor(row: any, column: any): string; toggleDetail(row: any): void; toggleRowAction(row: any): void; sortColumn(column: PoTableColumn): void; onShowMore(): void; getFilteredItems(queryParams?: { [key: string]: QueryParamsType; }): Observable; setTableResponseProperties(data: PoTableResponseApi): void; initializeData(params?: { [key: string]: QueryParamsType; }): void; sortArray(column: PoTableColumn, ascending: boolean, item?: Array): void; protected getDefaultColumns(item: any): { label: string; property: string; }[]; protected setShowDetail(rowIdentifier: any | number, isShowDetail: boolean): void; private collapseAllItems; private configAfterSelectRow; private emitExpandEvents; private emitSelectAllEvents; private emitSelectEvents; private getColumnColor; private getColumnMasterDetail; private getMainColumns; private getSubtitleColumns; private isEverySelected; private onChangeColumns; private setColumnLink; private setColumnMasterDetail; private setMainColumns; private setSubtitleColumns; private unselectOtherRows; private verifyWidthColumnsPixels; private setService; private getFilteredParams; private getOrderParam; private removePropertyFixed; private applySizeBasedOnA11y; private applySpacingBasedOnA11y; protected abstract calculateHeightTableContainer(height: any): any; protected abstract checkInfiniteScroll(): any; protected abstract changeSizeLoading(): any; protected abstract changeHeaderWidth(): any; protected abstract getDefaultSpacing(): any; protected abstract reapplySort(): any; }