import { EventEmitter } from '../../stencil-public-runtime'; /** * @slot default - Child content of the component. * @slot actions - Child content of the component. */ export declare class NvCalendar { el: HTMLNvCalendarElement; /****************************************************************************/ /** * First day of the week (0 = Sunday, 1 = Monday, etc.) * @default 1 */ readonly firstDayOfWeek: number; /** * Number of calendars to display * @default 1 */ numberOfCalendars: number; /** * Selected date value. For single mode: ISO date string. For range mode: comma-separated ISO date strings. * Examples: * - Single: "2025-03-15" * - Range: "2025-03-15,2025-03-20" * @default "" */ value: string; /** * Selected date (ISO string format) * ex: "2025-03-15" */ singleValue: string; /** * Selected date range * format: { start: ISO string, end: ISO string } * ex: { start: "2025-03-15", end: "2025-03-20" } */ rangeValue: { /** ISO string for start date */ start: string; /** ISO string for end date */ end: string; }; /** * Minimum date for selection (ISO string format, ex: "2025-01-01") */ readonly min?: string; /** * Maximum date for selection (ISO string format, ex: "2025-12-31") */ readonly max?: string; /** * Disabled dates (ISO string array) */ readonly disabledDates: Array; /** * Locale for date formatting * @default 'en-BE' */ readonly locale: string; /** * Date format (ex: 'YYYY-MM-DD', 'DD-MM-YYYY', etc.) * @default 'YYYY-MM-DD' * @note If the date format is in UTC mode, the date will be displayed in UTC time. * @note If the date format is not in UTC mode, the date will be displayed in the local time. */ readonly dateFormat: string; /** * Footer placement * @default 'bottom' */ readonly shortcutsPlacement: 'bottom' | 'left' | 'right'; /** * Selection type (single date or date range) * @default 'single' */ readonly selectionType: 'single' | 'range'; /** * Show action buttons */ readonly showActions: boolean; /** * Custom actions to display in the footer */ readonly shortcuts: { /** Label of the shortcut */ label: string; /** Selected date value for single selection mode */ singleValue?: string; /** Date range values for range selection mode */ rangeValue?: HTMLNvCalendarElement['rangeValue']; }[]; /** * Show week numbers */ readonly showWeekNumbers: boolean; /** Sets the label for the cancel button in actions. */ readonly cancelLabel: string; /** Sets the label for the primary (OK) button in actions. */ readonly primaryLabel: string; /** Cache for parsed disabled dates */ private parsedDisabledDates; /** Flag to indicate a user click for selection */ private isUserClick; /****************************************************************************/ currentDate: Date | null; selectedDate: Date | null; startDate: Date | null; endDate: Date | null; hoverDate: Date | null; /** List of formatted months for the selector */ private months; /****************************************************************************/ /** * Emitted when a single date is selected */ singleDateChange: EventEmitter; /** * Emitted when a date range is selected */ rangeDateChange: EventEmitter; /** * Emitted when the unified value changes * @bind value */ valueChanged: EventEmitter; /****************************************************************************/ /** * Watches the changes of the number of calendars * @param {number} newValue - New number of calendars */ validateNumberOfCalendars(newValue: number): void; /** * Watches the changes of the selected date range * @param {Object} newValue - New rangeValue value * @param {string} newValue.start - Start date * @param {string} newValue.end - End date */ onRangeValueChange(newValue: typeof this.rangeValue): void; /** * Watches the changes of the disabled dates * @description Watches the changes of the disabled dates */ handleDisabledDatesChange(): void; /** * Watches the changes of the single value * @param {string} newValue - New single value * @param {string} oldValue - Old single value */ onSingleValueChange(newValue: string, oldValue: string): void; /** * Watches the changes of the unified value prop * @param {string} newValue - New value * @param {string} oldValue - Old value */ onValueChange(newValue: string, oldValue: string): void; /****************************************************************************/ componentWillLoad(): void; /****************************************************************************/ /** * Checks if shortcuts are visible * @returns {boolean} true if shortcuts are visible */ private get hasShortcuts(); /** * Checks if actions are visible * @returns {boolean} true if actions are visible */ private get hasActions(); /** * Checks if the date format is in UTC mode * @returns {boolean} true if the date format is in UTC mode */ private get isUTCMode(); /** * Parses the unified value prop and synchronizes with internal state * @param {string} value - Value to parse */ private parseUnifiedValue; /** * Validates and processes a date range, warning if start is after end * @param {string} startDateStr - Start date in ISO string format * @param {string} endDateStr - End date in ISO string format * @returns {object} Object containing the validated start and end dates */ private validateDateRange; /** * Change the displayed month * @param {number} offset - Month offset (-1 for previous, 1 for next) */ private changeMonth; private handleMouseLeave; private handleDayHover; /** * Handles date selection based on the mode * @param {MouseEvent} event - The mouse event from the click. */ private handleDateSelection; /** * Handles single date selection * @param {Date} date - Selected date */ private handleSingleSelection; /** * Handles range date selection * @param {Date} date - Selected date */ private handleRangeSelection; /** * Checks if a date is disabled. * Disabled if: * - The date is before min (if defined) * - The date is after max (if defined) * - The date is in the disabledDates array * @param {Date} date - Date to check * @returns {boolean} true if the date is disabled */ private isDateDisabled; /** * Checks if a date is in the selected range * @param {Date} date - Date to check * @returns {boolean} true if the date is in the range */ private isDateInRange; /** * Retrieves the localized day names * @returns {string[]} Array of short day names */ private getDayNames; /** * Generates the days of the current month * @param {number} offset - Month offset (0 by default) * @returns {Array<{ dayOfMonth: number | null, date: Date | null, isSelected: boolean, isDisabled: boolean }>} Array of formatted days */ private getDaysInMonth; /** Initializes the list of formatted months according to the locale */ private initializeMonths; /** * Retrieves the localized abbreviation for "week" * @returns {string} Localized abbreviation for "week" */ private getLocalizedWeekText; /** * Handles month change in the selector * @param {Event} event - Month change event * @param {number} calendarOffset - Calendar offset (0 by default) */ private handleMonthChange; /** * Handles year change in the numeric entry * @param {Event} event - Year change event * @param {number} calendarOffset - Calendar offset (0 by default) */ private handleYearChange; /** * Handles week selection * @param {Date[]} weekDays - Selected week days * @param {number} calendarIndex - Calendar index from which the selection is made */ private handleWeekSelection; /** * Checks if a date corresponds to today * @param {Date} date - Date to check * @returns {boolean} true if the date is today */ private isToday; /** * Parse and cache the disabled dates * @description Parse and cache the disabled dates */ private parseDisabledDates; /** * Applies a shortcut selection * @param {Object} shortcut - Shortcut to apply * @param {string | Date} shortcut.singleValue - Selected date value * @param {Object} shortcut.rangeValue - Start and end date values * @param {string | Date} shortcut.rangeValue.start - Start date value * @param {string | Date} shortcut.rangeValue.end - End date value * @param {string} shortcut.label - Label */ private applyShortcut; /** * Method to force the complete calendar update * @param {Date} newDate - Date to force */ private forceCalendarUpdate; /** * Resets the current selection */ private resetSelection; /** * Confirms the current selection */ private confirmSelection; /** * Clears the current selection and resets the calendar to its initial state. * This method can be called programmatically to reset the calendar. */ clear(): Promise; /****************************************************************************/ /** * Renders the header * @param {number} offset - Month offset * @param {number} index - Calendar index * @returns {JSX.Element} Header * @description Renders the header of the calendar */ private renderHeader; /** * Renders the week numbers * @param {Array<{date: Date}>} weeks - Weeks to render * @param {number} index - Calendar index * @returns {JSX.Element} Week numbers * @description Renders the week numbers of the calendar */ private renderWeekNumbers; /** * Checks if the hover range is valid * @param {Date} startDate - Start date * @param {Date | null} hoverDate - Hovered date * @returns {boolean} true if the hover range is valid */ private isHoverRangeValidFn; /** * Renders the calendar * @param {number} index - Calendar index * @param {number} offset - Month offset * @returns {JSX.Element} Calendar * @description Renders the calendar of the calendar */ private renderCalendar; /** * Renders the shortcuts * @returns {JSX.Element} Shortcuts * @description Renders the shortcuts of the calendar */ private renderShortcuts; /** * Renders the actions * @returns {JSX.Element} Actions * @description Renders the actions of the calendar * @slot actions - Child content of the component. */ private renderActions; /** * Renders the datepicker * @returns {JSX.Element} Datepicker * @description Renders the datepicker of the calendar * @slot default - Child content of the component. */ render(): any; }