import { ChangeDetectorRef, EventEmitter, OnDestroy } from '@angular/core'; import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms'; import { PoLanguageService } from '../../../services/po-language/po-language.service'; import { PoMask } from '../po-input/po-mask'; import { PoDateService } from './../../../services/po-date/po-date.service'; import { PoDatepickerRangeLiterals } from './interfaces/po-datepicker-range-literals.interface'; import { PoDatepickerRange } from './interfaces/po-datepicker-range.interface'; import { PoHelperOptions } from '../../po-helper'; import { PoCalendarRangePreset } from '../../po-calendar/interfaces/po-calendar-range-preset.interface'; /** * @description * * O `po-datepicker-range` é um componente para seleção de um período entre duas datas, onde é possível informar apenas * a data inicial ou a data final. * * O componente `[(ngModel)]` do `po-datepicker-range` trabalha com um objeto que implementa a interface * `PoDatepickerRange`, contendo as seguintes propriedades: * ``` * { "start": '2017-11-28', "end": '2017-11-30' } * ``` * * * Este componente pode receber os seguintes formatos de data: * * - **Data e hora combinados (E8601DZw): yyyy-mm-ddThh:mm:ss+|-hh:mm** * ``` * '2017-11-28T00:00:00-02:00'; * ``` * * - **Data (E8601DAw.): yyyy-mm-dd** * ``` * '2017-11-28'; * ``` * * - **JavaScript Date Object:** * ``` * new Date(2017, 10, 28); * ``` * * > O componente respeitará o formato passado para o *model* via codificação. Porém, caso seja feita alteração em algum * dos valores de data em tela, o componente atribuirá o formato **Data (E8601DAw.): yyyy-mm-dd** ao model. * * Importante: * * - Quando preenchidas a data inicial e final, a data inicial deve ser sempre menor ou igual a data final; * - Ao passar uma data inválida via codificação, o valor será mantido no *model* e o `input` da tela aparecerá vazio; * - Permite trabalhar com as duas datas separadamente através das propriedades `p-start-date` e `p-end-date` no lugar do * `[(ngModel)]`, no entanto sem a validação do formulário; * - Para a validação do formulário, utilize o `[(ngModel)]`. */ export declare abstract class PoDatepickerRangeBaseComponent implements ControlValueAccessor, Validator, OnDestroy { protected changeDetector: ChangeDetectorRef; protected poDateService: PoDateService; private readonly languageService; additionalHelpEventTrigger: string | undefined; name: string; /** * * @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 `calendar` e/ou tooltip (`p-additional-help-tooltip` e/ou `p-error-limit`) serão incluídos 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 de ambos 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 * * Habilita a exibição dos presets padrão de intervalos de data no painel lateral do calendário. * * Aceita os seguintes valores: * - `true`: exibe todos os presets padrão (Amanhã, Hoje, Ontem, Últimos 7 dias, Últimos 14 dias, Últimos 30 dias, Últimos 3 meses, Últimos 6 meses). * - `false`: não exibe os presets padrão. * - `Array`: exibe apenas os presets padrão cujos labels estejam no array informado. * > Label dos presets: tomorrow, today, yesterday, 7days, 14days, 30days, 3months, 6months. * * O preset "today" é obrigatório e será incluído automaticamente mesmo que não esteja no array. * * Caso `p-range-preset-options` também seja informado, os presets customizados serão exibidos junto aos presets padrão, * ordenados automaticamente por temporalidade com base na data início (Futuro → Presente → Passado). * * @default `false` */ set rangePresets(value: boolean | Array | string); get rangePresets(): boolean | Array; private _rangePresets; /** * @optional * * @description * * Lista de presets customizados de intervalos de data exibidos no painel lateral do calendário. * * Quando informado sem `p-range-presets`, exibe apenas os presets customizados. * Quando informado junto com `p-range-presets` habilitado, os presets customizados serão exibidos junto aos presets padrão, * ordenados automaticamente por temporalidade com base na data início (Futuro → Presente → Passado). * * Para utilizar presets customizados, informe um array de objetos que implementam a interface `PoCalendarRangePreset`. */ rangePresetOptions?: Array; /** * @optional * * @description * * Define a ordenação dos presets na lista. * * Valores aceitos: * - `'asc'` (padrão): presets mais próximos de hoje aparecem primeiro. * - `'desc'`: presets mais distantes de hoje aparecem primeiro. * * A ordenação é aplicada dentro de cada grupo de temporalidade com base na data início (Futuro → Presente → Passado). * * @default `asc` */ rangePresetsOrder: 'asc' | 'desc'; /** * @optional * * @description * * Texto de apoio do campo. */ help?: string; /** * @optional * * @description * * Rótulo do campo. */ label?: 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 * * Mensagem que aparecerá enquanto o campo não estiver preenchido. */ set placeholder(value: string | PoDatepickerRange); get placeholder(): PoDatepickerRange; /** * @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; /** * * @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 * * 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; /** * @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. * Retorna um objeto `KeyboardEvent` com informações sobre a tecla. */ keydown: EventEmitter; errorMessage: string; dateRange: PoDatepickerRange; displayAdditionalHelp: boolean; protected format: any; protected isDateRangeInputFormatValid: boolean; protected isStartDateRangeInputValid: boolean; protected onTouchedModel: any; protected poMaskObject: PoMask; protected hasValidatorRequired: boolean; private _clean?; private _disabled?; private _endDate?; private _literals?; private _maxDate; private _minDate; private _noAutocomplete?; private _readonly; private _required?; private _loading?; private _startDate?; private _locale?; private _size?; private _initialSize?; private _placeholder; private readonly language; private onChangeModel; private validatorChange; private subscription; get isDateRangeInputValid(): boolean; /** * @optional * * @description * * Habilita ação para limpar o campo. * * @default `false` */ set clean(clean: boolean); get clean(): boolean; /** * @optional * * @description * * Desabilita o campo. * * @default `false` */ set disabled(value: boolean); get disabled(): boolean; /** * @optional * * @description * * Data final. */ set endDate(date: string | Date); get endDate(): string | Date; /** * @optional * * @description * * Objeto com as literais usadas no `po-datepicker-range`. * * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis: * * ``` * const customLiterals: PoDatepickerRangeLiterals = { * invalidFormat: 'Date in inconsistent format', * startDateGreaterThanEndDate: 'End date less than start date' * }; * ``` * * Ou passando apenas as literais que deseja customizar: * * ``` * const customLiterals: PoDatepickerRangeLiterals = { * invalidFormat: 'Date in inconsistent format' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do * [`PoI18nService`](/documentation/po-i18n) ou do browser. */ set literals(value: PoDatepickerRangeLiterals); get literals(): PoDatepickerRangeLiterals; /** * @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 uma data mínima para o `po-datepicker-range`. */ set minDate(value: string | Date); get minDate(): string | Date; /** * @optional * * @description * * Define uma data máxima para o `po-datepicker-range`. */ set maxDate(value: string | Date); get maxDate(): string | Date; /** * @optional * * @description * * Define a propriedade nativa `autocomplete` do campo como `off`. * * @default `false` */ set noAutocomplete(value: boolean); get noAutocomplete(): boolean; /** * @optional * * @description * * Indica que o campo será somente leitura. * * @default `false` */ set readonly(value: boolean); get readonly(): boolean; /** * @optional * * @description * * Define que o campo será obrigatório. * * @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 * * 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; /** * @optional * * @description * * Data inicial. */ set startDate(date: string | Date); get startDate(): string | Date; /** * @optional * * @description * * Idioma que o calendário utilizará para exibir as datas. * * > O locale padrão será recuperado com base no [`PoI18nService`](/documentation/po-i18n) ou *browser*. */ set locale(value: string); get locale(): string; constructor(changeDetector: ChangeDetectorRef, poDateService: PoDateService, languageService: PoLanguageService); ngOnDestroy(): void; protected onThemeChange(): void; setDisabledState(isDisabled: boolean): void; mapSizeToIcon(size: string): string; registerOnChange(func: any): void; registerOnTouched(func: any): void; registerOnValidatorChange?(fn: () => void): void; validate(control: AbstractControl): ValidationErrors; validateDateInRange(startDate: any): boolean; writeValue(dateRange: PoDatepickerRange): void; protected buildMask(format?: string): PoMask; protected dateFormatFailed(value: string): boolean; protected updateModel(value: any): void; protected validateModel(value: any): void; protected verifyValidDate(startDate: string, endDate: string): boolean; private convertPatternDateFormat; private dateRangeFailed; private dateRangeFormatFailed; private dateRangeObjectFailed; private isDateRangeObject; private requiredDateRangeFailed; private dateIsValid; private applySizeBasedOnA11y; protected abstract resetDateRangeInputValidation(): void; protected abstract updateScreenByModel(dateRange: PoDatepickerRange): any; }