import { TemplateRef } from '@angular/core'; /** * @usedBy PoTableComponent * * @description * * * * Interface que define a coluna com ícone(s) do `po-table`. */ export interface PoTableColumnIcon { /** Define a ação que será executada ao clicar no ícone. */ action?: Function; /** * @optional * * @description * * Define a cor do ícone. * * Valores válidos: * - `color-01` * - `color-02` * - `color-03` * - `color-04` * - `color-05` * - `color-06` * - `color-07` * - `color-08` * - `color-09` * - `color-10` * - `color-11` * - `color-12` * * > Também é possível utilizar as 35 cores da paleta **Caption Tag Colors**: * * - `caption-tag-01` `caption-tag-02` `caption-tag-03` `caption-tag-04` `caption-tag-05` * - `caption-tag-06` `caption-tag-07` `caption-tag-08` `caption-tag-09` `caption-tag-10` * - `caption-tag-11` `caption-tag-12` `caption-tag-13` `caption-tag-14` `caption-tag-15` * - `caption-tag-16` `caption-tag-17` `caption-tag-18` `caption-tag-19` `caption-tag-20` * - `caption-tag-21` `caption-tag-22` `caption-tag-23` `caption-tag-24` `caption-tag-25` * - `caption-tag-26` `caption-tag-27` `caption-tag-28` `caption-tag-29` `caption-tag-30` * - `caption-tag-31` `caption-tag-32` `caption-tag-33` `caption-tag-34` `caption-tag-35` * */ color?: string | Function; /** Função que deve retornar um booleano para habilitar ou desabilitar o ícone e sua ação. */ disabled?: Function; /** * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * [ { icon: 'an an-plus' } ] * ``` * * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma: * ``` * [ { icon: 'fas fa-plus' } ] * ``` * * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * `component.html`: * ``` * * add * * * * ``` * `component.ts`: * ``` * * @ViewChild('iconTemplateAdd', { static: true }) iconTemplateAdd: TemplateRef; * * myProperty = [ * { property: 'columnIcon', label: 'Icons', type: 'icon', icons: [ * { value: 'plus', icon: this.iconTemplateAdd }, * ]} * ]; * ``` * * > Caso esta propriedade não seja definida, a mesma receberá o valor contido em `value`. */ icon?: string | TemplateRef; /** Define um texto de ajuda que será exibido ao passar o *mouse* em cima do ícone. */ tooltip?: string; /** * Define o valor do ícone que será exibido. */ value: string; }