import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList, Renderer2 } from '@angular/core'; import { TooltipPosition } from '@angular/material/tooltip'; import { FormControl } from '@angular/forms'; import { MatOptionSelectionChange } from '@angular/material/core'; import { DmCmpsDateService } from '../dm-cmps-input/dm-cmps-date.service'; import { MatSlideToggleChange } from '@angular/material/slide-toggle'; import { ExcelService } from './excel.service'; import { DomSanitizer } from '@angular/platform-browser'; import { DmCmpsHtmlPrinterService } from '../html-printer/html-printer.service'; import { DmCmpsRunOncePipeService } from '../pipes/run-once-pipe.service'; import { CdkDragDrop } from '@angular/cdk/drag-drop'; import * as i0 from "@angular/core"; export interface DmCmpsTableSettings { archiveIcon?: string; archiveTooltip?: string; archiveColor?: string; archiveTooptipPosition?: TooltipPosition; nonArchiveIcon?: string; nonArchiveTooltip?: string; nonArchiveColor?: string; addButtonTooltip?: string; addButtonTooltipPosition?: TooltipPosition; addButtonIcon?: string; searchLabel?: string; searchPlaceholder?: string; addButtonColor?: string; filterSelectLabel?: string; filterSelectSelectAllLabel?: string; filterSelectPlaceholder?: string; filterSelectOptionName?: string; filterSelectOptionValue?: string; filterSelectOutline?: boolean; fieldToFilterBy?: string; filterSelectOptions?: any[]; filterSelectBooleanOptions?: boolean; filterSelectTrueOptionName?: string; filterSelectFalseOptionName?: string; outlinedFormFields?: boolean; columnsControl?: boolean; columnsControlSearchable?: boolean; columnsControlLabel?: string; columnsControlSearchLabel?: string; actionButtonsMenu?: boolean; actionButtonsMenuIcon?: string; noDataText?: string; searchable?: boolean; searchOutline?: boolean; tableStyle?: DmTableStyle; actions?: DmTableActionButton[]; addButton?: boolean; archive?: boolean; archiveField?: string; archiveValue?: string; filterSelect?: boolean; filterSelectSearchable?: boolean; paginator?: boolean; paginatorData?: DmTablePaginator; autoPaginatorAbove?: number; elementIdField?: string; elementStyle?: (element: any) => DmTableElementStyle; totalRow?: boolean; printable?: boolean; printData?: DmTablePrintData; printTooltip?: string; printTooltipPosition?: TooltipPosition; printButtonColor?: string; printButtonIcon?: string; exportToExcel?: boolean; exportToExcelTooltip?: string; exportToExcelTooltipPosition?: TooltipPosition; exportToExcelButtonColor?: string; } export interface DmTableColumn { name: string; field: string; hideIf?: (() => boolean) | boolean; searchable?: boolean; sortable?: boolean; sortFunction?: (element1: any, element2: any, direction: 'asc' | 'desc') => number; minWidthToShow?: number; type?: DmTableColumnType; actions?: DmTableActionButton[]; actionsMenuButtonIcon?: string; actionsMenuButtonTooltip?: string; valueType?: 'string' | 'number' | 'date' | 'boolean'; listType?: 'ul' | 'ol' | 'comma' | 'newLine'; imageDetails?: DmTableImageDetails; customHtml?: (element: any) => string; totalRow?: DmTableTotalRowDetails; fixedNumber?: number; slideToggleDetails?: DmTableSlideToggleDetails; dateFormat?: 'dd/MM/yyyy' | 'dd/MM/yyyy HH:mm'; valueToShow?: (element: any) => string | string[]; onHeaderClick?: () => any; onHeaderDoubleClick?: () => any; onCellClick?: (element: any, index?: number) => any; onCellDoubleClick?: (element: any, index?: number) => any; onCellContentClick?: (element: any, index?: number) => any; onCellContentDoubleClick?: (element: any, index?: number) => any; cellStyle?: (element: any) => DmTableElementStyle; totalCellStyle?: (elements: any[]) => DmTableElementStyle; onTotalCellClick?: () => any; onTotalCellDoubleClick?: () => any; } export interface DmTableTotalRowDetails { type?: 'sum' | 'avg' | 'count' | 'max' | 'min' | 'custom'; label?: string; suffix?: string; totalFunction?: (data: any[]) => string; } export interface DmTableSlideToggleDetails { trueLabel: string; falseLabel: string; trueTooltip: string; falseTooltip: string; trueValue?: any; falseValue?: any; } export interface DmTableColumns { columns: DmTableColumn[]; displayedColumns?: string[]; actionButtonMenuMaxWidth?: number; } export interface DmTableActionButton { name: string; color: string; icon: string; tooltip: ((element: any) => string) | string; action?: (element: any) => void; hideIf?: (element: any) => boolean; disabled?: (element: any) => boolean; showIn?: 'archive' | 'nonArchive' | 'both'; } export interface DmTableElementStyle { color?: string; background_color?: string; font_weight?: string; italic?: boolean; underline?: boolean; font_size?: string; } export interface DmTableStyle { header?: { style?: DmTableElementStyle; hover_style?: DmTableElementStyle; }; row_hovered_style?: DmTableElementStyle; odd_row?: { style?: DmTableElementStyle; }; even_row?: { style?: DmTableElementStyle; }; total_row?: { style?: DmTableElementStyle; hover_style?: DmTableElementStyle; }; paginator?: { style?: DmTableElementStyle; border_radius?: string; }; max_height?: string; table_border_radius?: string; scrollbar_width?: string; scrollbar_color?: string; scrollbar_background_color?: string; scrollbar_hover_color?: string; } export interface DmTablePaginator { pageSize: number; pageSizeOptions: number[]; showFirstLastButtons?: boolean; outlineSelect?: boolean; details?: { firstPageLabel?: string; lastPageLabel?: string; nextPageLabel?: string; previousPageLabel?: string; chooseElementsPerPageLabel?: string; }; } export interface DmTableActionButtonEvent { action: string; element: any; elementIndex: number; } export interface DmTableSlideToggleEvent { value: boolean; element: any; elementIndex: number; column: DmTableColumn; } export interface DmTableRowDoubleClickEvent { element: any; elementIndex: number; } export interface DmTablePrintData { title: string; footer?: string; documentTitle: string; imgSrc?: string; } interface DmTablePrintPrefs { data: DmTableDataToPrint; printData: DmTablePrintData; } export interface DmTableImageDetails { width: number; height: number; } export type DmTableColumnType = 'date' | 'tel' | 'mail' | 'link' | 'whatsapp' | 'actions' | '#' | 'list' | 'image' | 'customHtml' | 'slideToggle'; export declare class DmTableComponent implements OnInit, OnDestroy, AfterViewInit { private renderer; private cdr; private excelService; private sanitizer; private htmlPrintService; protected dateService: DmCmpsDateService; private runOncePipeService; protected hoveredRow: number; protected headerHovered: boolean; _exportMode: boolean; onAddButtonClick: EventEmitter; onActionButtonClick: EventEmitter; onRowDoubleClick: EventEmitter; onSlideToggleChange: EventEmitter; set dataSource(data: any[]); set columns(columns: DmTableColumns); tableStyle: DmTableStyle; /** * actions - an array of actions to show in the action column */ actions: DmTableActionButton[] | undefined; /** * addButton - if true, an add button will be shown */ set addButton(value: boolean); /** * archive - if true, an archive button will be shown */ set archive(value: boolean); /** * condition to hide archive button if true, (still filtering the archived items by archiveField) */ set hideArchiveIf(value: boolean); /** * archiveField - the field to filter by when archive is true */ set archiveField(field: string); /** * archiveValue - the value to filter by when archive is true */ set archiveValue(value: any); /** * archiveIcon - the icon of the archive button */ archiveIcon: string; /** * archiveTooltip - the tooltip of the archive button */ archiveTooltip: string; /** * archiveColor - the color of the archive icon */ archiveColor: string; /** * archiveTooptipPosition - the position of the archive button tooltip */ archiveTooptipPosition: TooltipPosition; /** * nonArchiveIcon - the icon of the non archive button */ nonArchiveIcon: string; /** * nonArchiveTooltip - the tooltip of the non archive button */ nonArchiveTooltip: string; /** * nonArchiveColor - the color of the non archive icon */ nonArchiveColor: string; /** * addButtonTooltip - the tooltip of the add button */ addButtonTooltip: string; /** * addButtonTooltipPosition - the position of the add button tooltip */ addButtonTooltipPosition: TooltipPosition; /** * addButtonIcon - the icon of the add button */ addButtonIcon: string; /** * searchLabel - the label of the search input */ searchLabel: string; /** * searchPlaceHolder - the placeholder of the search input */ searchPlaceholder: string; /** * searchable - if true, a search input will be shown */ set searchable(value: boolean); /** * searchOutline - if true, the search input will be outlined */ set searchOutline(value: boolean); /** * addButtonColor - the color of the add button */ addButtonColor: string; /** * addButtonAction - a function to run when the add button is clicked */ addButtonAction: () => void; /** * filterSelect - if true, a filter select will be shown */ set filterSelect(value: boolean); /** * filterSelectSearchable - if true, the filter select will be searchable */ set filterSelectSearchable(value: boolean); _filterSelectSearchable: boolean; _filterSelectSearchLabel: string; /** * filterSelectLabel - the label of the filter select */ filterSelectLabel: string; /** * filterSelectOptions - an array of options to filter with */ set filterSelectOptions(options: any[]); /** * filterSelectOutline - if true, the filter select will be outlined */ set filterSelectOutline(value: boolean); /** * filterSelectSelectAllLabel - the label of the select all option in the filter select */ filterSelectSelectAllLabel: string; /** * filterSelectPlaceholder - the placeholder of the filter select */ filterSelectPlaceholder: string; /** * filterSelectOptionName - the name of the option field to be shown in the select */ filterSelectOptionName: string; /** * filterSelectOptionValue - the value of the option field to be used in the filter */ filterSelectOptionValue: string; /** * fieldToFilterBy - the field of the table element to filter by */ fieldToFilterBy: string; /** * filterSelectBooleanOptions - if true, the filter select will show true and false options */ filterSelectBooleanOptions: boolean; /** * filterSelectTrueOptionName - the name of the true option in the filter select */ set filterSelectTrueOptionName(name: string); /** * filterSelectFalseOptionName - the name of the false option in the filter select */ set filterSelectFalseOptionName(name: string); /** * outlinedFormFields - if true, the search, filter select and columns control will be outlined */ set outlinedFormFields(value: boolean); /** * columnsControlLabel - the label of the columns control field */ columnsControlLabel: string; /** * columnsControl - if true, a columns control will be shown */ set columnsControl(value: boolean); /** * columnsControlOutline - if true, the columns control will be outlined */ set columnsControlOutline(value: boolean); /** * columnsControlSearchable - if true, the columns control will be searchable */ set columnsControlSearchable(value: boolean); _columnsControlSearchable: boolean; /** * columnsControlSearchLabel - the label of the columns control search input */ columnsControlSearchLabel: string; set actionButtonsMenu(value: boolean); /** * actionButtonsMenuIcon - the icon of the action buttons menu */ actionButtonsMenuIcon: string; /** * noDataText - the text to show when there is no data to show in the table */ noDataText: string; /** * paginator - if true, a paginator will be shown */ set paginator(value: boolean); /** * paginatorData - the paginator data */ set paginatorData(data: DmTablePaginator); /** * autoPaginatorAbove - the length of the data to show the paginator above the table (default as 100) */ set autoPaginatorAbove(length: number); /** * elementIdField - the field of the table element to be used as an id */ set elementIdField(field: string); /** * elementStyle - a function that gets an element and returns the style of the element row as DmTableElementStyle */ elementStyle: ((element: any) => DmTableElementStyle) | undefined; /** * totalRow - if true, a total row will be shown */ set totalRow(value: boolean); /** * printable - if true, a print button will be shown */ set printable(value: boolean); /** * printData - the data to print as DmTablePrintData */ set printData(data: DmTablePrintData); /** * printTooltip - the tooltip of the print button */ printTooltip: string; /** * printTooltipPosition - the position of the print button tooltip */ printTooltipPosition: TooltipPosition; /** * printButtonColor - the color of the print button */ printButtonColor: string; /** * printButtonIcon - the icon of the print button */ printButtonIcon: string; /** * exportToExcel - if true, an export to excel button will be shown */ set exportToExcel(value: boolean); /** * exportToExcelTooltip - the tooltip of the export to excel button */ exportToExcelTooltip: string; /** * exportToExcelTooltipPosition - the position of the export to excel button tooltip */ exportToExcelTooltipPosition: TooltipPosition; /** * exportToExcelButtonColor - the color of the export to excel button */ exportToExcelButtonColor: string; /** * dragableColumns - if true, the columns will be dragable */ dragableColumns: boolean; /** * dragableColumnsHandler - if true, a handler will be shown to drag the */ dragableColumnsHandler: boolean; /** * dragableRows - if true, the rows will be dragable */ dragableRows: boolean; /** * dragableRowsHandler - if true, a handler will be shown to drag the rows */ dragableRowsHandler: boolean; /** * dragDelay - the delay of the drag */ dragDelay: number; /** * actionsMenuButtonTooltip - the tooltip of the actions menu button */ actionsMenuButtonTooltip: string; /** * filterPredicate - a function that gets an element and a value and returns true if the element should be shown */ filterPredicate: ((element: any, value: string) => boolean) | undefined; _filterSelectTrueOptionName: string; _filterSelectFalseOptionName: string; _exportToExcel: boolean; _elementIdField: string; _printData: DmTablePrintData | undefined; _dataSource: DmCmpsTableDataSource; _displayedColumnsCtrl: FormControl; _sortable: boolean; _addButton: boolean; _archive: boolean; _hideArchive: boolean; _searchable: boolean; _searchOutline: boolean; _filterSelect: boolean; _filterSelectOutline: boolean; _columnsControlOutline: boolean; _columnsControl: boolean; _attributesToSearchIn: string[]; _actionButtonsMenu: boolean; _allColumns: DmTableColumn[]; _paginator: boolean; _paginatorData: DmTablePaginator | undefined; _filterSelectOptions: any[]; _totalRow: boolean; searchCtrl: FormControl; _sortedBy: { index: number; order: 'asc' | 'desc'; }; get _columnsFields(): string[]; get _displayedColumnsCtrlValue(): string[]; set _displayedColumnsCtrlValue(value: string[]); get _showToolbar(): boolean; headerSpans: QueryList | undefined; tableElement: ElementRef | undefined; printTemplate: ElementRef | undefined; headerRow: ElementRef | undefined; tableRowRefs: QueryList | undefined; totalRowRef: ElementRef | undefined; get scrollbarColor(): string; get scrollbarBackgroundColor(): string; get scrollbarHoverColor(): string; get scrollbarWidth(): string; /** * tableSettings - a struct that have most of the component inputs, another way to define the table properties */ set tableSettings(settings: DmCmpsTableSettings); private searchTerms; private _onDestroy; constructor(renderer: Renderer2, cdr: ChangeDetectorRef, excelService: ExcelService, sanitizer: DomSanitizer, htmlPrintService: DmCmpsHtmlPrinterService, dateService: DmCmpsDateService, runOncePipeService: DmCmpsRunOncePipeService); [key: string]: any; setTableSettings(settings: DmCmpsTableSettings): void; ngOnInit(): void; _print: boolean; cleareSearch(): void; search(event: Event): void; getSlideToggleStyle(element: any, index: number): Object; getCellStyle(column: DmTableColumn, element: any): Object; getTotalCellStyle(column: DmTableColumn, elements: any[]): Object; getElementStyle(element: any, index: number): Object; getSafeHtml(text: string): string; ngOnDestroy(): void; ngAfterViewInit(): void; onColumnsSelectionChange(columns: any): void; _toggleArchive(): void; initColumns(columns: DmTableColumns): void; columnDrop(event: CdkDragDrop): void; rowDrop(event: CdkDragDrop): void; setTotalRowWidth(): void; getColumnHideCondition(column: DmTableColumn): boolean | undefined; checkColumnHideCondition(field: string): boolean | undefined; onResize: () => void; initFilterSelectOptions(): void; onFilterSelectionChange(event: any): void; _onClearInputClick(): void; _onAddButtonClick(): void; _onActionButtonClick(button: DmTableActionButton, element: any): void; _onRowDoubleClick(element: any): void; _onSlideToggleChange(event: MatSlideToggleChange, element: any, column: DmTableColumn): void; _getSlideToggleLabel(column: DmTableColumn, element: any): any; _getSlideToggleTooltip(column: DmTableColumn, element: any): string; _getTotalRowValue(column: DmTableColumn): string; sortByColumn(): void; setSortedBy(index: number): void; toggleSort(index: number): void; showSortIcon(column: DmTableColumn): void; hideSortIcon(column: DmTableColumn): void; getButtonTooltip(button: DmTableActionButton, element: any): string; applyFilter(value: string): void; _filterPredicate(data: any, filter: string): boolean; onPageSizeChange(event: MatOptionSelectionChange, option: number): void; nextPage(): void; previousPage(): void; lastPage(): void; firstPage(): void; exportDataToExcel(): void; printDataSource(): void; getTable(columnsToDisplayPrint: DmTableColumn[], dataSourcePrint: DmTablePrintPrefs['data'], rowCounter: number): string; getImgFromUrl(url: string): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_addButton: unknown; static ngAcceptInputType_archive: unknown; static ngAcceptInputType_hideArchiveIf: unknown; static ngAcceptInputType_searchable: unknown; static ngAcceptInputType_searchOutline: unknown; static ngAcceptInputType_filterSelect: unknown; static ngAcceptInputType_filterSelectSearchable: unknown; static ngAcceptInputType_filterSelectOutline: unknown; static ngAcceptInputType_filterSelectBooleanOptions: unknown; static ngAcceptInputType_outlinedFormFields: unknown; static ngAcceptInputType_columnsControl: unknown; static ngAcceptInputType_columnsControlOutline: unknown; static ngAcceptInputType_columnsControlSearchable: unknown; static ngAcceptInputType_actionButtonsMenu: unknown; static ngAcceptInputType_paginator: unknown; static ngAcceptInputType_autoPaginatorAbove: unknown; static ngAcceptInputType_totalRow: unknown; static ngAcceptInputType_printable: unknown; static ngAcceptInputType_exportToExcel: unknown; static ngAcceptInputType_dragableColumns: unknown; static ngAcceptInputType_dragableColumnsHandler: unknown; static ngAcceptInputType_dragableRows: unknown; static ngAcceptInputType_dragableRowsHandler: unknown; static ngAcceptInputType_dragDelay: unknown; } export interface DmObject { [key: string]: any; } interface DmTableDataToPrint { dataSource: any[]; totalRow?: { [key: string]: string; }; } export declare class DmCmpsTableDataSource { onWidthAdjustmentRequested: EventEmitter; private data; filter: string; resultData: T[]; private sortedData; private filteredData; private filteredDataByFieldValue; private dataForTotalFunction; private fieldToFilterBy; private fieldFilterValue; private filterSelectBooleanOptions; private elementsPerPage; private currentPage; private paginator; private _autoPaginatorAbove; private _paginatorData; private _paginatorDetails; private _tableColumns; private valuesToShow; private elementIdField; private _applyArchive; private _archive; private _totalRow; private _archiveField; private _archiveValue; private _dataToPrint; _printPrefs: DmTablePrintPrefs; _printable: boolean; filterPredicate?: (data: any, filter: string) => boolean; constructor(data?: T[]); setTotalRow(value: boolean): void; getElementIndex(element: any): number; getNumber(text: string | number): number; getColumnsToDisplay(): DmTableColumn[]; count: number; getColumnsToDisplayTest(): DmTableColumn[]; getColumnsToPrint(): DmTableColumn[]; setColumnsToDisplay(columnsToDisplay: DmTableColumn[]): void; getDmTableColumns(): _DmTableColumns; setPrintData(data: DmTablePrintData): void; applyArchive(value: boolean): void; setArchive(value: boolean): void; getArchive(): boolean; getArchiveValue(): any; setArchiveField(field: string): void; setArchiveValue(value: any): void; setTableColumns(columns: DmTableColumns): void; setElementIdField(field: string): void; setValuesToShow(): void; getValue(elementId: string, column: DmTableColumn): string | string[]; getFixedNumber: (fixed: number, num: string | number) => string; getAvg(column: DmTableColumn): string; getSum(column: DmTableColumn): string; getCount(column: DmTableColumn): string; getMax(column: DmTableColumn): string; getMin(column: DmTableColumn): string; applyPaginator(): void; removePaginator(): void; _getPaginatorAppearance(): boolean; _getPaginatorDetails(): { firstPageLabel?: string | undefined; lastPageLabel?: string | undefined; nextPageLabel?: string | undefined; previousPageLabel?: string | undefined; chooseElementsPerPageLabel?: string | undefined; } | undefined; renderPaginator(): void; getPaginatorData(): DmTablePaginator; setPaginatorData(paginatorData: DmTablePaginator): void; setAutoPaginatorAbove(length: number): void; setCurrentPage(page: number): void; getElementsPerPage(): number; setElementsPerPage(value: number): void; _firstIndexInPage(): number; _lastIndexInPage(): number; _totalElements(): number; _pageSize(): number; _pageSizeOptions(): number[]; private getMaxPagesNumnber; nextPage(): void; previousPage(): void; lastPage(): void; firstPage(): void; initIndexedDB(data: T[]): void; getResultData(): T[]; getTotalData(): T[]; changePage(page: number): void; setDefaultSort(): void; sortByField(column: DmTableColumn | undefined, direction: 'asc' | 'desc'): void; setDataSource(data: T[]): void; private getSortedData; private getFilteredDataByFieldValue; getData(): T[]; onFilter(filter: string): void; _onFilter(): void; filterByFieldAndValue(field: string, value: any, booleanOptions: boolean): void; _filterByFieldAndValue(): void; getDataSourcePrint(): T[]; getTotalRowToPrint(): DmTableDataToPrint['totalRow']; getDataToPrint(): void; } declare class _DmTableColumns { private columns; private displayedColumns?; _columnsToDisplay: DmTableColumn[]; actionButtonMenuMaxWidth?: number; constructor(tableColumns?: DmTableColumns); getColumns(): DmTableColumn[]; getDisplayedColumns(): string[] | undefined; setColumns(columns: DmTableColumn[]): void; setDisplayedColumns(columns: string[]): void; } export {};