import { ChangeDetectorRef, EventEmitter, OnDestroy, TemplateRef } from '@angular/core'; import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms'; import { ErrorAsyncProperties } from '../shared/interfaces/error-async-properties.interface'; import { PoHelperComponent, PoHelperOptions } from '../../po-helper'; import { PoFieldContainerComponent } from '../po-field-container'; /** * @description * * Este é um componente baseado em input, com várias propriedades do input nativo e outras * propriedades extras como: máscara, pattern, mensagem de erro e etc. * Você deve informar a variável que contém o valor como [(ngModel)]="variavel", para que o * input receba o valor da variável e para que ela receba as alterações do valor (two-way-databinding). * A propriedade name é obrigatória para que o formulário e o model funcionem corretamente. * * Importante: * * - Caso o input tenha um [(ngModel)] sem o atributo name, ocorrerá um erro de angular. * Então você precisa informar o atributo name ou o atributo [ngModelOptions]="{standalone: true}". * Exemplo: [(ngModel)]="pessoa.nome" [ngModelOptions]="{standalone: true}". * * #### Tokens customizáveis * * É possível alterar o estilo do componente usando os seguintes tokens (CSS):
* Obs: Só é possível realizar alterações ao adicionar a classe `.po-input` * * > Para correto alinhamento é recomendado o uso das classes de espaçamento do [Grid System](https://po-ui.io/guides/grid-system). * * > 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 input | `var(--color-neutral-dark-70)` | * | `--background` | Cor de background | `var(--color-neutral-light-05)` | * | `--padding` | Preenchimento | `0 0.5rem` | * | `--text-color` | Cor do texto | `var(--color-neutral-dark-90)` | * | `--field-container-title-justify` | Alinhamento horizontal do título (`justify-content`) | `space-between` | * | `--field-container-title-flex` | Flex do título (`flex`) | `1 auto` | * | **Hover** | | | * | `--color-hover` | Cor principal no estado hover | `var(--color-brand-01-dark)` | * | `--background-hover` | Cor de background no estado hover | `var(--color-brand-01-lightest)` | * | **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)` | * | **Disabled** | | | * | `--color-disabled` | Cor principal no estado disabled | `var(--color-neutral-light-30)` | * | `--background-disabled` | Cor de background no estado disabled | `var(--color-neutral-light-20)` | * | `--text-color-disabled` | Cor do texto no estado disabled | `var(--color-neutral-dark-70)` | * *
*/ export declare abstract class PoInputBaseComponent implements ControlValueAccessor, Validator, OnDestroy { protected cd?: ChangeDetectorRef; fieldContainer?: PoFieldContainerComponent; helperEl?: PoHelperComponent; 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; /** * @optional * * @description * * Define o ícone que será exibido no início do campo. * * É 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: * ``` * * * * * * ``` * > Para o ícone enquadrar corretamente, deve-se utilizar `font-size: inherit` caso o ícone utilizado não aplique-o. */ icon?: string | TemplateRef; /** * @optional * * @description * * Sempre emite as alterações do model mesmo quando o valor atual for igual ao valor anterior. * * @default `false` */ emitAllChanges: boolean; /** Rótulo do campo. */ label?: string; /** Texto de apoio do campo. */ help?: string; /** Nome e identificador do campo. */ name: string; /** * @optional * * @description * * Realiza alguma validação customizada assíncrona no componente. * Aconselhamos a utilização dessa propriedade somente em componentes que não estejam * utilizando `Reactive Forms`. Em formulários reativos, pode-se utilizar o próprio `asyncValidators`. */ errorAsyncProperties: ErrorAsyncProperties; /** * @description * * Mensagem que será apresentada quando o `pattern` ou a máscara não for satisfeita. * * > Por padrão, esta mensagem não é apresentada quando o campo estiver vazio, mesmo que ele seja requerido. * Para exibir a mensagem com o campo vazio, utilize a propriedade `p-required-field-error-message` em conjunto. */ errorPattern?: 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 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 na propriedade `p-error-pattern` se o campo estiver vazio e for requerido. * * > Necessário que a propriedade `p-required` esteja habilitada. * * @default `false` */ showErrorMessageRequired: boolean; /** * @description * * Converte o conteúdo do campo em maiúsulo automaticamente. * */ upperCase: boolean; _maskNoLengthValidation: boolean; /** * @description * * Controla como o componente aplica as validações de comprimento mínimo (`minLength`) e máximo (`maxLength`) quando há uma máscara (`p-mask`) definida. * * - Quando `true`, apenas os caracteres alfanuméricos serão contabilizados para a validação dos comprimentos. * - Quando `false`, todos os caracteres, incluindo os especiais da máscara, serão considerados na validação. * * > Esta propriedade é ignorada quando utilizada em conjunto com `p-mask-format-model`. * * Exemplo: * ``` * * ``` * - Entrada: `123-456` → Validação será aplicada somente aos números, ignorando o caractere especial `-`. * * @default `false` */ set maskNoLengthValidation(value: boolean); get maskNoLengthValidation(): boolean; /** * * @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; type: string; onChangePropagate: any; objMask: any; modelLastUpdate: any; isInvalid: boolean; hasValidatorRequired: boolean; private subscription; protected onTouched: any; protected passedWriteValue: boolean; protected validatorChange: any; private _loading; private _maxlength?; private _minlength?; private _noAutocomplete?; private _placeholder?; private _size?; private _initialSize?; /** * @optional * * @description * * Define a propriedade nativa `autocomplete` do campo como `off`. * * > No componente `po-password` será definido como `new-password`. * * Nos componentes `po-password` e `po-login` o valor padrão será `true`. * * @default `false` */ set noAutocomplete(value: boolean); get noAutocomplete(): boolean; /** * @optional * * @description * * Mensagem que aparecerá enquanto o campo não estiver preenchido. * * @default '' */ set placeholder(value: string); get placeholder(): string; /** * @description * * Se verdadeiro, desabilita o campo. * * @default `false` */ disabled?: boolean; set setDisabled(disabled: string); /** * @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; /** Indica que o campo será somente leitura. */ readonly?: boolean; set setReadonly(readonly: string); /** * @optional * * @description * * Define que o campo será obrigatório. * > Esta propriedade é desconsiderada quando o input está desabilitado `(p-disabled)`. * * @default `false` */ required?: boolean; set setRequired(required: string); /** * @optional * * @description * * Define o tamanho do componente: * - `small`: altura do input como 32px (disponível apenas para acessibilidade AA). * - `medium`: altura do input como 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; /** * 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; /** Se verdadeiro, o campo receberá um botão para ser limpo. */ clean?: boolean; set setClean(clean: string); /** * @description * * Expressão regular para validar o campo. * Quando o campo possuir uma máscara `(p-mask)` será automaticamente validado por ela, porém * é possível definir um p-pattern para substituir a validação da máscara. */ pattern?: string; set setPattern(pattern: string); /** * @optional * * @description * * Indica a quantidade máxima de caracteres que o campo aceita. */ set maxlength(value: number); get maxlength(): number; /** * @optional * * @description * * Indica a quantidade mínima de caracteres que o campo aceita. */ set minlength(value: number); get minlength(): number; /** * @description * * Indica uma máscara para o campo. Exemplos: (+99) (99) 99999?-9999, 99999-999, 999.999.999-99. * A máscara gera uma validação automática do campo, podendo esta ser substituída por um REGEX específico * através da propriedade p-pattern. * O campo será sinalizado e o formulário ficará inválido quando o valor informado estiver fora do padrão definido, * mesmo quando desabilitado. */ mask?: string; set setMask(mask: string); /** * @description * * Indica se o `model` receberá o valor formatado pela máscara ou apenas o valor puro (sem formatação). * * @default `false` */ maskFormatModel?: boolean; set setMaskFormatModel(maskFormatModel: string); /** * @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; constructor(cd?: ChangeDetectorRef); ngOnDestroy(): void; protected onThemeChange(): void; callOnChange(value: any): void; callUpdateModelWithTimeout(value: any): void; controlChangeModelEmitter(value: any): void; emitAdditionalHelp(): void; getAdditionalHelpTooltip(): string; setDisabledState(isDisabled: boolean): void; registerOnChange(func: any): void; registerOnTouched(func: any): void; registerOnValidatorChange(fn: () => void): void; /** * Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`. * Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`. * * > Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco. * * ``` * // Exemplo com p-label e p-helper * * ``` * * ``` * ... * onKeyDown(event: KeyboardEvent, inp: PoNomeDoComponente): void { * if (event.code === 'F9') { * inp.showAdditionalHelp(); * } * } * ``` */ showAdditionalHelp(): boolean; updateModel(value: any): void; validate(c: AbstractControl): { [key: string]: any; }; writeValue(value: any): void; protected validateModel(): void; protected isAdditionalHelpEventTriggered(): boolean; mapSizeToIcon(size: string): string; private validatePatternOnWriteValue; private applySizeBasedOnA11y; /** * Função que atribui foco ao componente. * * Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma: * * ``` * import { PoNomeDoComponenteComponent } from '@po-ui/ng-components'; * * ... * * @ViewChild(PoNomeDoComponenteComponent, { static: true }) nomeDoComponente: PoNomeDoComponenteComponent; * * focusComponent() { * this.nomeDoComponente.focus(); * } * ``` */ abstract focus(): void; abstract writeValueModel(value: any): void; abstract extraValidation(c: AbstractControl): { [key: string]: any; }; abstract getScreenValue(): string; }