@itwin/imodel-components-react 3.4.0-dev.62 → 3.4.0-dev.63

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

@@ -1,16 +1,16 @@
-/** @packageDocumentation
- * @module Timeline
- */
-/// <reference types="react" />
-import "./SpeedTimeline.scss";
-import { CommonProps } from "@itwin/core-react";
-interface SpeedProps extends CommonProps {
-    speed: number;
-    onChange?: (value: number) => void;
-}
-/** Speed Timeline used in Solar Timeline component
- * @internal
- */
-export declare function SpeedTimeline(props: SpeedProps): JSX.Element;
-export {};
+/** @packageDocumentation
+ * @module Timeline
+ */
+/// <reference types="react" />
+import "./SpeedTimeline.scss";
+import { CommonProps } from "@itwin/core-react";
+interface SpeedProps extends CommonProps {
+    speed: number;
+    onChange?: (value: number) => void;
+}
+/** Speed Timeline used in Solar Timeline component
+ * @internal
+ */
+export declare function SpeedTimeline(props: SpeedProps): JSX.Element;
+export {};
 //# sourceMappingURL=SpeedTimeline.d.ts.map

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

@@ -1,29 +1,29 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Timeline
- */
-import "./SpeedTimeline.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { Slider } from "@itwin/itwinui-react";
-/** Speed Timeline used in Solar Timeline component
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function SpeedTimeline(props) {
-    // istanbul ignore next - WIP
-    const onChange = (values) => {
-        const value = values[0];
-        if (props.onChange && (value >= 1 && value <= 6))
-            props.onChange(value);
-    };
-    const tooltipProps = React.useCallback(() => {
-        return { visible: false };
-    }, []);
-    return (React.createElement("div", { className: classnames("speed-timeline", props.className) },
-        React.createElement(Slider, { step: 1, min: 1, max: 6, minLabel: "", maxLabel: "", onUpdate: onChange, onChange: onChange, values: [props.speed], trackDisplayMode: "none", tooltipProps: tooltipProps })));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Timeline
+ */
+import "./SpeedTimeline.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Slider } from "@itwin/itwinui-react";
+/** Speed Timeline used in Solar Timeline component
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function SpeedTimeline(props) {
+    // istanbul ignore next - WIP
+    const onChange = (values) => {
+        const value = values[0];
+        if (props.onChange && (value >= 1 && value <= 6))
+            props.onChange(value);
+    };
+    const tooltipProps = React.useCallback(() => {
+        return { visible: false };
+    }, []);
+    return (React.createElement("div", { className: classnames("speed-timeline", props.className) },
+        React.createElement(Slider, { step: 1, min: 1, max: 6, minLabel: "", maxLabel: "", onUpdate: onChange, onChange: onChange, values: [props.speed], trackDisplayMode: "none", tooltipProps: tooltipProps })));
+}
 //# sourceMappingURL=SpeedTimeline.js.map

package/lib/esm/imodel-components-react/timeline/SpeedTimeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpeedTimeline.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/SpeedTimeline.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAU9C;;GAEG;AACH,gEAAgE;AAChE,MAAM,UAAU,aAAa,CAAC,KAAiB;IAC7C,6BAA6B;IAC7B,MAAM,QAAQ,GAAG,CAAC,MAA6B,EAAE,EAAE;QACjD,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;QACxB,IAAI,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;YAC9C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,6BAAK,SAAS,EAAE,UAAU,CAAC,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC;QAC3D,oBAAC,MAAM,IACL,IAAI,EAAE,CAAC,EACP,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,CAAC,EACN,QAAQ,EAAC,EAAE,EACX,QAAQ,EAAC,EAAE,EACX,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EACrB,gBAAgB,EAAC,MAAM,EACvB,YAAY,EAAE,YAAY,GAAI,CAC5B,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Timeline\r\n */\r\n\r\nimport \"./SpeedTimeline.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Slider } from \"@itwin/itwinui-react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\n\r\n// component is in alpha state - it may change after usability testing - test coverage not complete\r\n\r\ninterface SpeedProps extends CommonProps {\r\n  speed: number;\r\n  onChange?: (value: number) => void;\r\n}\r\n\r\n/** Speed Timeline used in Solar Timeline component\r\n * @internal\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport function SpeedTimeline(props: SpeedProps) {\r\n  // istanbul ignore next - WIP\r\n  const onChange = (values: ReadonlyArray<number>) => {\r\n    const value = values[0];\r\n    if (props.onChange && (value >= 1 && value <= 6))\r\n      props.onChange(value);\r\n  };\r\n\r\n  const tooltipProps = React.useCallback(() => {\r\n    return { visible: false };\r\n  }, []);\r\n\r\n  return (\r\n    <div className={classnames(\"speed-timeline\", props.className)}>\r\n      <Slider\r\n        step={1}\r\n        min={1}\r\n        max={6}\r\n        minLabel=\"\"\r\n        maxLabel=\"\"\r\n        onUpdate={onChange}\r\n        onChange={onChange}\r\n        values={[props.speed]}\r\n        trackDisplayMode=\"none\"\r\n        tooltipProps={tooltipProps} />\r\n    </div>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"SpeedTimeline.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/SpeedTimeline.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAU9C;;GAEG;AACH,gEAAgE;AAChE,MAAM,UAAU,aAAa,CAAC,KAAiB;IAC7C,6BAA6B;IAC7B,MAAM,QAAQ,GAAG,CAAC,MAA6B,EAAE,EAAE;QACjD,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;QACxB,IAAI,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;YAC9C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,6BAAK,SAAS,EAAE,UAAU,CAAC,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC;QAC3D,oBAAC,MAAM,IACL,IAAI,EAAE,CAAC,EACP,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,CAAC,EACN,QAAQ,EAAC,EAAE,EACX,QAAQ,EAAC,EAAE,EACX,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EACrB,gBAAgB,EAAC,MAAM,EACvB,YAAY,EAAE,YAAY,GAAI,CAC5B,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Timeline\n */\n\nimport \"./SpeedTimeline.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Slider } from \"@itwin/itwinui-react\";\nimport { CommonProps } from \"@itwin/core-react\";\n\n// component is in alpha state - it may change after usability testing - test coverage not complete\n\ninterface SpeedProps extends CommonProps {\n  speed: number;\n  onChange?: (value: number) => void;\n}\n\n/** Speed Timeline used in Solar Timeline component\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function SpeedTimeline(props: SpeedProps) {\n  // istanbul ignore next - WIP\n  const onChange = (values: ReadonlyArray<number>) => {\n    const value = values[0];\n    if (props.onChange && (value >= 1 && value <= 6))\n      props.onChange(value);\n  };\n\n  const tooltipProps = React.useCallback(() => {\n    return { visible: false };\n  }, []);\n\n  return (\n    <div className={classnames(\"speed-timeline\", props.className)}>\n      <Slider\n        step={1}\n        min={1}\n        max={6}\n        minLabel=\"\"\n        maxLabel=\"\"\n        onUpdate={onChange}\n        onChange={onChange}\n        values={[props.speed]}\n        trackDisplayMode=\"none\"\n        tooltipProps={tooltipProps} />\n    </div>\n  );\n}\n"]}

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

@@ -1,40 +1,40 @@
-/*---------------------------------------------------------------------------------------------
-* 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";
-
-.speed-timeline {
-  position: relative;
-  height: 25px;
-
-  .railOuter {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-  }
-
-  .railInner {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 100%;
-    height: 2px;
-    pointer-events: none;
-    background: $buic-background-5;
-  }
-
-  .scrubberHandle {
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 4;
-    width: 12px;
-    height: 12px;
-    cursor: pointer;
-    border: none;
-    border-radius: 50%;
-    background: $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";
+
+.speed-timeline {
+  position: relative;
+  height: 25px;
+
+  .railOuter {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+  }
+
+  .railInner {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    height: 2px;
+    pointer-events: none;
+    background: $buic-background-5;
+  }
+
+  .scrubberHandle {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 4;
+    width: 12px;
+    height: 12px;
+    cursor: pointer;
+    border: none;
+    border-radius: 50%;
+    background: $buic-foreground-primary;
+  }
 }

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

@@ -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 "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
-.timeline {
-    position: relative;
-    height: 110px;
-    background: $buic-background-1;
-    border: 1px solid $buic-background-5;
-    box-sizing: border-box;
-}
-
-.rail {
-    position: absolute;
-    width: 100%;
-    height: 40px;
-    top: 50%;
-    transform: translateY(-50%);
-    cursor: pointer;
-    z-index: 3;
-}
-
-.rail-center {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    height: 4px;
-    cursor: pointer;
-    pointer-events: none;
-    background: $buic-background-5;
-}
-
-.tooltip-rail {
-    position: absolute;
-    margin-left: -11px;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
-}
-
-.needle {
-    position: absolute;
-    top: 0;
-    transform: translateX(-50%);
-    z-index: 4;
-    width: 2px;
-    height: 100%;
-    background: $buic-foreground-primary;
-    cursor: pointer;
-}
-
-.handle {
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 4;
-    width: 14px;
-    height: 14px;
-    cursor: pointer;
-    border: none;
-    border-radius: 50%;
-    background: $buic-foreground-primary;
-    border: 2px solid $buic-background-1;
-
-    >span {
-        position: absolute;
-        left: 50%;
-        bottom: -25px;
-        font-size: 14px;
-        white-space: nowrap;
-        transform: translateX(-50%);
-        color: rgba(black, .85);
-    }
-
-    input {
-        position: absolute;
-        border: none;
-        margin-top: 10px;
-        top: 1.2rem;
-        left: 50%;
-        transform: translateX(-50%);
-        cursor: pointer;
-    }
-
-    input:focus {
-        cursor: text;
-        left: -.25rem;
-        top: calc(1.2rem - .25rem);
-        width: 140px;
-        padding: .25rem;
-        border: 1px solid #ddd;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, .11);
-        box-sizing: border-box;
-        outline: none;
-    }
-}
-
-.tick-line {
-    position: absolute;
-    width: 2px;
-    height: 11px;
-    transform: translateX(-50%);
-    background: $buic-background-5;
-}
-
-.tick-label {
-    position: absolute;
-    margin-top: 9px;
-    font-size: 14px;
-    color: rgba(black, .85);
-    white-space: nowrap;
-}
-
-.tick-label.start {
-    left: -50px;
-}
-
-.tick-label.end {
-    right: -50px;
-    text-align: right;
-}
-
-.tick-label.tick {
-    margin-left: 11px;
-    text-align: left;
-}
-
-.tooltip {
-    position: absolute;
-    top: -20px;
-    display: inline-block;
-    border-bottom: 1px dotted #222;
-    margin-left: 22px;
-    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%;
-        left: 50%;
-        margin-left: -60px;
-
-        &:after {
-            content: "";
-            position: absolute;
-            top: 100%;
-            left: 50%;
-            margin-left: -5px;
-            border-width: 5px;
-            border-style: solid;
-            border-color: #222 transparent transparent transparent;
-        }
-    }
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+.timeline {
+    position: relative;
+    height: 110px;
+    background: $buic-background-1;
+    border: 1px solid $buic-background-5;
+    box-sizing: border-box;
+}
+
+.rail {
+    position: absolute;
+    width: 100%;
+    height: 40px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    z-index: 3;
+}
+
+.rail-center {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 4px;
+    cursor: pointer;
+    pointer-events: none;
+    background: $buic-background-5;
+}
+
+.tooltip-rail {
+    position: absolute;
+    margin-left: -11px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+}
+
+.needle {
+    position: absolute;
+    top: 0;
+    transform: translateX(-50%);
+    z-index: 4;
+    width: 2px;
+    height: 100%;
+    background: $buic-foreground-primary;
+    cursor: pointer;
+}
+
+.handle {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 4;
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+    border: none;
+    border-radius: 50%;
+    background: $buic-foreground-primary;
+    border: 2px solid $buic-background-1;
+
+    >span {
+        position: absolute;
+        left: 50%;
+        bottom: -25px;
+        font-size: 14px;
+        white-space: nowrap;
+        transform: translateX(-50%);
+        color: rgba(black, .85);
+    }
+
+    input {
+        position: absolute;
+        border: none;
+        margin-top: 10px;
+        top: 1.2rem;
+        left: 50%;
+        transform: translateX(-50%);
+        cursor: pointer;
+    }
+
+    input:focus {
+        cursor: text;
+        left: -.25rem;
+        top: calc(1.2rem - .25rem);
+        width: 140px;
+        padding: .25rem;
+        border: 1px solid #ddd;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, .11);
+        box-sizing: border-box;
+        outline: none;
+    }
+}
+
+.tick-line {
+    position: absolute;
+    width: 2px;
+    height: 11px;
+    transform: translateX(-50%);
+    background: $buic-background-5;
+}
+
+.tick-label {
+    position: absolute;
+    margin-top: 9px;
+    font-size: 14px;
+    color: rgba(black, .85);
+    white-space: nowrap;
+}
+
+.tick-label.start {
+    left: -50px;
+}
+
+.tick-label.end {
+    right: -50px;
+    text-align: right;
+}
+
+.tick-label.tick {
+    margin-left: 11px;
+    text-align: left;
+}
+
+.tooltip {
+    position: absolute;
+    top: -20px;
+    display: inline-block;
+    border-bottom: 1px dotted #222;
+    margin-left: 22px;
+    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%;
+        left: 50%;
+        margin-left: -60px;
+
+        &:after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            margin-left: -5px;
+            border-width: 5px;
+            border-style: solid;
+            border-color: #222 transparent transparent transparent;
+        }
+    }
 }