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"
  }
],

Code scaffolding

Run ng generate component component-name --project tufud-material to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project tufud-material.

Note: Don't forget to add --project tufud-material or else it will be added to the default project in your angular.json file.

Build

Run ng build tufud-material to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build tufud-material, go to the dist folder cd dist/tufud-material and run npm publish.