import { EventEmitter } from '../../stencil-public-runtime'; import { Language } from '../../utils/common/language-types'; import { DateInputFieldType, DateInputPlaceholder, DateValidatorReturnType } from './ontario-date-input-interface'; import { Caption } from '../../utils/common/input-caption/caption.interface'; import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface'; /** * Ontario Date Input captures day, month, and year values as a single date field. * * This component intentionally does not expose `readOnly` or `disabled` props. * * To support accessible and understandable form completion: * - keep form fields and submission actions available * - use validation and error messaging to guide corrections * * For component guidance, see: * - https://designsystem.ontario.ca/components/detail/dates.html * - https://designsystem.ontario.ca/developer-docs/components/ontario-date-input/ * * Disabled/read-only policy source: * - https://designsystem.ontario.ca/components/detail/buttons.html#disabled-buttons */ export declare class OntarioDateInput { element: HTMLElement; internals: ElementInternals; /** * The language of the component. * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English. */ language?: Language; /** * A boolean value to determine whether or not the date input is required. * * This is optional. If no prop is passed, it will default to `false`. */ required?: boolean; /** * An object value used to set the placeholder text for the day, month and year input fields. Any combination of the three input fields (i.e day, month, year) * of the date component can be overridden. * * This is optional. If no prop is passed, it will not display any placeholder text. */ placeholder?: DateInputPlaceholder | string; /** * The aggregate date value for the component. * * Accepts either a plain ISO date (`YYYY-MM-DD`) or a full ISO 8601 timestamp. When a valid value is provided, * the component hydrates the internal day, month, and year fields and normalizes the stored form value to a full * UTC ISO timestamp (`YYYY-MM-DDT00:00:00.000Z`). */ value?: string; /** * The text to display as the input label * * @example * ; /** * Emitted when a `change` event occurs within the component. */ inputOnChange: EventEmitter<{ value: string; fieldType: 'day' | 'month' | 'year'; }>; /** * Emitted when a keyboard input event occurs when an input has lost focus. */ inputOnBlur: EventEmitter; /** * Emitted when a keyboard input event occurs when an input has gained focus. */ inputOnFocus: EventEmitter; /** * Emitted when an error message is reported to the component. */ inputErrorOccurred: EventEmitter<{ inputId: string; errorMessage: string; }>; broadcastInputErrorOccurredEvent(): void; /** * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads. */ handleSetAppLanguage(event: CustomEvent): void; /** * Handles an update to the language should the user request a language update from the language toggle. * @param {CustomEvent} - The language that has been selected. */ handleHeaderLanguageToggled(event: CustomEvent): void; handleComponentBlur(): void; private translations; private captionState; private isDateTyped; private dayInvalid; private monthInvalid; private yearInvalid; private errorMessage; private day; private month; private year; private placeholderState; private dateOptionsState; private isSyncingValue; private lastCommittedValue; /** * Watch for changes to the `caption` prop. * * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state. * @param newValue: Caption | string */ private updateCaptionState; /** * Watch for changes in the `language` prop to render either the English or French translations */ updateLanguage(): void; syncValueProp(newValue?: string): void; private processPlaceholder; private processDateOptions; private parseOptions; private isInvalidDate; private getNormalizedDateValue; private parseDateValue; private logInvalidValueProp; private resetErrorState; private updateDateState; private emitAggregateValueEvent; private syncAggregateValue; private handleDateUpdates; private handleDateInput; private handleDateChanged; private handleDateFocus; private handleDateBlur; private getLanguage; private getCaption; private getId; private getHintTextId; private getInputIds; componentWillLoad(): void; render(): any; }