@geogirafe/lib-geoportal/components/timerestriction/timeslider/component.d.ts

GeoGirafe is a flexible application to build online geoportals.

import ITimeOptions from '../../../tools/time/itimeoptions';
import TimeWidget, { TimeRangeLimit } from '../tools/timewidget';
/**
 * 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 `<input>` 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 {
    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;