import { EventEmitter, TemplateRef } from '@angular/core'; import { PoModalAction } from './po-modal-action.interface'; import { PoLanguageService } from '../../services/po-language/po-language.service'; /** * @description * * O componente `po-modal` é utilizado para incluir conteúdos rápidos e informativos. * * No cabeçalho do componente é possível definir um título e como também permite ocultar o ícone de fechamento da modal. * * Em seu corpo é possível definir um conteúdo informativo, podendo utilizar componentes como por exemplo `po-chart`, * `po-table` e os demais componentes do PO. * * No rodapé encontram-se os botões de ação primária e secundária, no qual permitem definir uma ação e um rótulo, bem como * definir um estado de carregando e / ou desabilitado e / ou definir o botão com o tipo *danger*. Também é possível utilizar * o componente [`PoModalFooter`](/documentation/po-modal-footer). * * > É possível fechar a modal através da tecla *ESC*, quando a propriedade `p-hide-close` não estiver habilitada. * * #### 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** | | | * | `--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)` | * | `--color-overlay`   | Cor da camada visual temporária | `var(--color-neutral-dark-80)` | * | `--opacity-overlay`   | Opacidade da camada visual temporária   | `0.7` | * | `--color-divider`   | Cor das divisões do modal | `var(--color-neutral-light-20)` | * | `--padding-header`   | Padding do header do modal | `var(--spacing-sm) var(--spacing-md)` | * | `--padding-body`   | Padding do corpo do modal | `var(--spacing-md) var(--spacing-2xl) var(--spacing-2xl) var(--spacing-md) ` | * */ export declare class PoModalBaseComponent { /** Título da modal. */ title: string; /** Evento disparado ao fechar o modal. */ closeModal: EventEmitter; /** * Deve ser definido um objeto que implementa a interface `PoModalAction` contendo a label e a função da primeira ação. * Caso esta propriedade não seja definida ou esteja incompleta, automaticamente será adicionado um botão de ação com * a função de fechar a modal. */ primaryAction?: PoModalAction; /** Deve ser definido um objeto que implementa a interface `PoModalAction` contendo a label e a função da segunda ação. */ secondaryAction?: PoModalAction; language: any; literals: any; isHidden: boolean; onXClosed: EventEmitter; private _componentsSize?; private _initialComponentsSize?; private _hideClose?; private _size?; /** * Define o tamanho da modal. * * Valores válidos: * - `sm` (pequeno) * - `md` (médio) * - `lg` (grande) * - `xl` (extra grande) * - `auto` (automático) * * > Quando informado `auto` a modal calculará automaticamente seu tamanho baseado em seu conteúdo. * Caso não seja informado um valor, a modal terá o tamanho definido como `md`. * */ set size(value: string); get size(): string; /** * Define o fechamento da modal ao clicar fora da mesma. * Informe o valor `true` para ativar o fechamento ao clicar fora da modal. */ clickOut?: boolean; set setClickOut(value: boolean | string); /** * @optional * * @description * * Define o tamanho dos componentes de formulário no modal: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > 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 componentsSize(value: string); get componentsSize(): string; /** * @optional * * @description * * Oculta o ícone de fechar do cabeçalho da modal. * * > Caso a propriedade estiver habilitada, não será possível fechar a modal através da tecla *ESC*. * * @default `false` */ set hideClose(value: boolean); get hideClose(): boolean; /** * @optional * * @description * Ícone exibido ao lado esquerdo do label do titúlo da modal. * * É 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?: string | TemplateRef; constructor(poLanguageService: PoLanguageService); /** Função para fechar a modal. */ close(xClosed?: boolean): void; /** Função para abrir a modal. */ open(): void; validPrimaryAction(): void; protected onThemeChange(): void; private applySizeBasedOnA11y; }