import { EventEmitter, TemplateRef } from '@angular/core'; import { PoButtonType } from './enums/po-button-type.enum'; /** * @description * * O `po-button` permite que o usuário execute ações predefinidas pelo desenvolvedor. * * Através dos tipos, é possível identificar a importância de cada ação. * * #### Boas práticas * * - Evite `labels` extensos que quebram o layout do `po-button`, use `labels` diretos, curtos e intuitivos. * - Utilize apenas um `po-button` configurado como `primary` por página. * - Para ações irreversíveis use sempre a propriedade `p-danger`. * * #### Acessibilidade tratada no componente * * Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo proprietário do conteúdo. São elas: * * - Quando em foco, o botão é ativado usando as teclas de Espaço e Enter do teclado. [W3C WAI-ARIA 3.5 Button - Keyboard Interaction](https://www.w3.org/WAI/ARIA/apg/#keyboard-interaction-3) * - A área do foco precisar ter uma espessura de pelo menos 2 pixels CSS e o foco não pode ficar escondido por outros elementos da tela. [WCAG 2.4.12: Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced) * * #### 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 | * |------------------------------------------|-------------------------------------------------------|---------------------------------------------------| * | `--font-family` | Família tipográfica usada | `var(--font-family-theme)` | * | `--font-size` | Tamanho da fonte | `var(--font-size-default)` | * | `--font-weight` | Peso da fonte | `var(--font-weight-bold)` | * | `--line-height` | Tamanho da label | `var(--line-height-none)` | * | `--border-radius` | Contém o valor do raio dos cantos do elemento  | `var(--border-radius-md)` | * | `--border-width` | Contém o valor da largura dos cantos do elemento | `var(--border-width-md)` | * | `--padding` | Preenchimento | `0 1em` | | --- | * | **Danger** | | | * | `--text-color-danger` | Cor do texto no estado danger | `var(--color-neutral-light-00)` | * | `--color-button-danger` | Cor do botão no estado danger | `var(--color-feedback-negative-dark)` | * | `--color-danger-hover` | Cor de hover no estado danger | `var(--color-feedback-negative-darker)` | * | `--color-danger-pressed` | Cor pressionada no estado danger | `var(--color-feedback-negative-darkest)` | * | `--background-danger-hover` | Cor de background de hover no estado danger | `var(--color-feedback-negative-lighter)` | * | `--border-color-danger-hover` | Cor da borda de hover no estado danger | `var(--color-feedback-negative-darkest)` | * | `--background-danger-pressed` | Cor de background pressionado no estado danger | `var(--color-feedback-negative-light)` | * | `--background-color-button-danger`  | Cor de background do botão no estado danger | `var(--color-transparent)` | * | **Default Values** | | | * | `--text-color` | Cor do texto | `var(--color-neutral-light-00)` | * | `--color` | Cor principal do botão | `var(--color-action-default)` | * | `--background-color` | Cor de background | `var(--color-transparent)` | * | `--border-color` | Cor da borda | `var(--color-transparent)` | * | `--shadow` | Contém o valor da sombra do elemento | `var(--shadow-none)` | * | **Hover** | | | * | `--color-hover` | Cor principal no estado hover | `var(--color-action-hover)` | * | `--background-hover` | Cor de background no estado hover | `var(--color-brand-01-lighter)` | * | `--border-color-hover` | Cor da borda no estado hover | `var(--color-brand-01-darkest)` | * | **Focused** | | | * | `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` | * | **Pressed** | | | * | `--color-pressed` | Cor principal no estado de pressionado | `var(--color-action-pressed)` | * | `--background-pressed` | Cor de background no estado de pressionado  | `var(--color-brand-01-light)` | * | **Disabled** | | | * | `--text-color-disabled` | Cor do texto no estado disabled | `var(--color-neutral-dark-70)` | * | `--color-disabled` | Cor principal no estado disabled | `var(--color-action-disabled)` | * | `--background-color-disabled` | Cor de background no estado disabled | `var(--color-transparent)` | * */ export declare class PoButtonBaseComponent { /** * @optional * * @description * * Label do botão. */ readonly label: import("@angular/core").InputSignal; /** * @optional * * @description * Ícone exibido ao lado esquerdo do label do botão. * * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons), conforme exemplo: * ``` * * ``` * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, desde que a biblioteca * esteja carregada no projeto: * ``` * * ``` * 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. */ readonly icon: import("@angular/core").InputSignal>; /** * @optional * * @description * Define o tipo do botão. * * @default `PoButtonType.Button` */ readonly type: import("@angular/core").InputSignal; blur: EventEmitter; /** Ação que será executada quando o usuário clicar sobre o `po-button`. */ click: EventEmitter; private _danger?; private _disabled?; private _loading?; private _kind?; private _size?; private _initialSize?; protected hasSize?: boolean; /** * @optional * * @description * * Exibe um ícone de carregamento à esquerda do _label_ do botão. * * > Quando esta propriedade estiver habilitada, desabilitará o botão. * * @default `false` */ set loading(value: boolean); get loading(): boolean; /** * @optional * * @description * * Deve ser usado em ações irreversíveis que o usuário precisa ter cuidado ao executá-la, como a exclusão de um registro. * * > A propriedade `p-kind="tertiary"` será inativada ao utilizar esta propriedade. */ set danger(value: boolean); get danger(): boolean; /** * @optional * * @description * * Define o estilo visual do componente conforme valores especificados no enum `PoButtonKind`: * - `primary`: destaca o botão, sendo recomendado para ações principais. * - `secondary`: estilo padrão, ideal para ações secundárias. * - `tertiary`: exibe o botão sem preenchimento no fundo, indicado para ações opcionais. * * @default `secondary` */ set kind(value: string); get kind(): string; /** * @optional * * @description * * Desabilita o `po-button` e não permite que o usuário interaja com o mesmo. * * @default `false` */ set disabled(value: boolean); get disabled(): boolean; /** * @optional * * @description * * Define um `aria-label` para o `po-button`. * * Caso esta propriedade não seja informada será considerada a label do botão. * * > Em caso de botões com apenas ícone a atribuição de valor à esta propriedade é muito importante para acessibilidade. */ readonly ariaLabel: import("@angular/core").InputSignal; ariaExpanded?: boolean; /** * @optional * * @description * * Define o `tabindex` do elemento `