import { EventEmitter, TemplateRef } from '@angular/core'; import { PoLanguageService } from './../../services/po-language/po-language.service'; import { PoTagOrientation } from './enums/po-tag-orientation.enum'; import { PoTagType } from './enums/po-tag-type.enum'; import { PoTagLiterals } from './interfaces/po-tag-literals.interface'; export declare const PoTagLiteralsDefault: { en: { remove: string; }; es: { remove: string; }; pt: { remove: string; }; ru: { remove: string; }; }; /** * @description * * Este componente permite exibir um valor em forma de um marcador colorido, sendo possível definir uma legenda e realizar customizações * na cor, iconografia e tipo. * * Além disso, é possível definir uma ação que será executada tanto ao *click* quanto através das teclas *enter/space* enquanto navega * utilizando a tecla *tab*. * * Seu uso é recomendado para informações que necessitem de destaque em forma de marcação. * * #### Tokens customizáveis * * É possível alterar o estilo do componente usando os seguintes tokens (CSS): * * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization). * * | Propriedade | Descrição | Valor Padrão | * |----------------------------------------|-------------------------------------------------------|-------------------------------------------------| * | **Default Values** | | | * | `--font-family` | Família tipográfica usada | `var(--font-family-theme)` | * | `--font-size` | Tamanho da fonte | `var(--font-size-sm)` | * | `--line-height` | Tamanho da label | `var(---line-height-sm)` | * | `--border-radius` | Contém o valor do raio dos cantos do elemento  | `var(--border-radius-pill)` | * | `--gap` | Espaçamento entre o label e o value | `var(--spacing-xs)` | * | **Neutral** | | | * | `--color-neutral` | Cor principal no estado neutral | `var(--color-neutral-light-10)` | * | `--text-color-positive` | Cor do texto no estado neutral | `var(--color-neutral-dark-80)` | * | **Positive** | | | * | `--color-positive` | Cor principal no estado positive | `var(--color-feedback-positive-lightest)` | * | `--text-color-positive` | Cor do texto no estado positive | `var(--color-feedback-positive-dark)` | * | **Negative** | | | * | `--color-negative` | Cor principal no estado danger | `var(--color-feedback-negative-lightest)` | * | `--text-color-negative` | Cor do texto no estado danger | `var(--color-feedback-negative-darker)` | * | **Warning** | | | * | `--color-tag-warning` | Cor principal no estado warning | `var(--color-feedback-warning-lightest)` | * | `--text-color-warning` | Cor do texto no estado warning | `var(--color-feedback-warning-darkest)` | * | **Info** | | | * | `--color-info` | Cor principal no estado info | `var(--color-feedback-info-lightest)` | * | `--text-color-info` | Cor do texto no estado info | `var(--color-feedback-info-dark)` | * | **Removable** | | | * | `--color` | Cor principal quando removable | `var(--color-brand-01-lightest)` | * | `--border-color` | Cor de borda quando removable   | `var(--color-brand-01-lighter)` | * | `--color-icon` | Cor do ícone quando removable   | `var(--color-action-default)` | * | `--text-color` | Cor do texto quando removable   | `var(--color-neutral-dark-80)` | * | `--color-hover` | Cor do hover no estado removable   | `var(--color-brand-01-lighter)` | * | **Focused** | | | * | `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` | * | **Disabled** | | | * | `--color-disabled` | Cor principal no estado disabled | `var(--color-neutral-light-20)` | * | `--border-color-disabled` | Cor da borda no estado disabled   | `var(--color-action-disabled)` | * | `--color-icon-disabled` | Cor do icone no estado disabled   | `var(--color-action-disabled)` | * | `--text-color-disabled` | Cor do texto no estado disabled   | `var(--color-neutral-mid-60)` | * */ export declare class PoTagBaseComponent { /** * @optional * * @description * * Define uma legenda que será exibida acima ou ao lado da *tag*, de acordo com a `p-orientation`. */ label?: string; /** * @optional * * @description * * Habilita a opção de remover a tag * * @default `false` */ removable: boolean; /** * @optional * * @description * * Desabilita o `po-tag` e não permite que o usuário interaja com o mesmo. * > A propriedade `p-disabled` somente terá efeito caso a propriedade `p-removable` esteja definida como `true`. * * @default `false` */ disabled: boolean; /** Texto da tag. */ value: string; appendInBody: boolean; /** * @optional * * @description * * Ação que será executada ao clicar sobre o `po-tag` e que receberá como parâmetro um objeto contendo o seu valor e tipo. * * O evento de click só funciona se a tag não for removível. */ click: EventEmitter; /** * @optional * * @description * * Ação que sera executada quando clicar sobre o ícone de remover no `po-tag` */ remove: EventEmitter; readonly poTagOrientation: typeof PoTagOrientation; customColor: any; customTextColor: any; private _color?; private _textColor?; private _icon?; private _orientation?; private _type?; private _literals; private readonly language; /** * @optional * * @description * * Determina a cor da tag. 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: * ``` * * ``` * * - Para uma melhor acessibilidade no uso do componente é recomendável utilizar cores com um melhor contraste em relação ao background; * - Para as cores legacy (`color-01` a `color-12`) e cores customizadas, o componente ajusta automaticamente a cor do texto para garantir legibilidade. * - Para as cores **Caption Tag Colors** (`caption-tag-01` a `caption-tag-35`), a cor do texto é fixa e definida via token CSS, não sendo possível alterá-la via `p-text-color`. * * > **Atenção:** A propriedade `p-type` sobrepõe esta definição. */ set color(value: string); get color(): string; /** * @optional * * @description * * Determina a cor do texto da tag. 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` * * - Para uma melhor acessibilidade no uso do componente é recomendável utilizar cores com um melhor contraste em relação ao background. * * > **Atenção:** A propriedade `p-type` sobrepõe esta definição. * * > **Atenção:** As cores da paleta **Caption Tag Colors** (`caption-tag-01` a `caption-tag-35`) não são aceitas nesta propriedade, * pois possuem cor de texto fixa definida via token CSS. */ set textColor(value: string); get textColor(): string; /** * @optional * * @description * * Define ou ativa um ícone que será exibido ao lado do valor da *tag*. * * Quando `p-type` estiver definida, basta informar um valor igual a `true` para que o ícone seja exibido conforme descrições abaixo: * - - `success` * - - `warning` * - - `danger` * - - `info` * * Também É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * * ``` * como também 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: * ``` * * * * * * ``` * > Para o ícone enquadrar corretamente, deve-se utilizar `font-size: inherit` caso o ícone utilizado não aplique-o. * * @default `false` */ set icon(value: boolean | string | TemplateRef); get icon(): boolean | string | TemplateRef; /** * @optional * * @description * * Define o *layout* de exibição. * * @default `vertical` */ set orientation(value: PoTagOrientation); get orientation(): PoTagOrientation; /** * @optional * * @description * * Define o tipo da *tag*. * * Valores válidos: * - `success`: cor verde utilizada para simbolizar sucesso ou êxito. * - `warning`: cor amarela que representa aviso ou advertência. * - `danger`: cor vermelha para erro ou aviso crítico. * - `info`: cor azul claro que caracteriza conteúdo informativo. * - `neutral`: cor cinza claro para uso geral. * * > Quando esta propriedade for definida, irá sobrepor a definição de `p-color` e `p-icon` somente será exibido caso seja `true`. * * @default `info` */ set type(value: PoTagType); get type(): PoTagType; forceIcon: boolean; /** * @optional * * @description * * Objeto com as literais usadas no `po-tag`. * * * Para utilizar, basta passar a literal customizada: * * ``` * const customLiterals: PoTagLiterals = { * remove: 'Remover itens' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente: * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do * [`PoI18nService`](/documentation/po-i18n) ou do browser. */ set literals(value: PoTagLiterals); get literals(): PoTagLiterals; constructor(languageService: PoLanguageService); }