import { ChangeDetectorRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, ValidatorFn } from '@angular/forms';
import { TsDocumentService } from '@terminus/ngx-tools/browser';
/**
* The structure for an individual row
*/
export interface TsCSVEntryRecord {
recordId: number;
columns: (string | null)[];
}
/**
* The structure for the form
*/
export interface TsCSVFormContents {
headers: string[];
records: TsCSVEntryRecord[];
}
/**
* The structure for a required error
*/
export interface TsCSVRequiredError {
rowId: number;
valid: boolean;
}
/**
* The structure for a URL error
*/
export interface TsCSVUrlError {
actual: string;
rowId: number;
valid: boolean;
}
/**
* The structure for the error set
*/
export interface TsCSVFormError {
control: string;
required?: TsCSVRequiredError;
url?: TsCSVUrlError;
}
/**
* The structure for a row
*/
export interface TsCSVRow {
recordId: FormControl;
columns: FormArray;
}
/**
* This is the csv-entry UI Component
*
* @example
*
*
* https://getterminus.github.io/ui-demos-release/components/csv-entry
*/
export declare class TsCSVEntryComponent implements OnInit, OnDestroy {
private formBuilder;
private changeDetectorRef;
private documentService;
private originalColumnCount;
/**
* Define the default component ID
*/
protected uid: string;
/**
* Define the static height needed in the DOM for the external rows
*/
fakeRowHeight: string;
/**
* Expose the flexbox layout gap
*/
layoutGap: string;
/**
* Expose a validation message if too many rows are added
*/
tooManyRowsMessage: string | null;
/**
* Store records (rows)
*/
records: TsCSVEntryRecord[];
/**
* Initialize the records form with an empty array
*/
recordsForm: FormGroup;
/**
* Store a reference to all existing errors
*/
allErrors: TsCSVFormError[] | null;
/**
* Get header cells as a form array
*/
get headerCells(): FormArray;
/**
* Get rows as a form array
*/
get rows(): FormArray;
/**
* Set the number of columns
*
* @param value
*/
set columnCount(value: number);
get columnCount(): number;
private _columnCount;
/**
* Allow static headers to be set
*
* @param value
*/
set columnHeaders(value: string[] | undefined);
get columnHeaders(): string[] | undefined;
private _columnHeaders;
/**
* Define any column validators
*
* @param value
*/
set columnValidators(value: ValidatorFn | null[]);
get columnValidators(): ValidatorFn | null[];
private _columnValidators;
/**
* Define the layout direction for the footer
*/
footerDirection: 'ltr' | 'rtl';
/**
* Allow full-width mode
*/
fullWidth: boolean;
/**
* Define an ID for the component
*
* @param value
*/
set id(value: string);
get id(): string;
protected _id: string;
/**
* Set the maximum number of allowed rows
*
* @param value
*/
set maxRows(value: number);
get maxRows(): number;
private _maxRows;
/**
* Define output to be CSV rather than TSV
*/
outputFormat: 'csv' | 'tsv';
/**
* Define the number of rows
*
* @param value
*/
set rowCount(value: number);
get rowCount(): number;
private _rowCount;
/**
* Emit the built file blob
*/
readonly blobGenerated: EventEmitter;
constructor(formBuilder: FormBuilder, changeDetectorRef: ChangeDetectorRef, documentService: TsDocumentService);
/**
* Add columns to existing rows + header
*
* @param rows - The existing body rows
* @param headerCells - The array of header cells
* @param columnsToAdd - The number of columns to add
*/
private static addColumnsToRows;
/**
* Split pasted data into headers, rows, and columns
*
* @param content - The event content
* @param hasHeaders - Whether the content has a header row
* @returns An object containing all data
*/
private static splitContent;
/**
* Initialize empty rows
*/
ngOnInit(): void;
/**
* Needed for `untilComponentDestroyed`
*/
ngOnDestroy(): void;
/**
* Add rows to the form
*
* @param rowCount - The number of rows to add
* @param columnCount - The number of columns each row should have
* @param content - The column content
* @param index - The row index
*/
addRows(rowCount?: number, columnCount?: number, content?: string[][], index?: number): void;
/**
* Get the columns of a row
*
* @param row - The row
* @returns The array of columns
*/
getColumns(row: FormGroup): FormArray;
/**
* Update the form control for recordId on each row according to index.
*/
updateAllRowIds(): void;
/**
* Handle paste event for standard content cell
*
* @param event - The paste event
* @param hasHeader - Whether the content has a header row
*/
onPaste(event: ClipboardEvent, hasHeader?: boolean): void;
/**
* Expose ability to trigger error updates from the DOM
*/
updateErrors(): void;
/**
* Helper to get the name (content) of a header cell for the title attribute
*
* @param index - The column index
* @returns The header cell content
*/
getHeaderCellName(index: number): string;
/**
* Stop accidental page navigation when scrolling to the edges of the CSV form
*
* @param event - The scroll wheel event
*/
onScroll(event: WheelEvent): void;
/**
* Change focus to the cell below the current cell
*
* @param currentCellId - The ID of the currently focused cell
* @param up - The direction to move (up vs down)
*/
selectCellInNextRow(currentCellId: string, up?: boolean): void;
/**
* Select the next cell or previous cell
*
* @param event - The KeyboardEvent
* @param currentCellId - The ID of the currently focused cell
* @param previous - If the movement is forward or backward
*/
selectAdjacentCell(event: KeyboardEvent, currentCellId: string, previous?: boolean): void;
/**
* Create an ID for a cell. Format: `ts-csv-entry-{number}_r_7Xc_2` would be the 2nd cell in the 7th row.
*
* @param recordIndex - The index of the record/row
* @param cellIndex - The index of the cell within the row
* @returns The ID
*/
createId(recordIndex: number, cellIndex: number): string;
/**
* Collect all errors from the recordsForm and set to allErrors
*/
collectErrors(): TsCSVFormError[] | null;
/**
* Get all validation messages
*
* NOTE: Currently this only supports a custom error message for URL validation. Other messages can be added when the need arises.
* FIXME: Find a way to use the existing ValidationMessagesService
*
* @returns The array of validation messages
*/
get validationMessages(): string[] | undefined;
/**
* Delete a row
*
* @param index - The index of the row to delete
*/
deleteRow(index: number): void;
/**
* Reset the table to it's initial state
*/
resetTable(): void;
/**
* Get all form errors from a FormGroup or FormArray
*
* NOTE: This external function and `result` object is needed since `getAllErrors` may be recursive
*
* @param form - The form
* @returns An object containing all errors
*/
private getFormErrors;
/**
* Get all errors for the form
*
* @param form - The primary form group
* @param result - The collection of errors
* @returns An object containing all errors
*/
private getAllErrors;
/**
* Clear all rows
*/
private clearAllRows;
/**
* Clear header cells
*/
private clearHeaderCells;
/**
* Add header content to the form
*
* @param headerCount - The number of header cells
* @param content - The cell's content
*/
private addHeaders;
/**
* Create a row
*
* @param id - The row's ID
* @param content - The column's content
* @returns The FormGroup
*/
private createRow;
/**
* Create an array of columns
*
* @param count - The number of columns to create
* @param content - An array of content to seed the columns with
* @returns The array of form controls
*/
private createColumns;
/**
* Generate a File blob from the form contents
*
* @param content - The recordForm content
* @returns The File blob
*/
private generateBlob;
}