import { EventEmitter } from '@angular/core'; import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms'; import { PoMask } from '../po-input/po-mask'; import { PoHelperOptions } from '../../po-helper'; import { PoLanguageService } from '../../../services'; import { PoTimerFormat } from '../../po-timer/enums/po-timer-format.enum'; /** * @description * * O `po-datetimepicker` é um componente para manipulação de data e hora, permitindo a digitação e/ou seleção * por meio de um calendário integrado com um painel de horários. * * O formato de exibição da data é determinado automaticamente pelo locale configurado, podendo ser alterado * pela propriedade `p-format-date`. O formato de hora pode ser 24h ou 12h (AM/PM), configurável via `p-format-time`. * * O idioma padrão do calendário será exibido de acordo com o navegador, caso tenha necessidade de alterar * use a propriedade `p-locale`. * * O componente aceita os seguintes formatos de entrada: * * - ISO 8601 com timezone: `'2026-05-12T14:30:00-03:00'` * - ISO 8601 UTC: `'2026-05-12T14:30:00Z'` * - ISO 8601 sem timezone: `'2026-05-12T14:30:00'` * - ISO 8601 apenas data: `'2026-05-12'` * - JavaScript Date Object: `new Date(2026, 4, 12, 14, 30)` * * O formato de saída do *model* é sempre ISO 8601 com timezone local: `'yyyy-mm-ddTHH:mm+/-HH:mm'` * (ou `'yyyy-mm-ddTHH:mm:ss+/-HH:mm'` quando `p-show-seconds` está ativo). * * **Importante:** * * - O valor emitido no model inclui o offset do timezone local do navegador. * - Ao receber um valor com timezone, o componente converte automaticamente para horário local. * - Caso a data/hora esteja inválida, o `model` receberá a mensagem de erro localizada. * - Caso o `input` esteja passando um `[(ngModel)]`, mas não tenha um `name`, então irá ocorrer um erro * do próprio Angular (`[ngModelOptions]="{standalone: true}"`). * * Exemplo: * * ``` * * ``` * * > Não esqueça de importar o `FormsModule` em seu módulo, tal como para utilizar o `input default`. * * #### 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 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 principal do texto do placeholder | `var(--color-neutral-light-30)` | * | `--color` | Cor principal do datetimepicker | `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 PoDatetimepickerBaseComponent implements ControlValueAccessor, Validator { protected languageService: PoLanguageService; private _clean; private _disabled; private _initialSize?; private _format?; private _locale?; private _noAutocomplete; private _placeholder; private _readonly; private _required; private _size?; private _date; private _timeValue; private previousValue; private _resolvedMinDate; private _resolvedMaxDate; protected hasValidatorRequired: boolean; protected hour: string; protected isExtendedISO: boolean; protected objMask: any; protected onChangeModel: any; protected onTouchedModel: any; protected validatorChange: any; protected shortLanguage: string; currentErrorPattern: import("@angular/core").WritableSignal; /** * @optional * * @description * * Define que o `calendar` e/ou tooltip serão incluídos no body da página e não dentro do componente. * * @default `false` */ appendBox: import("@angular/core").InputSignalWithTransform; /** * @optional * * @description * * Aplica foco no elemento ao ser iniciado. * * @default `false` */ autoFocus: import("@angular/core").InputSignalWithTransform; /** * @optional * * @description * * Habilita ação para limpar o campo. * * @default `false` */ clean: import("@angular/core").InputSignal; /** * @optional * * @description * * Define se o título do campo será exibido de forma compacta. * * @default `false` */ compactLabel: import("@angular/core").InputSignalWithTransform; /** * @optional * * @description * * Desabilita o campo. * * @default `false` */ disabled: import("@angular/core").InputSignal; /** * @optional * * @description * * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. * * @default `false` */ errorLimit: import("@angular/core").InputSignalWithTransform; /** * @optional * * @description * * Mensagem apresentada quando a data/hora for inválida ou fora do período. */ errorPattern: import("@angular/core").InputSignal; /** * @optional * * @description * * Texto de apoio do campo. */ help: import("@angular/core").InputSignal; /** * @optional * * @description * * Rótulo do campo. */ label: import("@angular/core").InputSignal; /** * @optional * * @description * * Habilita a quebra automática do texto da propriedade `p-label`. * * @default `false` */ labelTextWrap: import("@angular/core").InputSignalWithTransform; /** * @optional * * @description * * Exibe um ícone de carregamento no lado direito do campo. * * @default `false` */ loading: import("@angular/core").InputSignal; readonly isLoading: import("@angular/core").Signal; /** * @optional * * @description * * Idioma do componente. * * > O locale padrão será recuperado com base no [`PoI18nService`](/documentation/po-i18n) ou *browser*. */ localeInput: import("@angular/core").InputSignal; /** * @optional * * @description * * Define uma data máxima para o `po-datetimepicker`. * Datas posteriores ao limite ficam desabilitadas no calendário. * * Aceita os formatos: * - `Date` object: `new Date(2026, 4, 31)` * - ISO string: `'2026-05-31'` * - ISO com hora: `'2026-05-31T23:59:59-03:00'` */ maxDateInput: import("@angular/core").InputSignal; /** * @optional * * @description * * Define o horário máximo permitido para seleção no timer. * Horários posteriores ao limite ficam desabilitados. * * Formato aceito: `HH:mm` ou `HH:mm:ss`. */ maxTime: import("@angular/core").InputSignal; /** * @optional * * @description * * Define uma data mínima para o `po-datetimepicker`. * Datas anteriores ao limite ficam desabilitadas no calendário. * * Aceita os formatos: * - `Date` object: `new Date(2026, 0, 1)` * - ISO string: `'2026-01-01'` * - ISO com hora: `'2026-01-01T00:00:00-03:00'` */ minDateInput: import("@angular/core").InputSignal; /** * @optional * * @description * * Define o horário mínimo permitido para seleção no timer. * Horários anteriores ao limite ficam desabilitados. * * Formato aceito: `HH:mm` ou `HH:mm:ss`. */ minTime: import("@angular/core").InputSignal; /** * @optional * * @description * * Define o intervalo entre os minutos exibidos no painel do timer. * * @default `5` */ minuteInterval: import("@angular/core").InputSignal; /** * @optional * * @description * * Nome do componente. */ name: import("@angular/core").InputSignal; /** * @optional * * @description * * Define a propriedade nativa `autocomplete` do campo como `off`. * * @default `false` */ noAutocomplete: import("@angular/core").InputSignal; /** * @optional * * @description * * Define se a indicação de campo opcional será exibida. * * @default `false` */ optional: import("@angular/core").InputSignalWithTransform; /** * @optional * * @description * * Mensagem que aparecerá enquanto o campo não estiver preenchido. */ placeholder: import("@angular/core").InputSignal; /** * @optional * * @description * * Define as opções do componente de ajuda (po-helper). * * > Para mais informações acesse: https://po-ui.io/documentation/po-helper. */ poHelperComponent: import("@angular/core").InputSignal; /** * @optional * * @description * * Torna o componente somente leitura. * * @default `false` */ readonly: import("@angular/core").InputSignal; /** * @optional * * @description * * Define que o campo será obrigatório. * * @default `false` */ required: import("@angular/core").InputSignal; /** * @optional * * @description * * Define o intervalo entre os segundos exibidos no painel do timer. * Utilizado apenas quando `p-show-seconds` está ativo. * * @default `1` */ secondInterval: import("@angular/core").InputSignal; /** * @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: import("@angular/core").InputSignalWithTransform; /** * @optional * * @description * * Define se a indicação de campo obrigatório será exibida. * * @default `false` */ showRequired: import("@angular/core").InputSignalWithTransform; /** * @optional * * @description * * Exibe a coluna de segundos no painel de seleção do timer. * * @default `false` */ showSeconds: import("@angular/core").InputSignalWithTransform; /** * @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. * * @default `medium` */ size: import("@angular/core").InputSignal; /** * @optional * * @description * * Define o formato de exibição do timer. * * Valores válidos: * - `24`: formato de 24 horas (padrão para pt, es, ru) * - `12`: formato de 12 horas com indicador AM/PM (padrão para en) * * Quando não informado, o formato será determinado automaticamente pelo locale: * - `en` → 12h (AM/PM) * - `pt`, `es`, `ru` → 24h * * @default Determinado pelo locale */ timerFormat: import("@angular/core").InputSignal; /** * @optional * * @description * * Define o formato de exibição da data. * * Valores válidos: * - `dd/mm/yyyy` * - `mm/dd/yyyy` * - `yyyy/mm/dd` * * Quando não informado, o formato será determinado automaticamente pelo locale: * - `en` → `mm/dd/yyyy` * - `pt`, `es`, `ru` → `dd/mm/yyyy` * * @default Determinado pelo locale */ dateFormat: import("@angular/core").InputSignal; /** * @optional * * @description * * Evento disparado ao sair do campo (blur). */ onblur: EventEmitter; /** * @optional * * @description * * Evento disparado ao alterar valor do campo. */ onchange: EventEmitter; /** * @optional * * @description * * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. */ keydown: EventEmitter; constructor(languageService: PoLanguageService); writeValue(value: any): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; setDisabledState(isDisabled: boolean): void; registerOnValidatorChange(fn: () => void): void; validate(c: AbstractControl): { [key: string]: any; }; protected get date(): Date; protected set date(value: Date); protected get timeValue(): string; protected set timeValue(value: string); get format(): string; get resolvedTimerFormat(): PoTimerFormat; get is12HourFormat(): boolean; get isClean(): boolean; get isDisabled(): boolean; get isNoAutocomplete(): boolean; get placeholderValue(): string; get isReadonly(): boolean; get isRequired(): boolean; get locale(): string; get resolvedSize(): string; get hostSize(): string; protected onThemeChange(): void; mapSizeToIcon(size: string): string; abstract refreshValue(value: Date): void; getModelValue(): string; getTimezoneOffset(date?: Date): string; callOnChange(value: any, retry?: boolean): void; controlModel(): void; formatTimeForDisplay(time: string): string; protected buildMask(format?: string): PoMask; protected validateModel(value: any): void; get resolvedMinDate(): Date | undefined; get resolvedMaxDate(): Date | undefined; private isDateInRange; private isTimeInRange; private timeToSeconds; private resolveFormat; private processStringValue; private normalizeTimePart; private extractTimeFromDate; private requiredFailed; private applySizeBasedOnA11y; }