Tufud-material NPM

Tufud Material Components

tf-header

Input quantity: number | undefined Output quantityEmitter
Input cartIcon: boolean (show/hide cart button | default: true)
Input shoppingCartAmount: string
Input header (menu list with options and routes added as array of {name:string, route:string})
Input usernameboxDisabled: boolean
Output openCartEmit (cart empty emmit)
Output logoutEmit (logout button empty emmit) Output() routeLink = new EventEmitter() mandatory, emits route string. Use a method with route.navigate(event)

tf-pagination

Input pageSize: number
Input length: number
Input pageIndex: number
Input itemsQuantity: number
Output page = new EventEmitter() Use @ViewChild decorator to access to this component properties, example:

@ViewChild(PaginationComponent) nameOfTheInstance: PagiantionComponent

tf-minus-plus

Output quantityEmitter = new EventEmitter()
Input quantity: number

tf-table-layout

Input displayedColumns: TLHeader[] = [] : Array donde se ingresan todos los headers de la tabla,cada header es un objeto que tiene una propiedad column con el nombre del dato, una propiedad displayName con el nombre para mostrar y un propiedad additionalText con texto addicional que puede ser agregado condicionalmente por el componente padre.
Input dataSource: MatTableDataSource | any[] = []: Array donde se ingresan los datos de cada celda
Input actions: TLActions[] = []: Array del tipo TLActions, cada propiedad de un objteto TLActions le asigna una carácteristica especifica a cada una de las acciones que se renderizaran en la columnas de acciones o detalle
Input columnsWithActions: string[] = []: Array con las columnas que contendran acciones, si el nombre de la columna no está en este array no se activará el evento click sobre sus datos
Input currencyColumns: string[] = []: Array con las columnas en cuyos datos se debe renderizar antes el signo
Input() statusInfoCollection: StatusInfo[] = []: Array con las opciones de estilos de estatus variable. Si la propieded editable es true se renderiza un select con las edit_option
Input() noHeaderInMobileStyles: string[] = []: Array con las nombres de las columnas que no requieren headers en estilos mobile.
Input() showCartButton: boolean | undefined: Booleano para indicar si queremo añador el botón de carrito que utilizamos para sumar productos al carrito por ejemplo
Input() isQuantityModifiable: boolean | undefined: Booleano ue cuando está en true renderiza un plus-minus button para modificar cantidades que está asociado al evento quantityEvent
Input() nameColumnWidth: number = 0: Con este número podemos indicar el ancho de la columna name, el resto de las columnas se se repartiran el ancho de pantalla restante.
Output() clickEventDataEmmitter = new EventEmitter(): Emite los datos del registro asociado a ese click
Output() quantityEventEmmitter = new EventEmitter(): Emite los datos del registro asociado a ese click y la variación de la cantidad asociada
Output() statusEventEmmitter = new EventEmitter(): Emite los datos del registro asociado a los cambios en el selector y el valor nuevo del selector

tf-input

Input inputId?: string
Input inputType: TFInputType
Input inputLabelText?: string
Input inputPlaceholder?: string
Input formGroup?: FormGroup
Input formControlName: string
Input formControl: FormControl
Input required: boolean
Input errors?: Errors[]
Input showSearchIconAndSpinner?: boolean
Input loadingCondition?: boolean
Input inputWidth? : string
Input inputHeight?: string
Input containerHeight?: string

Requirements:

import { TufudMaterialLibraryModule } from 'tufud-material';

tf-header needs to have this in the project to work: import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; also needed for testing the lib. If you add it in the lib module remove it before build

tf-footer needs to add the resource path of the library in the angular.json of the application:

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "node_modules/tufud-material/assets",
    "output": "tfassets"
  }
],

tf-footer You need to add the resource path of the library in the angular.json of the application:

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "node_modules/tufud-material/assets",
    "output": "tfassets"
  }
],