import { ChangeDetectorRef, EventEmitter } from '@angular/core'; import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms'; import { PoHelperOptions } from '../../po-helper'; /** * @description * * Este é um componente de entrada de dados que possibilita o preechimento com múltiplas linhas. * É recomendado para observações, detalhamentos e outras situações onde o usuário deva preencher com um texto. * * Importante: * * - A propriedade `name` é obrigatória para que o formulário e o `model` funcionem corretamente. Do contrário, ocorrerá um erro de * _Angular_, onde será necessário informar o atributo `name` ou o atributo `[ngModelOptions]="{standalone: true}"`, por exemplo: * * ``` * * * ``` * * #### Acessibilidade tratada no componente * Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas. São elas: * * - O Text area foi desenvolvido com uso de controles padrões HTML, o que permite a identificação do mesmo 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) * - A identificação do erro acontece também através da mudança de cor do campo, mas também de um ícone * junto da mensagem. [WGAG 1.4.1: Use of Color, 3.2.4: Consistent Identification](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color) * * #### 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-default)` | * | `--text-color-placeholder` | Cor do texto placeholder | `var(--color-neutral-light-30)` | * | `--color` | Cor pincipal do campo | `var(--color-neutral-dark-70)` | * | `--background` | Cor de background | `var(--color-neutral-light-05)` | * | `--field-container-title-justify` | Alinhamento horizontal do título (`justify-content`) | `space-between` | * | `--field-container-title-flex` | Flex do título (`flex`) | `1 auto` | * */ export declare abstract class PoTextareaBaseComponent implements ControlValueAccessor, Validator { cd: ChangeDetectorRef; additionalHelpEventTrigger: string | undefined; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.** * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelpTooltip?: string; /** * @optional * * @description * * Define que o popover (`p-helper` e/ou `p-error-limit`) será incluído no body da página e não * dentro do componente. Essa opção pode ser necessária em cenários com containers que possuem scroll ou overflow * escondido, garantindo o posicionamento correto do tooltip próximo ao elemento. * * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover. * * @default `false` */ appendBox?: boolean; /** * @optional * * @description * * Aplica foco no elemento ao ser iniciado. * * > Caso mais de um elemento seja configurado com essa propriedade, apenas o último elemento declarado com ela terá o foco. * * @default `false` */ autoFocus: boolean; /** * @optional * * @description * Define se o título do campo será exibido de forma compacta. * * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por: * - `po-label` * - `p-requirement (showRequired)` * - `po-helper` * * Ou seja, todos os elementos relacionados ao título do campo * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam * a seguir o comportamento de layout compacto. * * Também é possível definir esse comportamento de forma global, * uma única vez, na folha de estilo geral da aplicação, por meio * da customização dos tokens CSS: * * - `--field-container-title-justify` * - `--field-container-title-flex` * * Exemplo: * * ``` * :root { * --field-container-title-justify: flex-start; * --field-container-title-flex: 0 1 auto; * } * ``` * * Dessa forma, o layout compacto passa a ser o padrão da aplicação, * sem a necessidade de definir a propriedade individualmente em cada campo. * * @default `false` */ compactLabel: import("@angular/core").InputSignalWithTransform; /** Label do campo. */ label?: string; /** Texto de apoio do campo. */ help?: string; /** Nome e Id do componente. */ name: string; /** * @optional * * @description * * Define se a indicação de campo opcional será exibida. * * > Não será exibida a indicação se: * - O campo conter `p-required`; * - Não possuir `p-help` e/ou `p-label`. * * @default `false` */ optional: boolean; /** * @optional * * @description * * Exibe a mensagem setada se o campo estiver vazio e for requerido. * * > Necessário que a propriedade `p-required` esteja habilitada. * */ fieldErrorMessage: string; /** * @optional * * @description * * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. * * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo. * * @default `false` */ errorLimit: boolean; /** * @optional * * @description * * Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. * > Para mais informações acesse: https://po-ui.io/documentation/po-helper. * * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado. */ poHelperComponent: import("@angular/core").InputSignal; /** * @optional * * @description * * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ labelTextWrap: import("@angular/core").InputSignal; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Evento disparado ao clicar no ícone de ajuda adicional. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelp: EventEmitter; /** * @optional * * @description * * Evento disparado ao sair do campo. */ blur: EventEmitter; /** * @optional * * @description * * Evento disparado ao entrar do campo. */ enter: EventEmitter; /** * @optional * * @description * * Evento disparado ao alterar valor e deixar o campo. */ change: EventEmitter; /** * @optional * * @description * * Evento disparado ao alterar valor do model. */ changeModel: EventEmitter; /** * @optional * * @description * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. * Retorna um objeto `KeyboardEvent` com informações sobre a tecla. */ keydown: EventEmitter; displayAdditionalHelp: boolean; private _disabled; private _loading; private _maxlength; private _minlength; private _placeholder; private _readonly; private _required; private _rows; private _size?; private _initialSize?; private modelLastUpdate; private onChangePropagate; private validatorChange; protected onTouched: any; protected hasValidatorRequired: boolean; /** Placeholder, mensagem que aparecerá enquanto o campo não estiver preenchido. */ set placeholder(value: string); get placeholder(): string; /** * @optional * * @description * * Indica que o campo será desabilitado. * * @default `false` */ set disabled(disabled: boolean); get disabled(): boolean; /** * @optional * * @description * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. * * @default `false` */ set loading(value: boolean); get loading(): boolean; get isDisabled(): boolean; /** * @optional * * @description * * Indica que o campo será somente leitura. * * @default `false` */ set readonly(readonly: boolean); get readonly(): boolean; /** * @optional * * @description * * Define que o campo será obrigatório. * > Esta propriedade é desconsiderada quando o input está desabilitado `(p-disabled)`. * * @default `false` */ set required(required: boolean); get required(): boolean; /** * Define se a indicação de campo obrigatório será exibida. * * > Não será exibida a indicação se: * - Não possuir `p-help` e/ou `p-label`. */ showRequired: boolean; /** * @optional * * @description * * Indica a quantidade mínima de caracteres que o campo aceita. */ set minlength(minlength: number); get minlength(): number; /** * @optional * * @description * * Indica a quantidade máxima de caracteres que o campo aceita. */ set maxlength(maxlength: number); get maxlength(): number; /** * @optional * * @description * * Indica a quantidade de linhas que serão exibidas. * * @default `3` */ set rows(value: number); get rows(): number; /** * @optional * * @description * * Define o tamanho do componente: * - `small` (disponível apenas para acessibilidade AA) * - `medium` * * > 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; constructor(cd: ChangeDetectorRef); protected onThemeChange(): void; protected onAfterThemeChange(): void; callOnChange(value: any): void; controlChangeModelEmitter(value: any): void; setDisabledState(isDisabled: boolean): void; registerOnChange(func: any): void; registerOnTouched(func: any): void; registerOnValidatorChange(func: any): void; validate(abstractControl: AbstractControl): { [key: string]: any; }; writeValue(value: any): void; protected mapSizeToIcon(size: string): string; protected validateModel(): void; private applySizeBasedOnA11y; abstract writeValueModel(value: any): void; }