UNPKG

ngx-sp-infra

Version:
136 lines (135 loc) 7.7 kB
import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnInit, Renderer2, SimpleChanges } from '@angular/core'; import { TableHeaderStructure } from '../../models/table/header-structure.model'; import * as i0 from "@angular/core"; /** * Componente de Tabela Customizável * * O `TableComponent` é um componente Angular projetado para exibir uma tabela customizável * com suporte a paginação. Ele permite a configuração de cabeçalhos de colunas, posicionamento * da paginação e opções de itens por página. O componente é flexível, utilizando classes Bootstrap * para ajustar o layout das colunas e emitindo eventos para que o componente pai possa reagir a * mudanças na página ou no número de itens exibidos. * * @selector lib-table */ export declare class TableComponent implements OnInit, AfterViewInit, OnChanges { private readonly _cdr; private readonly _renderer; private _paginationID; private _recordsList; private _currentPage; private _currentItemsPerPage; selection: boolean | undefined; /** Determina se haverá uma coluna inicial para seleção de registros na tabela. */ useSelection: boolean; /** Determina o número de registros selecionados. */ selectedCount?: number; /** Determina se a tabela deve usar paginação. * @default true */ usePagination: boolean; /** Lista de registros a serem exibidos na tabela. * @required */ get list(): unknown[] | undefined; set list(value: unknown[] | undefined); /** Opções de contagem de itens por página disponíveis para o usuário. * @required */ counts?: number[]; /** Posicionamento dos controles de paginação. * @default 'end' */ placement: 'start' | 'center' | 'end' | 'between'; /** Lista de cabeçalhos para as colunas da tabela, incluindo o nome, a largura da coluna e classes customizadas. * @see TableHeaderStructure */ headers: TableHeaderStructure[]; /** Mensagem customizada para lista vazia */ emptyListMessage?: string; /** Informa se o counter de registros deve aparecer ou não. * @default true */ showCounter: boolean; /** Informa se as rows da tabela devem ter o efeito de hover. * @default true */ hoverable: boolean; /** Informa se a table deve ser exibida com o estilo anterior à atualização. * @default false */ usePreviousStyle: boolean; /** Informa se a table deve permitir scroll lateral. * Se for true, todas as colunas terão a largura fixa de 250px, ignorando valores customizados (esta definição pode mudar no futuro). * @default false */ scrollable: boolean; /** Informa se a lógica e elementos de paginação devem ficar fora do componente e serem gerenciados pelo componente pai. * @default false */ useCustomPagination: boolean; /** * DEVE ser utilizada em caso de paginação visível. * * Informa um ID para a paginação da tabela específica, usada para distinguir tabelas distintas. * * Não está como required pois caso a paginação não seja visível não deve ser obrigatório. * * Por obrigatoriedade neste contexto refiro-me ao usar o seletor no seu HTML * * @example * ```html * <lib-table paginationID="simpleTableExample"></lib-table> * ``` */ get paginationID(): string; set paginationID(value: string); /** Evento emitido quando o número de itens por página é alterado. */ itemsPerPageChange: EventEmitter<number>; /** Evento emitido quando a página é alterada. */ pageChange: EventEmitter<number>; /** Evento emitido quando o checkbox de seleção se alterar. */ selectionChange: EventEmitter<boolean>; /** Caso seja usado um ícone na coluna e a opção ```headers.icon.emitClick``` for true, ao clicar nela emite este evento que leva consigo o nome da coluna em questão. */ iconClick: EventEmitter<string>; /** Evento emitido quando as colunas são modificadas. */ colunasModificadas: EventEmitter<TableHeaderStructure[]>; /** Página atual da tabela. */ get page(): number; set page(value: number); /** Número de itens a serem exibidos por página. */ get itemsPerPage(): number; set itemsPerPage(value: number); get firstItemOfPage(): number; get lastItemOfPage(): number; get itemsDisplayText(): string; headersUseOldWidth?: boolean; divBorderClass: string; tableBorderClass: string; emptyListTD?: ElementRef<HTMLTableCellElement>; colspanWidth: string; constructor(_cdr: ChangeDetectorRef, _renderer: Renderer2); /** Inicializa o componente e define o número inicial de itens por página. */ ngOnInit(): void; ngAfterViewInit(): void; /** Monitora as mudanças nas entradas do componente e realiza ajustes, como resetar a paginação ou validar o layout das colunas. * @param changes Objeto que contém as mudanças nas entradas do componente. */ ngOnChanges(changes: SimpleChanges): void; emitPageBoundsCorrection(page: number): void; private validateHeaders; private updateCounterInfo; private updateColspanWidth; /** Modifica a quantidade de itens a ser mostrada na lista. * @param event parâmetro de evento que irá selecionar a nova quantidade. */ onSelectChange(event: any): void; /** Reseta a paginação da listagem com base no número atual de registros. * @param list Lista de registros para resetar a paginação. */ resetPagination(list: unknown[]): void; updateHeadersVisibility(headers: TableHeaderStructure[]): void; /** Método que faz a ordenação dos contratos na tela de listagem, em cada uma das células do cabeçalho da tabela, onde cada um * dos elementos <th> representa uma coluna, de acordo com a lista de contratos que retorna do backend. */ sortDirection: { [key: string]: 'asc' | 'desc'; }; currentSortColumn: string; onSortChange(event: { direction: string; column: string; }): void; private sortData; private compareProperties; private getProperty; static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent, "lib-table", never, { "selection": { "alias": "selection"; "required": false; }; "useSelection": { "alias": "useSelection"; "required": false; }; "selectedCount": { "alias": "selectedCount"; "required": false; }; "usePagination": { "alias": "usePagination"; "required": false; }; "list": { "alias": "list"; "required": true; }; "counts": { "alias": "counts"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "headers": { "alias": "headers"; "required": true; }; "emptyListMessage": { "alias": "emptyListMessage"; "required": false; }; "showCounter": { "alias": "showCounter"; "required": false; }; "hoverable": { "alias": "hoverable"; "required": false; }; "usePreviousStyle": { "alias": "usePreviousStyle"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; "useCustomPagination": { "alias": "useCustomPagination"; "required": false; }; "paginationID": { "alias": "paginationID"; "required": false; }; "divBorderClass": { "alias": "divBorderClass"; "required": false; }; "tableBorderClass": { "alias": "tableBorderClass"; "required": false; }; }, { "itemsPerPageChange": "itemsPerPageChange"; "pageChange": "pageChange"; "selectionChange": "selectionChange"; "iconClick": "iconClick"; "colunasModificadas": "colunasModificadas"; }, never, ["[rightSideContent], [upperContent]", "[upperContentFill]", "[innerRows]"], true, never>; }