import { TemplateRef } from '@angular/core'; export type PoBadgeStatus = 'disabled' | 'negative' | 'positive' | 'warning'; export type PoBadgeSize = 'small' | 'medium' | 'large'; export type PoBadgeIcon = string | boolean | TemplateRef; /** * @description * * Utilizado para exibir a quantidade de notificações. */ export declare class PoBadgeBaseComponent { badgeValue: string; customColor: string; private _color; private _value; private _status?; private _ariaLabel; /** * @description * * Define um `aria-label` para o `po-badge` */ set ariaLabel(value: string); get ariaLabel(): string; /** * @optional * * @description * * Determina a cor do `po-badge`. As maneiras de customizar as cores são: * - Hexadeximal, por exemplo `#c64840`; * - RGB, como `rgb(0, 0, 165)`; * - O nome da cor, por exemplo `blue`; * - Usando uma das cores do tema do PO: * 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` * * Exemplo de uso: * ``` * * ``` * * @default `color-07` */ set color(value: string); get color(): string; /** * @optional * * @description * Ícone exibido no `po-badge`. * * Para exibir icone do status atual declare a propriedade `p-icon`. conforme exemplo abaixo: * ``` * * ``` * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * * ``` * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma: * ``` * * ``` * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * ``` * * * * * * ``` */ icon: PoBadgeIcon; /** * @description * * Define o estado do `po-badge` * * Valores válidos: * - `positive`: Define a cor do `po-badge` com a cor de feedback positivo.; * - `negative`: Define a cor do `po-badge` com a cor de feedback negative.; * - `warning`: Define a cor do `po-badge` com a cor de feedback warning.; * - `disabled`: Define a cor do `po-badge` com a cor de feedback disabled; * */ set status(value: PoBadgeStatus); get status(): PoBadgeStatus; /** * @description * * Define o tamanho do `po-badge` * * Valores válidos: * - `small`: o `po-badge` fica do tamanho padrão, com 8px de altura.; * - `medium`: o `po-badge` fica do tamanho padrão, com 16px de altura.; * - `large`: o `po-badge` fica do tamanho padrão, com 24px de altura.; * * @default `medium` */ size: PoBadgeSize; /** * @description * * Exibe uma borda para o `po-badge` * * > Pode personalizar cor da bordar com a propriedade `p-color-border` */ showBorder: boolean; /** * @description * * Número exibido no componente, caso o mesmo seja maior que 9 o valor exibido será 9+. */ set value(value: number); get value(): number; }