import { ChangeDetectorRef, EventEmitter, OnInit } from '@angular/core'; import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms'; import { PoMask } from '../po-input/po-mask'; import { PoLanguageService } from '../../../services/po-language/po-language.service'; import { PoTimepickerModelFormat } from './enums/po-timepicker-iso-format.enum'; import { PoTimerFormat } from '../../po-timer/enums/po-timer-format.enum'; import { PoHelperOptions } from '../../po-helper'; /** * @description * * O `po-timepicker` é um componente para seleção de horário que permite a digitação e/ou seleção via painel flutuante. * * O formato de exibição do horário pode ser de 24 horas (`HH:mm`) ou 12 horas (`hh:mm AM/PM`), * e opcionalmente incluir segundos (`HH:mm:ss`). * * O valor de saída segue o formato ISO 8601 para horários (`HH:mm` ou `HH:mm:ss`). * * **Importante:** * * - Caso o valor digitado seja inválido, o `model` receberá uma string vazia. * - 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}"`). * * > 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 do texto placeholder | `var(--color-neutral-light-30)` | * | `--color` | Cor principal do timepicker | `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 PoTimepickerBaseComponent implements ControlValueAccessor, OnInit, Validator { protected languageService: PoLanguageService; protected cd: ChangeDetectorRef; additionalHelpEventTrigger: string | undefined; /** * @optional * * @description * * Aplica foco no elemento ao ser iniciado. * * @default `false` */ autoFocus: boolean; /** * @Input * * @optional * * @description * Define se o título do campo será exibido de forma compacta. * * @default `false` */ compactLabel: import("@angular/core").InputSignalWithTransform; /** Nome do componente. */ name: string; /** * @optional * * @description * * Define se a indicação de campo opcional será exibida. * * @default `false` */ optional: boolean; /** * Mensagem apresentada quando o horário for inválido ou fora do período. * * > Por padrão, esta mensagem não é apresentada quando o campo estiver vazio, mesmo que ele seja requerido. */ errorPattern?: string; /** * @optional * * @description * * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. * * @default `false` */ errorLimit: boolean; /** * @optional * * @description * * Exibe a mensagem setada na propriedade `p-error-pattern` se o campo estiver vazio e for requerido. * * @default `false` */ showErrorMessageRequired: boolean; /** Evento disparado ao sair do campo. */ onblur: EventEmitter; /** Evento disparado ao alterar valor do campo. */ onchange: EventEmitter; /** Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. */ keydown: EventEmitter; /** * @Input * * @optional * * @description * * Define as opções do componente de ajuda (po-helper). */ poHelperComponent: import("@angular/core").InputSignal; /** * @Input * * @optional * * @description * * Habilita a quebra automática do texto da propriedade `p-label`. * * @default `false` */ labelTextWrap: import("@angular/core").InputSignal; /** Desabilita o campo. */ disabled?: boolean; /** Torna o elemento somente leitura. */ readonly?: boolean; /** * @optional * * @description * * Define que o campo será obrigatório. * * @default `false` */ required?: boolean; /** Habilita ação para limpar o campo. */ clean?: boolean; protected onChangeModel: any; protected validatorChange: any; protected onTouchedModel: any; protected shortLanguage: string; protected isInvalid: boolean; protected hasValidatorRequired: boolean; protected objMask: PoMask; private _format; private _modelFormat; private _maxTime; private _minTime; private _minuteInterval; private _secondInterval; private _showSeconds; private _noAutocomplete?; private _placeholder?; private _loading?; private _size?; private _initialSize?; private _locale?; private _timeValue; private _validationValue?; private _validationMinHour?; private _validationMaxHour?; private previousValue; private pendingChangeValue; /** * @optional * * @description * * Define a propriedade nativa `autocomplete` do campo como `off`. * * @default `false` */ set noAutocomplete(value: boolean); get noAutocomplete(): boolean; /** * @optional * * @description * * Mensagem que aparecerá enquanto o campo não estiver preenchido. * * Para personalizar os segmentos, informe o valor no formato `HH:mm` ou `HH:mm:ss`. */ set placeholder(placeholder: string); get placeholder(): string; set setDisabled(disabled: string); set setReadonly(readonly: string); set setRequired(required: string); /** Define se a indicação de campo obrigatório será exibida. */ showRequired: boolean; /** * @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` */ set size(value: string); get size(): string; set setClean(clean: string); /** * @optional * * @description * * Define o formato de exibição do timer. * * Valores válidos: * - `24`: formato de 24 horas (padrão) * - `12`: formato de 12 horas com indicador AM/PM * * @default `24` */ set format(value: PoTimerFormat); get format(): PoTimerFormat; /** * @optional * * @description * * Define o horário mínimo permitido. Formato: `HH:mm` ou `HH:mm:ss`. */ set minTime(value: string); get minTime(): string; /** * @optional * * @description * * Define o horário máximo permitido. Formato: `HH:mm` ou `HH:mm:ss`. */ set maxTime(value: string); get maxTime(): string; /** * @optional * * @description * * Define o intervalo entre os minutos exibidos no painel. * * @default `5` */ set minuteInterval(value: number); get minuteInterval(): number; /** * @optional * * @description * * Define o intervalo entre os segundos exibidos no painel. * * @default `1` */ set secondInterval(value: number); get secondInterval(): number; /** * @optional * * @description * * Exibe a coluna de segundos no painel. * * @default `false` */ set showSeconds(value: boolean); get showSeconds(): boolean; /** * @optional * * @description * * Padrão de formatação para saída do *model*. * * > Veja os valores válidos no *enum* `PoTimepickerModelFormat`. */ set modelFormat(value: PoTimepickerModelFormat); get modelFormat(): PoTimepickerModelFormat; /** * @optional * * @description * * Idioma do componente. */ set locale(value: string); get locale(): 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; /** * @optional * * @description * * Define que o painel do timer será incluído no body da página. * * @default `false` */ appendBox: boolean; get is12HourFormat(): boolean; constructor(languageService: PoLanguageService, cd: ChangeDetectorRef); ngOnInit(): void; protected onThemeChange(): void; get autocomplete(): "off" | "on"; get timeValue(): string; set timeValue(value: string); protected updateMask(): void; protected isValidTimeString(value: string, minHour?: number, maxHour?: number): boolean; protected isTimeInRange(time: string): boolean; protected timeToMinutes(time: string): number; protected formatOutput(time: string): string; protected setValidationValue(value?: string, minHour?: number, maxHour?: number): void; protected clearValidationValue(): void; protected hasValidationValue(): boolean; protected getValidationValue(controlValue: any): string; protected getValidationHourRange(): { minHour: number; maxHour: number; } | undefined; protected isGeneratedErrorPattern(errorPattern: string): boolean; protected getDefaultInvalidTimeMessage(): string; protected getDefaultOutOfRangeTimeMessage(): string; protected callOnChange(value: any): void; mapSizeToIcon(size: string): string; setDisabledState(isDisabled: boolean): void; registerOnChange(func: any): void; registerOnTouched(func: any): void; registerOnValidatorChange(fn: () => void): void; validate(c: AbstractControl): { [key: string]: any; }; protected validateModel(model: any): void; private applySizeBasedOnA11y; protected onLocaleChange(): void; abstract writeValue(value: any): void; abstract refreshValue(value: string): void; }