import { EventEmitter, TemplateRef } from '@angular/core';
import { PoPopupAction } from '../po-popup';
import { PoTagType } from '../po-tag';
import { PoWidgetAvatar } from './interfaces/po-widget-avatar.interface';
/**
 *
 * @description
 *
 * O componente `po-widget` é recomendado para exibição de *dashboards*, podendo ser utilizado
 * para incluir vários tipos de conteúdo como: gráficos, tabelas, grids e imagens.
 *
 * Além da exibição de conteúdos, este componente possibilita adicionar ações e um link
 * para ajuda, como também possibilita ser utilizado com ou sem sombra.
 *
 * Para controlar sua largura, é possível utilizar o [Grid System](/guides/grid-system) para um maior
 * controle de seu redimensionamento, assim possibilitando o tratamento para diferentes resoluções.
 *
 * #### Boas práticas
 *
 * Utilize um tamanho mínimo de largura de aproximadamente `18.75rem` no componente.
 *
 * #### Acessibilidade tratada no componente
 *
 * Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas. São elas:
 * - Utiliza medidas relativas, para se adequar às preferências e necessidades de quem for utilizar o sistema.
 * - Desenvolvido com uso de controles padrões HTML, o que permite a identificação na interface por tecnologias assistivas. (WCAG [4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value))
 * - O foco é visível e possui uma espessura superior a 2 pixels CSS, não ficando escondido por outros elementos da tela. (WCAG [2.4.12: Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced))
 * - Quando selecionável, prevê interação por teclado, podendo ser selecionado através da tecla space (WCAG [2.4.1 - Keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard))
 *
 * #### 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)`                                                       |
 * | `--font-weight`                              | Peso da fonte                                                    | `var(--font-weight-bold)`                                                   |
 * | `--font-color`                               | Cor da fonte                                                     | `var(--color-neutral-dark-95)`                                              |
 * | `--padding` - `@deprecated 21.x.x`           | Preenchimento do componente                                      | `1rem`                                                                      |
 * | `--padding-header`                           | Preenchimento do header                                          | `var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm)`   |
 * | `--padding-body`                             | Preenchimento do body                                            | `var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm)`   |
 * | `--padding-avatar`                           | Preenchimento do avatar                                          | `var(--spacing-sm) 0 var(--spacing-xs) var(--spacing-sm)`                   |
 * | `--padding-footer`                           | Preenchimento do footer                                          | `var(--spacing-xs) var(--spacing-sm) var(--spacing-sm) var(--spacing-sm)`   |
 * | `--border-radius`                            | Contém o valor do raio dos cantos do elemento&nbsp;              | `var(--border-radius-md)`                                                   |
 * | `--border-width`                             | Contém o valor da largura dos cantos do elemento&nbsp;           | `var(--border-width-sm)`                                                    |
 * | `--border-color`                             | Cor da borda                                                     | `var(--color-neutral-light-20)`                                             |
 * | `--background`                               | Cor de background                                                | `var(--color-neutral-light-00)`                                             |
 * | `--shadow`                                   | Contém o valor da sombra do elemento                             | `var(--shadow-md)`                                                          |
 * | **Hover**                                    |                                                                  |                                                                             |
 * | `--border-color-hover`                       | Cor da borda no estado hover                                     | `var(--color-action-hover)`                                                 |
 * | **Focused**                                  |                                                                  |                                                                             |
 * | `--color-focused`                            | Cor principal no estado de focus                                 | `var(--color-action-default)`                                               |
 * | `--outline-color-focused` &nbsp;             | Cor do outline do estado de focus                                | `var(--color-action-focus)`                                                 |
 *
 */
export declare class PoWidgetBaseComponent {
    private _size?;
    private _initialSize?;
    /** Descrição da segunda ação. */
    /**
     * @optional
     *
     * @description
     * Define o label e exibe a ação secundária no footer do componente.
     *
     * > Exibida apenas quando `p-primary-label` estiver definida.
     */
    secondaryLabel?: string;
    /**
     * @optional
     *
     * @description
     *
     * Caso verdadeiro o botão da ação `p-primary-label` ativará o modo `danger`.
     *
     * > Incompatível com o tipo **tertiary** da propriedade `p-kind-primary-action`.
     *
     * @default `false`
     */
    dangerPrimaryAction: boolean;
    /**
     * @optional
     *
     * @description
     *
     * Caso verdadeiro o botão da ação `p-secondary-label` ativará o modo `danger`.
     *
     * > Incompatível com o tipo **tertiary** da propriedade `p-kind-primary-action`.
     *
     * @default `false`
     */
    dangerSecondaryAction: boolean;
    /**
     * @optional
     *
     * @description
     *
     * Define o estilo do botão da ação `p-primary-label`, conforme o enum `PoButtonKind`.
     *
     * @default `tertiary`
     */
    kindPrimaryAction?: string;
    /**
     * @optional
     *
     * @description
     *
     * Define o estilo do botão da ação `p-secondary-label`, conforme o enum `PoButtonKind`.
     *
     * @default `tertiary`
     */
    kindSecondaryAction?: string;
    /**
     * @optional
     *
     * @description
     *
     * Label da tag exibida no header.
     *
     * > Quando a tag atingir uma largura máxima de 15rem (240px), será truncado com reticências.
     * O conteúdo completo poderá ser visualizado ao passar o mouse sobre a tag, por meio do tooltip.
     */
    tagLabel?: string;
    /**
     * @optional
     *
     * @description
     *
     * Define o tipo da `p-tag`, conforme o enum **PoTagType**.
     *
     * 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.
     *
     * @default `success`
     */
    tagType: PoTagType | string;
    /**
     * @optional
     *
     * @description
     *
     * Define o ícone exibido ao lado do label da `p-tag`.
     *
     * É possível usar qualquer um dos ícones da [Biblioteca de ícones PO UI](https://po-ui.io/icons), conforme exemplo:
     * ```
     * <po-widget p-tag-icon="an an-user"></po-widget>
     * ```
     * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, desde que a biblioteca
     * esteja carregada no projeto:
     * ```
     * <po-widget p-tag-icon="fa fa-podcast"></po-widget>
     * ```
     *
     * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo:
     * ```
     * <po-widget [p-tag-icon]="template"></po-widget>
     *
     * <ng-template #template>
     *   <i class="fa fa-podcast" style="font-size: inherit;"></i>
     * </ng-template>
     * ```
     * > Para o ícone enquadrar corretamente, deve-se utilizar `font-size: inherit` caso o ícone utilizado não aplique-o.
     */
    tagIcon: string | TemplateRef<void>;
    /**
     * @optional
     *
     * @description
     * Define o posicionamento da `po-tag` no cabeçalho do Widget:
     * - `right`: posicionada no canto superior direito do cabeçalho.
     * - `top`: posicionada à esquerda, acima do título (quando houver).
     * - `bottom`: posicionada à esquerda, abaixo do título (quando houver).
     *
     * @default `right`
     */
    tagPosition: import("@angular/core").InputSignalWithTransform<string, string>;
    /**
     * @optional
     *
     * @description
     *
     * Lista de ações exibidas no header do componente.
     * As propriedades das ações seguem a interface `PoPopupAction`.
     */
    actions: Array<PoPopupAction>;
    /**
     * @optional
     *
     * @description
     *
     * Define o tamanho dos botões do componente:
     * - `small`: altura de 32px (disponível apenas para acessibilidade AA).
     * - `medium`: altura de 44px.
     *
     * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido.
     * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme).
     *
     * @default `medium`
     */
    set size(value: string);
    get size(): string;
    /**
     * @optional
     *
     * @description
     *
     * Define o avatar a ser exibido à esquerda no Widget.
     */
    avatar: import("@angular/core").InputSignalWithTransform<PoWidgetAvatar, PoWidgetAvatar>;
    /**
     * @optional
     *
     * @description
     *
     * Evento disparado quando o usuário clicar no componente.
     * > Quando este evento está em uso, uma sombra (shadow) é aplicada automaticamente ao componente.
     */
    click: EventEmitter<MouseEvent | KeyboardEvent>;
    /**
     * @optional
     *
     * @description
     *
     * Evento disparado quando a propriedade `p-disabled` for alterada.
     */
    onDisabled: EventEmitter<any>;
    /**
     * @optional
     *
     * @description
     *
     * Evento disparado ao clicar na ação `p-primary-label`.
     */
    primaryAction: EventEmitter<any>;
    /**
     * @optional
     *
     * @description
     *
     * Evento disparado ao clicar na ação `p-secondary-label`.
     */
    secondaryAction: EventEmitter<any>;
    /**
     * @optional
     *
     * @description
     * Evento disparado ao clicar em **Configurações** incluído no menu de ações do header.
     */
    setting: EventEmitter<any>;
    /**
     * @optional
     *
     * @description
     * Evento disparado ao clicar no título definido em `p-title`.
     */
    titleAction: EventEmitter<any>;
    containerHeight?: string;
    id: string;
    private _background?;
    private _disabled?;
    private _height?;
    private _help?;
    private _noShadow?;
    private _primary?;
    private _primaryLabel?;
    private _title?;
    /**
     * @optional
     *
     * @description
     *
     * Define uma imagem de fundo.
     * > Se a imagem escolhida intervir na legibilidade do texto contido no `p-widget`,
     * pode-se utilizar a propriedade `p-primary` em conjunto para que os textos fiquem na cor branca.
     *
     */
    set background(value: string);
    get background(): string;
    /**
     * @optional
     *
     * @description
     *
     * Desabilita o componente.
     *
     * @default `false`
     */
    set disabled(value: boolean);
    get disabled(): boolean;
    /**
     * @optional
     *
     * @description
     *
     * Define a altura do componente.
     * > Caso não seja informado valor, a propriedade irá assumir o tamanho do conteúdo.
     */
    set height(value: number);
    get height(): number;
    /**
     * @optional
     *
     * @description
     *
     * Link de ajuda incluído no menu de ações do header.
     */
    set help(value: string);
    get help(): string;
    /**
     *
     * @optional
     *
     * @description
     *
     * Desabilita a sombra do componente quando o mesmo for clicável.
     * > A sombra é exibida por padrão apenas quando o evento `p-click` está definido.
     *
     * @default `true`
     */
    set noShadow(value: boolean);
    get noShadow(): boolean;
    /**
     * @optional
     *
     * @description
     *
     * Opção para que o `po-widget` fique em destaque.
     *
     * @default `false`
     */
    set primary(value: boolean);
    get primary(): boolean;
    /**
     * @optional
     *
     * @description
     *
     * Define o label e exibe a ação primária no footer do componente.
     *
     */
    set primaryLabel(value: string);
    get primaryLabel(): string;
    /**
     * @optional
     *
     * @description
     *
     * Título do componente.
     *
     * > Quando o conteúdo exceder o espaço disponível, o texto será truncado com reticências.  O conteúdo completo poderá
     * ser visualizado ao passar o mouse sobre a tag, por meio do tooltip.
     */
    set title(value: string);
    get title(): string;
    protected onThemeChange(): void;
    private applySizeBasedOnA11y;
    private transformAvatar;
    private transformTagPosition;
}
