import { EventEmitter } from '@angular/core'; import { ControlValueAccessor } from '@angular/forms'; import { PoLanguageService } from '../../services/po-language/po-language.service'; import { PoTimerFormat } from './enums/po-timer-format.enum'; /** * @docsPrivate * * @description * * O `po-timer` é um componente de seleção de horário que apresenta colunas de horas, minutos e, opcionalmente, segundos * para que a pessoa usuária escolha um horário de forma intuitiva. * * O componente é recomendado para cenários onde é necessário selecionar um horário específico, podendo ser utilizado * de forma independente ou integrado ao `po-timepicker` como painel flutuante de seleção. * * O valor de saída segue o formato ISO 8601 para horários (`HH:mm` ou `HH:mm:ss`). * * **Importante:** * - Horários fora do intervalo (`p-min-time` / `p-max-time`) aparecem desabilitados sem alterar o *model*. * * #### Boas práticas * * - Utilize o formato de 24 horas quando o contexto for profissional ou técnico (ex: agendamentos, logs). * - Utilize o formato de 12 horas (AM/PM) quando o público-alvo estiver habituado a esse padrão. * - Defina intervalos de minutos adequados ao contexto: intervalos de 5 minutos para agendamentos gerais, * intervalos de 15 minutos para reuniões, ou intervalos de 1 minuto para precisão. * - Configure limites mínimo e máximo para impedir seleção de horários inválidos no contexto da aplicação. * * #### Acessibilidade tratada no componente * * Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo * proprietário do conteúdo. São elas: * * - Navegação por teclado: O componente permite interação via tecla Tab entre as colunas e navegação nas células * por meio das setas direcionais (Arrow Up/Down). * - Foco visual: A área de foco possui espessura de pelo menos 2 pixels CSS e não é sobreposta por outros elementos da tela, * garantindo visibilidade para usuários que utilizam teclado. * [WCAG 2.4.12: Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced) * - Leitores de tela: Cada coluna e célula possui atributos ARIA para correta leitura por leitores de tela * como NVDA e VoiceOver. * * #### 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 | * |--------------------------------|------------------------------------------------------|-----------------------------------| * | **Base** | | | * | `--background` | Cor de fundo | `var(--color-neutral-light-00)` | * | `--border-color` | Cor da borda | `var(--color-neutral-light-20)` | * | `--border-radius` | Raio da borda | `var(--border-radius-md)` | * | `--border-width` | Largura da borda | `var(--border-width-sm)` | * | `--shadow` | Contém o valor da sombra do elemento | `var(--shadow-md)` | * | **Display** | | | * | `--color-display` | Cor da fonte do display | `var(--color-brand-01-base)` | * | `--font-weight-display` | Peso da fonte do display | `var(--font-weight-bold)` | * | `--border-radius-display` | Raio da borda do display | `var(--border-radius-md)` | * | **Hover** | | | * | `--color-hover-display` | Cor da fonte do display ao passar o mouse | `var(--color-brand-01-darkest)` | * | `--background-hover-display` | Cor de fundo do display ao passar o mouse | `var(--color-brand-01-lighter)` | * | **Focus** | | | * | `--outline-color-focused-display` | Cor do outline do estado de focus | `var(--color-brand-01-darkest)` | * | **Pressed** | | | * | `--background-pressed-display` | Cor de fundo do display ao pressionar | `var(--color-brand-01-light)` | * | **Disabled** | | | * | `--color-disabled-display` | Cor da fonte do display desabilitado | `var(--color-neutral-light-30)` | * | **Transitions** | | | * | `--transition-duration` | Duração da transição do display | `var(--duration-extra-fast)` | * | `--transition-property` | Atributo da transição do display | `all` | * | `--transition-timing` | Tipo de transição do display | `var(--timing-standart)` | */ export declare class PoTimerBaseComponent implements ControlValueAccessor { protected languageService: PoLanguageService; private _format; private _locale; private _maxTime; private _minTime; private _minuteInterval; private _secondInterval; private _showSeconds; private _size?; private _initialSize; private readonly shortLanguage; protected onChangePropagate: (value: string) => void; protected onTouched: () => void; /** * @optional * * @description * * Evento disparado ao selecionar um horário. * Retorna uma `string` no formato ISO 8601 (`HH:mm` ou `HH:mm:ss`). */ change: EventEmitter; /** * @optional * * @description * * Define um valor inicial para o componente no formato ISO 8601 (`HH:mm` ou `HH:mm:ss`). */ set value(value: string); get value(): 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 * * Idioma do componente. * * > O locale padrão será recuperado com base no [`PoI18nService`](/documentation/po-i18n) ou *browser*. */ set locale(locale: string); get locale(): string; /** * @optional * * @description * * Define o horário máximo permitido para seleção. * Horários posteriores ao limite ficam desabilitados. * * Formato aceito: `HH:mm` ou `HH:mm:ss`. */ set maxTime(value: string); get maxTime(): string; /** * @optional * * @description * * Define o horário mínimo permitido para seleção. * Horários anteriores ao limite ficam desabilitados. * * Formato aceito: `HH:mm` ou `HH:mm:ss`. */ set minTime(value: string); get minTime(): 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. * Utilizado apenas quando `p-show-seconds` está ativo. * * @default `1` */ set secondInterval(value: number); get secondInterval(): number; /** * @optional * * @description * * Exibe a coluna de segundos no painel de seleção. * * @default `false` */ set showSeconds(value: boolean); get showSeconds(): boolean; /** * @optional * * @description * * Define o tamanho do 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 size(value: string); get size(): string; literals: { hours: string; minutes: string; seconds: string; }; hours: Array; minutes: Array; seconds: Array; selectedHour: number; selectedMinute: number; selectedSecond: number; period: string; constructor(languageService: PoLanguageService); get is12HourFormat(): boolean; protected onThemeChange(): void; /** Gera a lista de horas disponíveis de acordo com o formato. */ protected generateHours(): void; /** Gera a lista de minutos de acordo com o intervalo configurado. */ protected generateMinutes(): void; /** Gera a lista de segundos de acordo com o intervalo configurado. */ protected generateSeconds(): void; /** Formata um número com dois dígitos. */ protected formatValue(value: number): string; /** Verifica se uma hora está desabilitada com base nos limites min/max. */ protected isHourDisabled(hour: number): boolean; /** Verifica se um minuto está desabilitado com base nos limites min/max e hora selecionada. */ protected isMinuteDisabled(minute: number): boolean; /** Verifica se um segundo está desabilitado com base nos limites min/max, hora e minuto selecionados. */ protected isSecondDisabled(second: number): boolean; protected isMinuteAllowedForHour(hour: number, minute: number): boolean; protected isSecondAllowed(hour: number, minute: number, second: number): boolean; /** Gera o valor ISO 8601 com base na seleção atual. */ protected buildTimeValue(): string; /** Define o horário a partir de uma string ISO. */ setTimeFromString(time: string): void; /** Converte hora 24h para formato de exibicao 12h com periodo. */ private convertTo12HourDisplay; writeValue(value: any): void; registerOnChange(fn: (value: string) => void): void; registerOnTouched(fn: () => void): void; setDisabledState(_isDisabled: boolean): void; protected emitChange(): void; protected callOnTouched(): void; private updateModel; /** Converte hora no formato atual para formato de 24 horas. */ protected convertTo24Hour(hour: number): number; /** Extrai componente do tempo (hora, minuto ou segundo) de uma string. */ protected parseTimeComponent(time: string, component: 'hour' | 'minute' | 'second'): number; private applySizeBasedOnA11y; private isValidTimeString; private setLiterals; }