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; }