import ITimeOptions from '../../../tools/time/itimeoptions.js'; import TimeWidget, { TimeRangeLimit } from '../tools/timewidget.js'; /** * A widget that represents a time slider with configurable time resolution. The slider supports * a single value or a time range depending on the specified mode. * * It consists of two `` elements of type `range` that are configured by receiving `timeOptions` * in its initialize method. It validates input changes to ensure compliance * with the defined `timeOptions` and dynamically updates output elements to display nicely formatted time values. */ declare class TimeSliderComponent extends TimeWidget { templateUrl: null; styleUrls: null; template: () => import("uhtml").Hole; private discreteTimeSteps?; constructor(); /** * Initializes the widget and sets properties of the input elements. Must be called before using the widget. * * @param {ITimeOptions} timeOptions - Configuration options for the time widget. */ initialize(timeOptions: ITimeOptions): void; renderComponent(): void; /** * Retrieves the value associated with the input element of the specified limit. * * @param {TimeRangeLimit} [limit] - Optional parameter specifying the limit ('upper' or 'lower') for which value is to be fetched. * @return {string} The date string value retrieved from the input element. */ getValue(limit?: TimeRangeLimit): string; /** * Transforms the date string to a slider position and set it to the specified input element. * Optionally, the `timeChange` event can be omitted. * Updates the UI elements (output, slider track) to the new value * and validates the positions of the sliders so the handles do not cross each other `range` mode. * * @param {string} dateStr - The date string to be set as the value. * @param {TimeRangeLimit} [limit='lower'] - The time range limit for which the value is to be set ('lower' or 'upper'). * @param {boolean} [triggerEvent=true] - Weather the `timeChange` event should be dispatched. */ setValue(dateStr: string, limit?: TimeRangeLimit, triggerEvent?: boolean): void; /** * Resets the input elements to their default states. This will be the min and max slider position * or the optionally defined `minDefaultValue` and `maxDefaultValue`. * Without `minDefaultValue` and `maxDefaultValue`, the slider state is set to disable. * The method will trigger a `TimeChangeEvent` that bubbles up to the parent component. */ reset(): void; private configureInputElements; private addEventListeners; private updateOutputLabel; /** * In `range` mode, the slider track gets a linear gradient to indicate the inside and outside of the time range. */ private updateSliderColorRange; /** * Indicate an inactive slider by coloring the output labels and slider track in a lighter color. */ private toggleSliderState; /** * Registers the position where the user clicks on the slider track * and moves the lower or upper slider handle to that position. * * @param {MouseEvent} event - The mouse event triggered by the click on the slider track. */ private trackClickToSliderPosition; /** * Attaches event listeners to input elements to validate their values when user interactions occur. * Makes sure the slider positions never cross each other in 'range' mode. Also takes care that * slider mouse handlers can be grabbed at any position on the slider by changing the zIndex. */ private validateLowerLimit; private validateUpperLimit; /** * Converts a date string to a corresponding time increment value based on the defined range (minValue/maxValue) * and resolution. * * @param {string} dateStr - The date string to be parsed and evaluated. * @return {number} The calculated position on the slider. * Returns 0 if the date string is invalid or falls outside the minimum range. * Returns the maximum time increment if the date exceeds the defined range. */ private dateStringToSliderPosition; /** * Converts a given slider position to a formatted date string based on the minValue / maxValue range * and resolution (day, week, month, or year). To stay independent of local time, new dates are created in UTC. * * @param {number} position - The number of increments to add to the current date based on the specified resolution. * @return {string} The formatted date string corresponding to the increment value and resolution. * @throws {Error} If the resolution is invalid. */ private sliderPositionToDateString; /** * Calculates the number of steps within the given time range based on the specified time resolution. * The returned number is zero base, indicating the index of the slider position. * The range starts at the minValue of the provided timeOptions. * * @param {Date} [maxVal] - The upper limit for the range. Defaults to the timeOptions > maxValue if not provided. * @return {number} The number of slider steps based on the resolution and time range. */ countSliderStepsInRange(maxVal?: Date): number; /** * Retrieves the position of a given date within a list of discrete time steps. * If the discrete time steps are not defined, the method returns undefined. * * @param {Date} date - The date for which the position needs to be determined. * @return {number | undefined} The index of the date in the list of discrete time steps, or undefined if not found. */ private getPositionInTimeValuesList; } export default TimeSliderComponent;