@itwin/imodel-components-react 4.0.0-dev.1 → 4.0.0-dev.10

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

@@ -1,107 +1,112 @@
-/*---------------------------------------------------------------------------------------------
-* 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);
-  box-sizing: border-box;
-  width: 38px;
-  height: 20px;
-  border-radius: 4px;
-  border: 1px solid $buic-background-5;
-  transform: translateX(-19.2px);
-  top: 4px;
-}
-
-.components-timeline-rail-marker-container {
-  width: 100%;
-  position: absolute;
-
-  div.components-timeline-tooltip {
-    @include uicore-z-index(tooltip);
-    position: absolute;
-    top: -8px;
-    display: inline-block;
-    transform: translateX(-50px);
-    border-bottom: 1px dotted #222;
-    font-size: 14px;
-
-    .tooltip-text {
-      width: 100px;
-      background-color: #222;
-      color: #fff;
-      // opacity: 0.8;
-      text-align: center;
-      border-radius: 6px;
-      padding: 8px 0;
-      position: absolute;
-      z-index: 1;
-      bottom: 150%;
-
-      &:after {
-        content: "";
-        position: absolute;
-        top: 100%;
-        left: 50%;
-        margin-left: -5px;
-        border-width: 5px;
-        border-style: solid;
-        border-color: #222 transparent transparent transparent;
-      }
-    }
-  }
-}
-
-.scrubber-handle {
-  pointer-events: none;
-  position: absolute;
-  width: 38px;
-  height: 20px;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  cursor: pointer;
-
-  >div {
-    width: 1px;
-    height: 10px;
-    opacity: 0.25;
-    margin: 0 1px;
-    background-color: $buic-foreground-body;
-  }
-}
-
-.scrubber-track {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  height: 4px;
-  z-index: 1;
-  cursor: pointer;
-}
-
-.components-timeline-date-marker {
-  pointer-events: none;
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transform: translateY(50%);
-}
-
-.date-marker-default {
-  height: 12px;
-  width: 3px;
-  border-radius: 4px;
-  transform: translateY(1px);
-  background-color: $buic-foreground-primary;
-}
+/*---------------------------------------------------------------------------------------------
+* 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);
+  box-sizing: border-box;
+  width: 38px;
+  height: 20px;
+  border-radius: var(--iui-border-radius-1);
+  border: 1px solid $buic-background-5;
+  transform: translateX(-19.2px);
+  top: 4px;
+}
+
+.components-timeline-rail-marker-container {
+  width: 100%;
+  position: absolute;
+
+  div.components-timeline-tooltip {
+    @include uicore-z-index(tooltip);
+    position: absolute;
+    top: -8px;
+    display: inline-block;
+    transform: translateX(-50px);
+    border-bottom: 1px dotted #222;
+    font-size: 14px;
+
+    .tooltip-text {
+      width: 100px;
+      background-color: #222;
+      color: #fff;
+      // opacity: 0.8;
+      text-align: center;
+      border-radius: 6px;
+      padding: 8px 0;
+      position: absolute;
+      z-index: 1;
+      bottom: 150%;
+
+      &:after {
+        content: "";
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-left: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: #222 transparent transparent transparent;
+      }
+    }
+  }
+}
+
+.scrubber-handle {
+  pointer-events: none;
+  position: absolute;
+  width: 38px;
+  height: 20px;
+  border-radius: var(--iui-border-radius-1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  > div {
+    width: 1px;
+    height: 10px;
+    opacity: 0.25;
+    margin: 0 1px;
+    background-color: $buic-foreground-body;
+  }
+}
+
+.scrubber-track {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 4px;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.components-timeline-date-marker {
+  pointer-events: none;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(50%);
+}
+
+.date-marker-default {
+  height: 12px;
+  width: 3px;
+  border-radius: var(--iui-border-radius-1);
+  transform: translateY(1px);
+  background-color: $buic-foreground-primary;
+}

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