@itwin/imodel-components-react 4.0.0-dev.9 → 4.0.0

package/lib/esm/imodel-components-react/timeline/Scrubber.d.ts

@@ -1,55 +1,55 @@
-import "./Scrubber.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-import { TimelineDateMarkerProps } from "./TimelineComponent";
-/**
- * @internal
- */
-export declare function getPercentageOfRectangle(rect: DOMRect, pointer: number): number;
-/**
- * @internal
- */
-export declare function RailMarkers({ showToolTip, percent, tooltipText, markDate }: {
-    showToolTip: boolean;
-    percent: number;
-    tooltipText: string;
-    markDate?: DateMarkerProps;
-}): JSX.Element;
-/**
- * Custom Timeline Thumb
- * @internal
- */
-export declare function CustomThumb(): JSX.Element;
-/**
- * @internal
- */
-export declare function useFocusedThumb(sliderContainer: HTMLDivElement | undefined): boolean;
-/** Properties for Scrubber/Slider used on timeline control
- * @internal
- */
-export interface ScrubberProps extends CommonProps {
-    currentDuration: number;
-    totalDuration: number;
-    isPlaying: boolean;
-    inMiniMode: boolean;
-    startDate?: Date;
-    endDate?: Date;
-    showTime?: boolean;
-    onChange?: (values: ReadonlyArray<number>) => void;
-    onUpdate?: (values: ReadonlyArray<number>) => void;
-    timeZoneOffset?: number;
-    markDate?: TimelineDateMarkerProps;
-}
-/** Properties for marking current date in RailMarkers
- * @internal
- */
-interface DateMarkerProps {
-    datePercentage: number;
-    dateMarker?: React.ReactNode;
-}
-/** Scrubber/Slider for timeline control
- * @internal
- */
-export declare function Scrubber(props: ScrubberProps): JSX.Element;
-export {};
+import "./Scrubber.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+import { TimelineDateMarkerProps } from "./TimelineComponent";
+/**
+ * @internal
+ */
+export declare function getPercentageOfRectangle(rect: DOMRect, pointer: number): number;
+/**
+ * @internal
+ */
+export declare function RailMarkers({ showToolTip, percent, tooltipText, markDate }: {
+    showToolTip: boolean;
+    percent: number;
+    tooltipText: string;
+    markDate?: DateMarkerProps;
+}): JSX.Element;
+/**
+ * Custom Timeline Thumb
+ * @internal
+ */
+export declare function CustomThumb(): JSX.Element;
+/**
+ * @internal
+ */
+export declare function useFocusedThumb(sliderContainer: HTMLDivElement | undefined): boolean;
+/** Properties for Scrubber/Slider used on timeline control
+ * @internal
+ */
+export interface ScrubberProps extends CommonProps {
+    currentDuration: number;
+    totalDuration: number;
+    isPlaying: boolean;
+    inMiniMode: boolean;
+    startDate?: Date;
+    endDate?: Date;
+    showTime?: boolean;
+    onChange?: (values: ReadonlyArray<number>) => void;
+    onUpdate?: (values: ReadonlyArray<number>) => void;
+    timeZoneOffset?: number;
+    markDate?: TimelineDateMarkerProps;
+}
+/** Properties for marking current date in RailMarkers
+ * @internal
+ */
+interface DateMarkerProps {
+    datePercentage: number;
+    dateMarker?: React.ReactNode;
+}
+/** Scrubber/Slider for timeline control
+ * @internal
+ */
+export declare function Scrubber(props: ScrubberProps): JSX.Element;
+export {};
 //# sourceMappingURL=Scrubber.d.ts.map

package/lib/esm/imodel-components-react/timeline/Scrubber.js

@@ -1,165 +1,165 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-import "./Scrubber.scss";
-import * as React from "react";
-import { Slider } from "@itwin/itwinui-react";
-import { useEventListener } from "@itwin/core-react";
-import { toDateString, toTimeString } from "@itwin/components-react";
-/**
- * @internal
- */
-export function getPercentageOfRectangle(rect, pointer) {
-    const position = Math.min(rect.right, Math.max(rect.left, pointer));
-    return (position - rect.left) / rect.width;
-}
-// istanbul ignore next - WIP
-const formatDuration = (value) => {
-    const addZero = (i) => {
-        return (i < 10) ? `0${i}` : i;
-    };
-    const date = new Date(value);
-    const minutes = date.getUTCMinutes();
-    const seconds = date.getUTCSeconds();
-    return `${addZero(minutes)}:${addZero(seconds)}`;
-};
-const formatDate = (startDate, endDate, fraction, timeZoneOffset) => {
-    const delta = (endDate.getTime() - startDate.getTime()) * fraction;
-    const date = new Date(startDate.getTime() + delta);
-    return toDateString(date, timeZoneOffset);
-};
-// istanbul ignore next - WIP
-const formatTime = (startDate, endDate, fraction, timeZoneOffset) => {
-    const delta = (endDate.getTime() - startDate.getTime()) * fraction;
-    const date = new Date(startDate.getTime() + delta);
-    return ` ${toTimeString(date, timeZoneOffset)}`;
-};
-function generateToolTipText(showTime, percent, min, max, startDate, endDate, timeZoneOffset = 0) {
-    if (startDate && endDate)
-        return `${formatDate(startDate, endDate, percent, timeZoneOffset)}${showTime ? formatTime(startDate, endDate, percent, timeZoneOffset) : ""} `;
-    const val = Math.round(min + ((max - min) * percent));
-    return formatDuration(val);
-}
-function getPercentageFromDate(startDate, endDate, date) {
-    const newDate = date ? date : new Date();
-    const startTime = startDate.getTime();
-    const totalDuration = endDate.getTime() - startTime;
-    return (newDate.getTime() - startTime) / totalDuration;
-}
-function getDateMarker(dateMarkerPropsIn, startDate, endDate) {
-    const percentage = getPercentageFromDate(startDate, endDate, dateMarkerPropsIn.date);
-    const marker = dateMarkerPropsIn.dateMarker ? dateMarkerPropsIn.dateMarker : React.createElement("span", { className: "date-marker-default" });
-    return { datePercentage: percentage, dateMarker: marker };
-}
-function markDateInTimelineRange(dateMarkerProps, startDate, endDate) {
-    // istanbul ignore else
-    if (dateMarkerProps && startDate && endDate) {
-        const inDate = dateMarkerProps.date ? dateMarkerProps.date : new Date();
-        // istanbul ignore else
-        if (inDate.getTime() >= startDate.getTime() && inDate.getTime() <= endDate.getTime())
-            return true;
-    }
-    return false;
-}
-/**
- * @internal
- */
-export function RailMarkers({ showToolTip, percent, tooltipText, markDate }) {
-    return (React.createElement("div", { className: "components-timeline-rail-marker-container" },
-        showToolTip &&
-            React.createElement("div", { className: "components-timeline-tooltip", style: { left: `${Math.round(percent * 100)}% ` } },
-                React.createElement("span", { className: "tooltip-text" }, tooltipText)),
-        markDate &&
-            React.createElement("div", { className: "components-timeline-date-marker", "data-testid": "test-date-marker", style: { left: `${Math.round(markDate.datePercentage * 100)}% ` } }, markDate.dateMarker)));
-}
-/**
- * Custom Timeline Thumb
- * @internal
- */
-export function CustomThumb() {
-    return (React.createElement("div", { className: "scrubber-handle" },
-        React.createElement("div", null),
-        React.createElement("div", null),
-        React.createElement("div", null)));
-}
-/**
- * @internal
- */
-export function useFocusedThumb(sliderContainer) {
-    const [thumbElement, setThumbElement] = React.useState();
-    React.useLayoutEffect(() => {
-        // istanbul ignore else
-        if (sliderContainer) {
-            const element = sliderContainer.querySelector(".iui-slider-thumb");
-            if (element && thumbElement !== element) {
-                setThumbElement(element);
-            }
-        }
-    }, [sliderContainer, thumbElement]);
-    const [thumbHasFocus, setThumbHasFocus] = React.useState(false);
-    const handleThumbFocus = React.useCallback(() => {
-        setThumbHasFocus(true);
-    }, []);
-    const handleThumbBlur = React.useCallback(() => {
-        setThumbHasFocus(false);
-    }, []);
-    useEventListener("focus", handleThumbFocus, thumbElement);
-    useEventListener("blur", handleThumbBlur, thumbElement);
-    return thumbHasFocus;
-}
-/** Scrubber/Slider for timeline control
- * @internal
- */
-export function Scrubber(props) {
-    const { startDate, endDate, showTime, isPlaying, totalDuration, timeZoneOffset, currentDuration, className, onChange, onUpdate } = props;
-    const thumbProps = () => {
-        return {
-            className: "components-timeline-thumb",
-            children: React.createElement(CustomThumb, null),
-        };
-    };
-    const sliderRef = React.useRef(null);
-    const [sliderContainer, setSliderContainer] = React.useState();
-    const [pointerPercent, setPointerPercent] = React.useState(0);
-    React.useLayoutEffect(() => {
-        // istanbul ignore else
-        if (sliderRef.current) {
-            const container = sliderRef.current.querySelector(".iui-slider-container");
-            if (container && sliderContainer !== container) {
-                setSliderContainer(container);
-            }
-        }
-    }, [sliderContainer]);
-    const tooltipProps = React.useCallback(() => {
-        return { visible: false };
-    }, []);
-    const [showRailTooltip, setShowRailTooltip] = React.useState(false);
-    // istanbul ignore next
-    const handlePointerEnter = React.useCallback(() => {
-        setShowRailTooltip(true);
-    }, []);
-    // istanbul ignore next
-    const handlePointerLeave = React.useCallback(() => {
-        setShowRailTooltip(false);
-    }, []);
-    const handlePointerMove = React.useCallback((event) => {
-        sliderContainer &&
-            setPointerPercent(getPercentageOfRectangle(sliderContainer.getBoundingClientRect(), event.clientX));
-    }, [sliderContainer]);
-    const thumbHasFocus = useFocusedThumb(sliderContainer);
-    const tickLabel = React.useMemo(() => {
-        const showTip = isPlaying || showRailTooltip || thumbHasFocus;
-        const percent = (isPlaying || thumbHasFocus) ? currentDuration / totalDuration : pointerPercent;
-        const markDateInRange = markDateInTimelineRange(props.markDate, startDate, endDate);
-        const currentDateMarker = props.markDate && markDateInRange && startDate && endDate ? getDateMarker(props.markDate, startDate, endDate) : undefined;
-        const tooltipText = generateToolTipText(!!showTime, percent, 0, totalDuration, startDate, endDate, timeZoneOffset);
-        return (React.createElement(RailMarkers, { showToolTip: showTip, percent: percent, tooltipText: tooltipText, markDate: currentDateMarker }));
-    }, [isPlaying, showRailTooltip, currentDuration, totalDuration, pointerPercent, startDate, endDate, timeZoneOffset, showTime, thumbHasFocus, props.markDate]);
-    return (React.createElement(Slider, { ref: sliderRef, className: className, step: 1, min: 0, max: totalDuration, minLabel: "", maxLabel: "", onUpdate: onUpdate, onChange: onChange, values: [currentDuration], tooltipProps: tooltipProps, thumbProps: thumbProps, tickLabels: tickLabel, railContainerProps: {
-            onPointerEnter: handlePointerEnter,
-            onPointerMove: handlePointerMove,
-            onPointerLeave: handlePointerLeave,
-        } }));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import "./Scrubber.scss";
+import * as React from "react";
+import { Slider } from "@itwin/itwinui-react";
+import { useEventListener } from "@itwin/core-react";
+import { toDateString, toTimeString } from "@itwin/components-react";
+/**
+ * @internal
+ */
+export function getPercentageOfRectangle(rect, pointer) {
+    const position = Math.min(rect.right, Math.max(rect.left, pointer));
+    return (position - rect.left) / rect.width;
+}
+// istanbul ignore next - WIP
+const formatDuration = (value) => {
+    const addZero = (i) => {
+        return (i < 10) ? `0${i}` : i;
+    };
+    const date = new Date(value);
+    const minutes = date.getUTCMinutes();
+    const seconds = date.getUTCSeconds();
+    return `${addZero(minutes)}:${addZero(seconds)}`;
+};
+const formatDate = (startDate, endDate, fraction, timeZoneOffset) => {
+    const delta = (endDate.getTime() - startDate.getTime()) * fraction;
+    const date = new Date(startDate.getTime() + delta);
+    return toDateString(date, timeZoneOffset);
+};
+// istanbul ignore next - WIP
+const formatTime = (startDate, endDate, fraction, timeZoneOffset) => {
+    const delta = (endDate.getTime() - startDate.getTime()) * fraction;
+    const date = new Date(startDate.getTime() + delta);
+    return ` ${toTimeString(date, timeZoneOffset)}`;
+};
+function generateToolTipText(showTime, percent, min, max, startDate, endDate, timeZoneOffset = 0) {
+    if (startDate && endDate)
+        return `${formatDate(startDate, endDate, percent, timeZoneOffset)}${showTime ? formatTime(startDate, endDate, percent, timeZoneOffset) : ""} `;
+    const val = Math.round(min + ((max - min) * percent));
+    return formatDuration(val);
+}
+function getPercentageFromDate(startDate, endDate, date) {
+    const newDate = date ? date : new Date();
+    const startTime = startDate.getTime();
+    const totalDuration = endDate.getTime() - startTime;
+    return (newDate.getTime() - startTime) / totalDuration;
+}
+function getDateMarker(dateMarkerPropsIn, startDate, endDate) {
+    const percentage = getPercentageFromDate(startDate, endDate, dateMarkerPropsIn.date);
+    const marker = dateMarkerPropsIn.dateMarker ? dateMarkerPropsIn.dateMarker : React.createElement("span", { className: "date-marker-default" });
+    return { datePercentage: percentage, dateMarker: marker };
+}
+function markDateInTimelineRange(dateMarkerProps, startDate, endDate) {
+    // istanbul ignore else
+    if (dateMarkerProps && startDate && endDate) {
+        const inDate = dateMarkerProps.date ? dateMarkerProps.date : new Date();
+        // istanbul ignore else
+        if (inDate.getTime() >= startDate.getTime() && inDate.getTime() <= endDate.getTime())
+            return true;
+    }
+    return false;
+}
+/**
+ * @internal
+ */
+export function RailMarkers({ showToolTip, percent, tooltipText, markDate }) {
+    return (React.createElement("div", { className: "components-timeline-rail-marker-container" },
+        showToolTip &&
+            React.createElement("div", { className: "components-timeline-tooltip", style: { left: `${Math.round(percent * 100)}% ` } },
+                React.createElement("span", { className: "tooltip-text" }, tooltipText)),
+        markDate &&
+            React.createElement("div", { className: "components-timeline-date-marker", "data-testid": "test-date-marker", style: { left: `${Math.round(markDate.datePercentage * 100)}% ` } }, markDate.dateMarker)));
+}
+/**
+ * Custom Timeline Thumb
+ * @internal
+ */
+export function CustomThumb() {
+    return (React.createElement("div", { className: "scrubber-handle" },
+        React.createElement("div", null),
+        React.createElement("div", null),
+        React.createElement("div", null)));
+}
+/**
+ * @internal
+ */
+export function useFocusedThumb(sliderContainer) {
+    const [thumbElement, setThumbElement] = React.useState();
+    React.useLayoutEffect(() => {
+        // istanbul ignore else
+        if (sliderContainer) {
+            const element = sliderContainer.querySelector(".iui-slider-thumb");
+            if (element && thumbElement !== element) {
+                setThumbElement(element);
+            }
+        }
+    }, [sliderContainer, thumbElement]);
+    const [thumbHasFocus, setThumbHasFocus] = React.useState(false);
+    const handleThumbFocus = React.useCallback(() => {
+        setThumbHasFocus(true);
+    }, []);
+    const handleThumbBlur = React.useCallback(() => {
+        setThumbHasFocus(false);
+    }, []);
+    useEventListener("focus", handleThumbFocus, thumbElement);
+    useEventListener("blur", handleThumbBlur, thumbElement);
+    return thumbHasFocus;
+}
+/** Scrubber/Slider for timeline control
+ * @internal
+ */
+export function Scrubber(props) {
+    const { startDate, endDate, showTime, isPlaying, totalDuration, timeZoneOffset, currentDuration, className, onChange, onUpdate } = props;
+    const thumbProps = () => {
+        return {
+            className: "components-timeline-thumb",
+            children: React.createElement(CustomThumb, null),
+        };
+    };
+    const sliderRef = React.useRef(null);
+    const [sliderContainer, setSliderContainer] = React.useState();
+    const [pointerPercent, setPointerPercent] = React.useState(0);
+    React.useLayoutEffect(() => {
+        // istanbul ignore else
+        if (sliderRef.current) {
+            const container = sliderRef.current.querySelector(".iui-slider-container");
+            if (container && sliderContainer !== container) {
+                setSliderContainer(container);
+            }
+        }
+    }, [sliderContainer]);
+    const tooltipProps = React.useCallback(() => {
+        return { visible: false };
+    }, []);
+    const [showRailTooltip, setShowRailTooltip] = React.useState(false);
+    // istanbul ignore next
+    const handlePointerEnter = React.useCallback(() => {
+        setShowRailTooltip(true);
+    }, []);
+    // istanbul ignore next
+    const handlePointerLeave = React.useCallback(() => {
+        setShowRailTooltip(false);
+    }, []);
+    const handlePointerMove = React.useCallback((event) => {
+        sliderContainer &&
+            setPointerPercent(getPercentageOfRectangle(sliderContainer.getBoundingClientRect(), event.clientX));
+    }, [sliderContainer]);
+    const thumbHasFocus = useFocusedThumb(sliderContainer);
+    const tickLabel = React.useMemo(() => {
+        const showTip = isPlaying || showRailTooltip || thumbHasFocus;
+        const percent = (isPlaying || thumbHasFocus) ? currentDuration / totalDuration : pointerPercent;
+        const markDateInRange = markDateInTimelineRange(props.markDate, startDate, endDate);
+        const currentDateMarker = props.markDate && markDateInRange && startDate && endDate ? getDateMarker(props.markDate, startDate, endDate) : undefined;
+        const tooltipText = generateToolTipText(!!showTime, percent, 0, totalDuration, startDate, endDate, timeZoneOffset);
+        return (React.createElement(RailMarkers, { showToolTip: showTip, percent: percent, tooltipText: tooltipText, markDate: currentDateMarker }));
+    }, [isPlaying, showRailTooltip, currentDuration, totalDuration, pointerPercent, startDate, endDate, timeZoneOffset, showTime, thumbHasFocus, props.markDate]);
+    return (React.createElement(Slider, { ref: sliderRef, className: className, step: 1, min: 0, max: totalDuration, minLabel: "", maxLabel: "", onUpdate: onUpdate, onChange: onChange, values: [currentDuration], tooltipProps: tooltipProps, thumbProps: thumbProps, tickLabels: tickLabel, railContainerProps: {
+            onPointerEnter: handlePointerEnter,
+            onPointerMove: handlePointerMove,
+            onPointerLeave: handlePointerLeave,
+        } }));
+}
 //# sourceMappingURL=Scrubber.js.map

package/lib/esm/imodel-components-react/timeline/Scrubber.scss

@@ -2,25 +2,18 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
 @import "~@itwin/core-react/lib/cjs/core-react/z-index";
-
 // the following overrides default iui-slider-thumb settings from  iTwinUI
 div.components-timeline-thumb.iui-slider-thumb {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-image: linear-gradient(
-      to bottom,
-      $buic-background-3,
-      $buic-background-3
-    ),
-    linear-gradient(to bottom, $buic-background-1, $buic-background-1);
+  background-color: var(--iui-color-background);
   box-sizing: border-box;
   width: 38px;
   height: 20px;
   border-radius: var(--iui-border-radius-1);
-  border: 1px solid $buic-background-5;
+  border: 1px solid var(--iui-color-border);
   transform: translateX(-19.2px);
   top: 4px;
 }
@@ -35,12 +28,12 @@ div.components-timeline-thumb.iui-slider-thumb {
     top: -8px;
     display: inline-block;
     transform: translateX(-50px);
-    border-bottom: 1px dotted #222;
+    border-bottom: 1px dotted rgba(0, 0, 0, var(--iui-opacity-3));
     font-size: 14px;
 
     .tooltip-text {
       width: 100px;
-      background-color: #222;
+      background-color: rgba(0, 0, 0, var(--iui-opacity-3));
       color: #fff;
       // opacity: 0.8;
       text-align: center;
@@ -58,7 +51,8 @@ div.components-timeline-thumb.iui-slider-thumb {
         margin-left: -5px;
         border-width: 5px;
         border-style: solid;
-        border-color: #222 transparent transparent transparent;
+        border-color: rgba(0, 0, 0, var(--iui-opacity-3)) transparent
+          transparent transparent;
       }
     }
   }
@@ -79,9 +73,8 @@ div.components-timeline-thumb.iui-slider-thumb {
   > div {
     width: 1px;
     height: 10px;
-    opacity: 0.25;
     margin: 0 1px;
-    background-color: $buic-foreground-body;
+    background-color: var(--iui-color-border-subtle);
   }
 }
 
@@ -108,5 +101,5 @@ div.components-timeline-thumb.iui-slider-thumb {
   width: 3px;
   border-radius: var(--iui-border-radius-1);
   transform: translateY(1px);
-  background-color: $buic-foreground-primary;
+  background-color: var(--iui-color-border);
 }

package/lib/esm/imodel-components-react/timeline/SolarTimeline.d.ts

@@ -1,78 +1,78 @@
-/** @packageDocumentation
- * @module Timeline
- */
-import "./SolarTimeline.scss";
-import * as React from "react";
-import { ColorDef } from "@itwin/core-common";
-import { SolarDataProvider } from "./interfaces";
-interface SolarTimelineComponentProps {
-    dataProvider: SolarDataProvider;
-    onPlayPause?: (playing: boolean) => void;
-    duration?: number;
-    speed?: number;
-}
-interface SolarTimelineComponentState {
-    isPlaying: boolean;
-    isDateOpened: boolean;
-    isSettingsOpened: boolean;
-    dayStartMs: number;
-    sunRiseOffsetMs: number;
-    sunSetOffsetMs: number;
-    sunDeltaMs: number;
-    currentTimeOffsetMs: number;
-    speed: number;
-    loop: boolean;
-    shadowColor: ColorDef;
-    duration: number;
-    adjustedDuration: number;
-}
-/** Solar Timeline
- * @alpha
- */
-export declare class SolarTimeline extends React.PureComponent<SolarTimelineComponentProps, SolarTimelineComponentState> {
-    private _datePicker;
-    private _settings;
-    private _requestFrame;
-    private _unmounted;
-    private _timeLastCycle;
-    private _totalPlayTime;
-    private _settingsPopupTitle;
-    private _playLabel;
-    private _settingLabel;
-    private _loopLabel;
-    private _speedLabel;
-    private _dateTimeLabel;
-    private _months;
-    private _timeLabel;
-    private _amLabel;
-    private _pmLabel;
-    private readonly _presetColors;
-    constructor(props: SolarTimelineComponentProps);
-    componentWillUnmount(): void;
-    private _updateAnimation;
-    private _play;
-    private _onPause;
-    private _onPlay;
-    private setPlaybackTimeBySunTime;
-    /** note the day passed in is in the time of the current user not in project time because the date picker works in
-     * local time  */
-    private _onDayClick;
-    private _onTimeChanged;
-    private _onCloseDayPicker;
-    private _onOpenDayPicker;
-    private _onCloseSettingsPopup;
-    private _onOpenSettingsPopup;
-    private ensureRange;
-    private processSunTimeChange;
-    private _onUpdate;
-    private _onChange;
-    private _onSpeedChange;
-    private _onToggleLoop;
-    private _formatTime;
-    private _onPresetColorPick;
-    private _handleHueOrSaturationChange;
-    getLocalTime(ticks: number): Date;
-    render(): JSX.Element;
-}
-export {};
+/** @packageDocumentation
+ * @module Timeline
+ */
+import "./SolarTimeline.scss";
+import * as React from "react";
+import { ColorDef } from "@itwin/core-common";
+import { SolarDataProvider } from "./interfaces";
+interface SolarTimelineComponentProps {
+    dataProvider: SolarDataProvider;
+    onPlayPause?: (playing: boolean) => void;
+    duration?: number;
+    speed?: number;
+}
+interface SolarTimelineComponentState {
+    isPlaying: boolean;
+    isDateOpened: boolean;
+    isSettingsOpened: boolean;
+    dayStartMs: number;
+    sunRiseOffsetMs: number;
+    sunSetOffsetMs: number;
+    sunDeltaMs: number;
+    currentTimeOffsetMs: number;
+    speed: number;
+    loop: boolean;
+    shadowColor: ColorDef;
+    duration: number;
+    adjustedDuration: number;
+}
+/** Solar Timeline
+ * @alpha
+ */
+export declare class SolarTimeline extends React.PureComponent<SolarTimelineComponentProps, SolarTimelineComponentState> {
+    private _datePicker;
+    private _settings;
+    private _requestFrame;
+    private _unmounted;
+    private _timeLastCycle;
+    private _totalPlayTime;
+    private _settingsPopupTitle;
+    private _playLabel;
+    private _settingLabel;
+    private _loopLabel;
+    private _speedLabel;
+    private _dateTimeLabel;
+    private _months;
+    private _timeLabel;
+    private _amLabel;
+    private _pmLabel;
+    private readonly _presetColors;
+    constructor(props: SolarTimelineComponentProps);
+    componentWillUnmount(): void;
+    private _updateAnimation;
+    private _play;
+    private _onPause;
+    private _onPlay;
+    private setPlaybackTimeBySunTime;
+    /** note the day passed in is in the time of the current user not in project time because the date picker works in
+     * local time  */
+    private _onDayClick;
+    private _onTimeChanged;
+    private _onCloseDayPicker;
+    private _onOpenDayPicker;
+    private _onCloseSettingsPopup;
+    private _onOpenSettingsPopup;
+    private ensureRange;
+    private processSunTimeChange;
+    private _onUpdate;
+    private _onChange;
+    private _onSpeedChange;
+    private _onToggleLoop;
+    private _formatTime;
+    private _onPresetColorPick;
+    private _handleHueOrSaturationChange;
+    getLocalTime(ticks: number): Date;
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=SolarTimeline.d.ts.map