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  | `var(--border-radius-md)` | * | `--border-width` | Contém o valor da largura dos cantos do elemento  | `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`   | 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: * ``` * * ``` * 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. */ tagIcon: string | TemplateRef; /** * @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; /** * @optional * * @description * * Lista de ações exibidas no header do componente. * As propriedades das ações seguem a interface `PoPopupAction`. */ actions: Array; /** * @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; /** * @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; /** * @optional * * @description * * Evento disparado quando a propriedade `p-disabled` for alterada. */ onDisabled: EventEmitter; /** * @optional * * @description * * Evento disparado ao clicar na ação `p-primary-label`. */ primaryAction: EventEmitter; /** * @optional * * @description * * Evento disparado ao clicar na ação `p-secondary-label`. */ secondaryAction: EventEmitter; /** * @optional * * @description * Evento disparado ao clicar em **Configurações** incluído no menu de ações do header. */ setting: EventEmitter; /** * @optional * * @description * Evento disparado ao clicar no título definido em `p-title`. */ titleAction: EventEmitter; 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; }