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

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

@@ -1 +1 @@
-{"version":3,"file":"BaseTimelineDataProvider.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/BaseTimelineDataProvider.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAKH;;GAEG;AACH,MAAM,OAAO,wBAAwB;IAUnC,YAAY,QAAyB;QATrB,OAAE,GAAG,0BAA0B,CAAC;QAGzC,WAAM,GAAG,EAAE,CAAC;QAEZ,8BAAyB,GAAG,KAAK,CAAC,CAAC,oEAAoE;QACvG,sBAAiB,GAAW,CAAC,CAAC,CAAC,kFAAkF;QAU9G,cAAS,GAAqB;YACtC,QAAQ,EAAE,EAAE,GAAG,IAAI;YACnB,IAAI,EAAE,IAAI;SACX,CAAC;QA2CF,uBAAuB;QAChB,6BAAwB,GAAG,CAAC,SAA2B,EAAE,EAAE;QAClE,CAAC,CAAC;QAEF,uBAAuB;QAChB,+BAA0B,GAAG,CAAC,kBAA0B,EAAE,EAAE;QACnE,CAAC,CAAC;QA1DA,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAC1B,2BAA2B;QAC3B,IAAI,QAAQ;YACV,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;IACnC,CAAC;IAOD,uBAAuB;IAChB,KAAK,CAAC,gBAAgB;QAC3B,OAAO,KAAK,CAAC;IACf,CAAC;IAED,kDAAkD;IAClD,IAAW,eAAe;QACxB,OAAO,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC;IAChD,CAAC;IAED,uCAAuC;IACvC,IAAW,QAAQ;QACjB,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAS,CAAC,CAAC,CAAC,0BAA0B,CAAC,KAAK,CAAC;IACzG,CAAC;IAED,6BAA6B;IAC7B,IAAW,QAAQ,CAAC,QAAoC;QACtD,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAC1B,IAAI,QAAQ;YACV,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;;YAE/B,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;IACrB,CAAC;IAED,6BAA6B;IAC7B,IAAW,QAAQ;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED,IAAW,IAAI;QACb,OAAO,CAAC,SAAS,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,IAAK,CAAC;IAC/G,CAAC;IAEM,WAAW;QAChB,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAEM,cAAc,CAAC,QAA0B;QAC9C,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,QAAQ,EAAE,CAAC;IACtD,CAAC;CASF","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 { ScreenViewport } from \"@itwin/core-frontend\";\nimport { PlaybackSettings, TimelineDataProvider } from \"./interfaces\";\n\n/** Base Timeline Data Provider\n * @alpha\n */\nexport class BaseTimelineDataProvider implements TimelineDataProvider {\n  public readonly id = \"TestTimelineDataProvider\";\n  public start: Date | undefined;\n  public end: Date | undefined;\n  public viewId = \"\";\n\n  public supportsTimelineAnimation = false; // set to true when provider determines animation data is available.\n  public animationFraction: number = 0; // value from 0.0 to 1.0 that specifies the percentage complete for the animation.\n  protected _viewport: ScreenViewport | undefined;\n\n  constructor(viewport?: ScreenViewport) {\n    this._viewport = viewport;\n    // istanbul ignore if - WIP\n    if (viewport)\n      this.viewId = viewport.view.id;\n  }\n\n  protected _settings: PlaybackSettings = {\n    duration: 20 * 1000,\n    loop: true,\n  };\n\n  // istanbul ignore next\n  public async loadTimelineData(): Promise<boolean> {\n    return false;\n  }\n\n  /** Called to get the initial scrubber location */\n  public get initialDuration(): number {\n    return this.duration * this.animationFraction;\n  }\n\n  /** Called to get playback duration  */\n  public get duration(): number {\n    return (this.getSettings().duration) ? this.getSettings().duration! : /* istanbul ignore next */ 20000;\n  }\n\n  // istanbul ignore next - WIP\n  public set viewport(viewport: ScreenViewport | undefined) {\n    this._viewport = viewport;\n    if (viewport)\n      this.viewId = viewport.view.id;\n    else\n      this.viewId = \"\";\n  }\n\n  // istanbul ignore next - WIP\n  public get viewport(): ScreenViewport | undefined {\n    return this._viewport;\n  }\n\n  public get loop(): boolean {\n    return (undefined === this.getSettings().loop) ? /* istanbul ignore next */ false : this.getSettings().loop!;\n  }\n\n  public getSettings(): PlaybackSettings {\n    return this._settings;\n  }\n\n  public updateSettings(settings: PlaybackSettings) {\n    this._settings = { ...this._settings, ...settings };\n  }\n\n  // istanbul ignore next\n  public onPlaybackSettingChanged = (_settings: PlaybackSettings) => {\n  };\n\n  // istanbul ignore next\n  public onAnimationFractionChanged = (_animationFraction: number) => {\n  };\n}\n"]}
+{"version":3,"file":"BaseTimelineDataProvider.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/BaseTimelineDataProvider.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAKH;;GAEG;AACH,MAAM,OAAO,wBAAwB;IAUnC,YAAY,QAAyB;QATrB,OAAE,GAAG,0BAA0B,CAAC;QAGzC,WAAM,GAAG,EAAE,CAAC;QAEZ,8BAAyB,GAAG,KAAK,CAAC,CAAC,oEAAoE;QACvG,sBAAiB,GAAW,CAAC,CAAC,CAAC,kFAAkF;QAU9G,cAAS,GAAqB;YACtC,QAAQ,EAAE,EAAE,GAAG,IAAI;YACnB,IAAI,EAAE,IAAI;SACX,CAAC;QA2CF,uBAAuB;QAChB,6BAAwB,GAAG,CAAC,SAA2B,EAAE,EAAE;QAClE,CAAC,CAAC;QAEF,uBAAuB;QAChB,+BAA0B,GAAG,CAAC,kBAA0B,EAAE,EAAE;QACnE,CAAC,CAAC;QA1DA,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAC1B,2BAA2B;QAC3B,IAAI,QAAQ;YACV,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;IACnC,CAAC;IAOD,uBAAuB;IAChB,KAAK,CAAC,gBAAgB;QAC3B,OAAO,KAAK,CAAC;IACf,CAAC;IAED,kDAAkD;IAClD,IAAW,eAAe;QACxB,OAAO,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC;IAChD,CAAC;IAED,uCAAuC;IACvC,IAAW,QAAQ;QACjB,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAS,CAAC,CAAC,CAAC,0BAA0B,CAAC,KAAK,CAAC;IACzG,CAAC;IAED,6BAA6B;IAC7B,IAAW,QAAQ,CAAC,QAAoC;QACtD,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAC1B,IAAI,QAAQ;YACV,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;;YAE/B,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;IACrB,CAAC;IAED,6BAA6B;IAC7B,IAAW,QAAQ;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED,IAAW,IAAI;QACb,OAAO,CAAC,SAAS,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,IAAK,CAAC;IAC/G,CAAC;IAEM,WAAW;QAChB,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAEM,cAAc,CAAC,QAA0B;QAC9C,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,QAAQ,EAAE,CAAC;IACtD,CAAC;CASF","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 { ScreenViewport } from \"@itwin/core-frontend\";\r\nimport { PlaybackSettings, TimelineDataProvider } from \"./interfaces\";\r\n\r\n/** Base Timeline Data Provider\r\n * @alpha\r\n */\r\nexport class BaseTimelineDataProvider implements TimelineDataProvider {\r\n  public readonly id = \"TestTimelineDataProvider\";\r\n  public start: Date | undefined;\r\n  public end: Date | undefined;\r\n  public viewId = \"\";\r\n\r\n  public supportsTimelineAnimation = false; // set to true when provider determines animation data is available.\r\n  public animationFraction: number = 0; // value from 0.0 to 1.0 that specifies the percentage complete for the animation.\r\n  protected _viewport: ScreenViewport | undefined;\r\n\r\n  constructor(viewport?: ScreenViewport) {\r\n    this._viewport = viewport;\r\n    // istanbul ignore if - WIP\r\n    if (viewport)\r\n      this.viewId = viewport.view.id;\r\n  }\r\n\r\n  protected _settings: PlaybackSettings = {\r\n    duration: 20 * 1000,\r\n    loop: true,\r\n  };\r\n\r\n  // istanbul ignore next\r\n  public async loadTimelineData(): Promise<boolean> {\r\n    return false;\r\n  }\r\n\r\n  /** Called to get the initial scrubber location */\r\n  public get initialDuration(): number {\r\n    return this.duration * this.animationFraction;\r\n  }\r\n\r\n  /** Called to get playback duration  */\r\n  public get duration(): number {\r\n    return (this.getSettings().duration) ? this.getSettings().duration! : /* istanbul ignore next */ 20000;\r\n  }\r\n\r\n  // istanbul ignore next - WIP\r\n  public set viewport(viewport: ScreenViewport | undefined) {\r\n    this._viewport = viewport;\r\n    if (viewport)\r\n      this.viewId = viewport.view.id;\r\n    else\r\n      this.viewId = \"\";\r\n  }\r\n\r\n  // istanbul ignore next - WIP\r\n  public get viewport(): ScreenViewport | undefined {\r\n    return this._viewport;\r\n  }\r\n\r\n  public get loop(): boolean {\r\n    return (undefined === this.getSettings().loop) ? /* istanbul ignore next */ false : this.getSettings().loop!;\r\n  }\r\n\r\n  public getSettings(): PlaybackSettings {\r\n    return this._settings;\r\n  }\r\n\r\n  public updateSettings(settings: PlaybackSettings) {\r\n    this._settings = { ...this._settings, ...settings };\r\n  }\r\n\r\n  // istanbul ignore next\r\n  public onPlaybackSettingChanged = (_settings: PlaybackSettings) => {\r\n  };\r\n\r\n  // istanbul ignore next\r\n  public onAnimationFractionChanged = (_animationFraction: number) => {\r\n  };\r\n}\r\n"]}

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

@@ -1,28 +1,28 @@
-import "./InlineEdit.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-interface InlineEditProps extends CommonProps {
-    defaultValue: string;
-    onChange?: (value: string) => void;
-}
-interface InlineEditState {
-    value: string;
-    originalValue: string;
-}
-/** Duration Inline Editor
- * @internal
- */
-export declare class InlineEdit extends React.Component<InlineEditProps, InlineEditState> {
-    private _inputRef;
-    constructor(props: InlineEditProps);
-    /** @internal */
-    componentDidUpdate(prevProps: InlineEditProps, _prevState: InlineEditState): void;
-    private _onBlur;
-    private _onFocus;
-    private _onKeyDown;
-    private _onChange;
-    private _sendChange;
-    render(): JSX.Element;
-}
-export {};
+import "./InlineEdit.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+interface InlineEditProps extends CommonProps {
+    defaultValue: string;
+    onChange?: (value: string) => void;
+}
+interface InlineEditState {
+    value: string;
+    originalValue: string;
+}
+/** Duration Inline Editor
+ * @internal
+ */
+export declare class InlineEdit extends React.Component<InlineEditProps, InlineEditState> {
+    private _inputRef;
+    constructor(props: InlineEditProps);
+    /** @internal */
+    componentDidUpdate(prevProps: InlineEditProps, _prevState: InlineEditState): void;
+    private _onBlur;
+    private _onFocus;
+    private _onKeyDown;
+    private _onChange;
+    private _sendChange;
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=InlineEdit.d.ts.map

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

@@ -1,56 +1,56 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-import "./InlineEdit.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { SpecialKey } from "@itwin/appui-abstract";
-import { Input } from "@itwin/itwinui-react";
-/** Duration Inline Editor
- * @internal
- */
-export class InlineEdit extends React.Component {
-    constructor(props) {
-        super(props);
-        this._inputRef = React.createRef();
-        // istanbul ignore next
-        this._onBlur = (event) => {
-            this._sendChange(event.target.value);
-        };
-        this._onFocus = (event) => {
-            event.target.select();
-        };
-        this._onKeyDown = (event) => {
-            switch (event.key) {
-                case SpecialKey.Escape:
-                    this.setState((prevState) => ({ value: prevState.originalValue }), () => this._inputRef.current.select());
-                    break;
-                case SpecialKey.Enter:
-                    this._sendChange(this.state.value);
-                    break;
-            }
-        };
-        this._onChange = (event) => {
-            this.setState({ value: event.target.value });
-        };
-        this.state = { value: this.props.defaultValue, originalValue: this.props.defaultValue };
-    }
-    /** @internal */
-    componentDidUpdate(prevProps, _prevState) {
-        if (prevProps.defaultValue !== this.props.defaultValue) {
-            this.setState((_, props) => {
-                return { value: props.defaultValue, originalValue: props.defaultValue };
-            });
-        }
-    }
-    _sendChange(value) {
-        // istanbul ignore else
-        if (this.props.onChange)
-            this.props.onChange(value);
-    }
-    render() {
-        return (React.createElement(Input, { "data-testid": "timeline-duration-edit-input", className: classnames("inline-edit-input", this.props.className), style: this.props.style, ref: this._inputRef, type: "text", value: this.state.value, size: "small", onFocus: this._onFocus, onBlur: this._onBlur, onKeyDown: this._onKeyDown, onChange: this._onChange }));
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import "./InlineEdit.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { SpecialKey } from "@itwin/appui-abstract";
+import { Input } from "@itwin/itwinui-react";
+/** Duration Inline Editor
+ * @internal
+ */
+export class InlineEdit extends React.Component {
+    constructor(props) {
+        super(props);
+        this._inputRef = React.createRef();
+        // istanbul ignore next
+        this._onBlur = (event) => {
+            this._sendChange(event.target.value);
+        };
+        this._onFocus = (event) => {
+            event.target.select();
+        };
+        this._onKeyDown = (event) => {
+            switch (event.key) {
+                case SpecialKey.Escape:
+                    this.setState((prevState) => ({ value: prevState.originalValue }), () => this._inputRef.current.select());
+                    break;
+                case SpecialKey.Enter:
+                    this._sendChange(this.state.value);
+                    break;
+            }
+        };
+        this._onChange = (event) => {
+            this.setState({ value: event.target.value });
+        };
+        this.state = { value: this.props.defaultValue, originalValue: this.props.defaultValue };
+    }
+    /** @internal */
+    componentDidUpdate(prevProps, _prevState) {
+        if (prevProps.defaultValue !== this.props.defaultValue) {
+            this.setState((_, props) => {
+                return { value: props.defaultValue, originalValue: props.defaultValue };
+            });
+        }
+    }
+    _sendChange(value) {
+        // istanbul ignore else
+        if (this.props.onChange)
+            this.props.onChange(value);
+    }
+    render() {
+        return (React.createElement(Input, { "data-testid": "timeline-duration-edit-input", className: classnames("inline-edit-input", this.props.className), style: this.props.style, ref: this._inputRef, type: "text", value: this.state.value, size: "small", onFocus: this._onFocus, onBlur: this._onBlur, onKeyDown: this._onKeyDown, onChange: this._onChange }));
+    }
+}
 //# sourceMappingURL=InlineEdit.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InlineEdit.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/InlineEdit.tsx"],"names":[],"mappings":"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","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*--------------------------------------------------------------------------------------------*/\nimport \"./InlineEdit.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { Input } from \"@itwin/itwinui-react\";\n\ninterface InlineEditProps extends CommonProps {\n  defaultValue: string;\n  onChange?: (value: string) => void;\n}\n\ninterface InlineEditState {\n  value: string;\n  originalValue: string;\n}\n\n/** Duration Inline Editor\n * @internal\n */\nexport class InlineEdit extends React.Component<InlineEditProps, InlineEditState> {\n  private _inputRef = React.createRef<HTMLInputElement>();\n\n  constructor(props: InlineEditProps) {\n    super(props);\n\n    this.state = { value: this.props.defaultValue, originalValue: this.props.defaultValue };\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: InlineEditProps, _prevState: InlineEditState) { // eslint-disable-line @typescript-eslint/naming-convention\n    if (prevProps.defaultValue !== this.props.defaultValue) {\n      this.setState((_, props) => {\n        return { value: props.defaultValue, originalValue: props.defaultValue };\n      });\n    }\n  }\n\n  // istanbul ignore next\n  private _onBlur = (event: React.ChangeEvent<HTMLInputElement>) => {\n    this._sendChange(event.target.value);\n  };\n\n  private _onFocus = (event: React.ChangeEvent<HTMLInputElement>) => {\n    event.target.select();\n  };\n\n  private _onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (event.key) {\n      case SpecialKey.Escape:\n        this.setState(\n          (prevState) => ({ value: prevState.originalValue }),\n          () => this._inputRef.current!.select());\n        break;\n      case SpecialKey.Enter:\n        this._sendChange(this.state.value);\n        break;\n    }\n  };\n\n  private _onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    this.setState({ value: event.target.value });\n  };\n\n  private _sendChange(value: string) {\n    // istanbul ignore else\n    if (this.props.onChange)\n      this.props.onChange(value);\n  }\n\n  public override render() {\n    return (\n      <Input\n        data-testid=\"timeline-duration-edit-input\"\n        className={classnames(\"inline-edit-input\", this.props.className)}\n        style={this.props.style}\n        ref={this._inputRef}\n        type=\"text\"\n        value={this.state.value}\n        size=\"small\"\n        onFocus={this._onFocus}\n        onBlur={this._onBlur}\n        onKeyDown={this._onKeyDown}\n        onChange={this._onChange} />\n    );\n  }\n}\n"]}
+{"version":3,"file":"InlineEdit.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/InlineEdit.tsx"],"names":[],"mappings":"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","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\nimport \"./InlineEdit.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { Input } from \"@itwin/itwinui-react\";\r\n\r\ninterface InlineEditProps extends CommonProps {\r\n  defaultValue: string;\r\n  onChange?: (value: string) => void;\r\n}\r\n\r\ninterface InlineEditState {\r\n  value: string;\r\n  originalValue: string;\r\n}\r\n\r\n/** Duration Inline Editor\r\n * @internal\r\n */\r\nexport class InlineEdit extends React.Component<InlineEditProps, InlineEditState> {\r\n  private _inputRef = React.createRef<HTMLInputElement>();\r\n\r\n  constructor(props: InlineEditProps) {\r\n    super(props);\r\n\r\n    this.state = { value: this.props.defaultValue, originalValue: this.props.defaultValue };\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: InlineEditProps, _prevState: InlineEditState) { // eslint-disable-line @typescript-eslint/naming-convention\r\n    if (prevProps.defaultValue !== this.props.defaultValue) {\r\n      this.setState((_, props) => {\r\n        return { value: props.defaultValue, originalValue: props.defaultValue };\r\n      });\r\n    }\r\n  }\r\n\r\n  // istanbul ignore next\r\n  private _onBlur = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    this._sendChange(event.target.value);\r\n  };\r\n\r\n  private _onFocus = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    event.target.select();\r\n  };\r\n\r\n  private _onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n    switch (event.key) {\r\n      case SpecialKey.Escape:\r\n        this.setState(\r\n          (prevState) => ({ value: prevState.originalValue }),\r\n          () => this._inputRef.current!.select());\r\n        break;\r\n      case SpecialKey.Enter:\r\n        this._sendChange(this.state.value);\r\n        break;\r\n    }\r\n  };\r\n\r\n  private _onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    this.setState({ value: event.target.value });\r\n  };\r\n\r\n  private _sendChange(value: string) {\r\n    // istanbul ignore else\r\n    if (this.props.onChange)\r\n      this.props.onChange(value);\r\n  }\r\n\r\n  public override render() {\r\n    return (\r\n      <Input\r\n        data-testid=\"timeline-duration-edit-input\"\r\n        className={classnames(\"inline-edit-input\", this.props.className)}\r\n        style={this.props.style}\r\n        ref={this._inputRef}\r\n        type=\"text\"\r\n        value={this.state.value}\r\n        size=\"small\"\r\n        onFocus={this._onFocus}\r\n        onBlur={this._onBlur}\r\n        onKeyDown={this._onKeyDown}\r\n        onChange={this._onChange} />\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -1,27 +1,27 @@
-/*---------------------------------------------------------------------------------------------
-* 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";
-
-.inline-edit-input {
-  color: $buic-foreground-body;
-  background: inherit;
-  border: 1px solid transparent;
-  box-sizing: border-box;
-
-  &.iui-input {
-    padding: 0px;
-  }
-
-  &:hover {
-    border: 1px solid $buic-background-5;
-  }
-
-  &:focus {
-    background: $buic-background-1;
-    border: 1px solid $buic-background-5;
-    outline: none;
-    color: $buic-foreground-activehover;
-  }
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+.inline-edit-input {
+  color: var(--iui-color-text);
+  background: inherit;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+
+  &.iui-input {
+    padding: 0px;
+  }
+
+  &:hover {
+    border: 1px solid $buic-background-5;
+  }
+
+  &:focus {
+    background: $buic-background-1;
+    border: 1px solid $buic-background-5;
+    outline: none;
+    color: var(--iui-color-text-hover);
+  }
 }

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

@@ -1,34 +1,34 @@
-import "./PlayerButton.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-/** Player button used by buttons on timeline control
- * @internal
- */
-export declare class PlayerButton extends React.PureComponent<any> {
-    private _onClick;
-    render(): JSX.Element;
-}
-/** Properties for Play/Pause button used on timeline control
- * @internal
- */
-export interface PlayerButtonProps extends CommonProps {
-    isPlaying: boolean;
-    onPlay?: () => void;
-    onPause?: () => void;
-    tooltip?: string;
-}
-interface PlayButtonState {
-    isPlaying: boolean;
-}
-/** Play/Pause button used on timeline control
- * @internal
- */
-export declare class PlayButton extends React.Component<PlayerButtonProps, PlayButtonState> {
-    constructor(props: PlayerButtonProps, context?: any);
-    /** @internal */
-    componentDidUpdate(): void;
-    private _onClick;
-    render(): JSX.Element;
-}
-export {};
+import "./PlayerButton.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+/** Player button used by buttons on timeline control
+ * @internal
+ */
+export declare class PlayerButton extends React.PureComponent<any> {
+    private _onClick;
+    render(): JSX.Element;
+}
+/** Properties for Play/Pause button used on timeline control
+ * @internal
+ */
+export interface PlayerButtonProps extends CommonProps {
+    isPlaying: boolean;
+    onPlay?: () => void;
+    onPause?: () => void;
+    tooltip?: string;
+}
+interface PlayButtonState {
+    isPlaying: boolean;
+}
+/** Play/Pause button used on timeline control
+ * @internal
+ */
+export declare class PlayButton extends React.Component<PlayerButtonProps, PlayButtonState> {
+    constructor(props: PlayerButtonProps, context?: any);
+    /** @internal */
+    componentDidUpdate(): void;
+    private _onClick;
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=PlayerButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlayerButton.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/PlayerButton.tsx"],"names":[],"mappings":"AAIA,OAAO,qBAAqB,CAAC;AAE7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD;;GAEG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC;IACxD,OAAO,CAAC,QAAQ,CAId;IAEc,MAAM;CAQvB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,eAAe;IACvB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,EAAE,eAAe,CAAC;gBAErE,KAAK,EAAE,iBAAiB,EAAE,OAAO,CAAC,EAAE,GAAG;IAMnD,gBAAgB;IACA,kBAAkB;IAMlC,OAAO,CAAC,QAAQ,CAcd;IAEc,MAAM;CAcvB"}
+{"version":3,"file":"PlayerButton.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/PlayerButton.tsx"],"names":[],"mappings":"AAIA,OAAO,qBAAqB,CAAC;AAE7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAQ,MAAM,mBAAmB,CAAC;AAItD;;GAEG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC;IACxD,OAAO,CAAC,QAAQ,CAId;IAEc,MAAM;CAQvB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,eAAe;IACvB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,EAAE,eAAe,CAAC;gBAErE,KAAK,EAAE,iBAAiB,EAAE,OAAO,CAAC,EAAE,GAAG;IAMnD,gBAAgB;IACA,kBAAkB;IAMlC,OAAO,CAAC,QAAQ,CAcd;IAEc,MAAM;CAcvB"}

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

@@ -1,65 +1,69 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-import "./PlayerButton.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { UiIModelComponents } from "../UiIModelComponents";
-/** Player button used by buttons on timeline control
- * @internal
- */
-export class PlayerButton extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._onClick = () => {
-            // istanbul ignore else
-            if (this.props.onClick)
-                this.props.onClick();
-        };
-    }
-    render() {
-        const { icon, title } = this.props;
-        return (React.createElement("button", { "data-testid": this.props.className, className: classnames("player-button", this.props.className), onClick: this._onClick, title: title },
-            React.createElement("span", { className: classnames("icon", !!icon) })));
-    }
-}
-/** Play/Pause button used on timeline control
- * @internal
- */
-export class PlayButton extends React.Component {
-    constructor(props, context) {
-        super(props, context);
-        this._onClick = () => {
-            const _isPlaying = !this.state.isPlaying;
-            this.setState({ isPlaying: _isPlaying });
-            if (_isPlaying) {
-                // istanbul ignore else
-                if (this.props.onPlay)
-                    this.props.onPlay();
-            }
-            else {
-                // istanbul ignore else
-                if (this.props.onPause)
-                    this.props.onPause();
-            }
-        };
-        this.state = { isPlaying: this.props.isPlaying };
-    }
-    /** @internal */
-    componentDidUpdate() {
-        if (this.props.isPlaying !== this.state.isPlaying) {
-            this.setState((_, props) => ({ isPlaying: props.isPlaying }));
-        }
-    }
-    render() {
-        const { tooltip } = this.props;
-        const iconClassName = this.state.isPlaying ? "icon icon-media-controls-pause" : "icon icon-media-controls-play";
-        let title = tooltip;
-        if (!title)
-            title = UiIModelComponents.translate(this.state.isPlaying ? "timeline.pause" : "timeline.play");
-        return (React.createElement("button", { "data-testid": this.props.className, title: title, className: classnames("player-button", this.props.className), onClick: this._onClick },
-            React.createElement("span", { className: iconClassName })));
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import "./PlayerButton.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Icon } from "@itwin/core-react";
+import { UiIModelComponents } from "../UiIModelComponents";
+import { SvgPause, SvgPlay } from "@itwin/itwinui-icons-react";
+/** Player button used by buttons on timeline control
+ * @internal
+ */
+export class PlayerButton extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._onClick = () => {
+            // istanbul ignore else
+            if (this.props.onClick)
+                this.props.onClick();
+        };
+    }
+    render() {
+        const { icon, title } = this.props;
+        return (React.createElement("button", { "data-testid": this.props.className, className: classnames("player-button", this.props.className), onClick: this._onClick, title: title },
+            React.createElement("span", { className: "icon" },
+                React.createElement(Icon, { iconSpec: icon }))));
+    }
+}
+/** Play/Pause button used on timeline control
+ * @internal
+ */
+export class PlayButton extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+        this._onClick = () => {
+            const _isPlaying = !this.state.isPlaying;
+            this.setState({ isPlaying: _isPlaying });
+            if (_isPlaying) {
+                // istanbul ignore else
+                if (this.props.onPlay)
+                    this.props.onPlay();
+            }
+            else {
+                // istanbul ignore else
+                if (this.props.onPause)
+                    this.props.onPause();
+            }
+        };
+        this.state = { isPlaying: this.props.isPlaying };
+    }
+    /** @internal */
+    componentDidUpdate() {
+        if (this.props.isPlaying !== this.state.isPlaying) {
+            this.setState((_, props) => ({ isPlaying: props.isPlaying }));
+        }
+    }
+    render() {
+        const { tooltip } = this.props;
+        const iconSpec = this.state.isPlaying ? React.createElement(SvgPause, null) : React.createElement(SvgPlay, null);
+        let title = tooltip;
+        if (!title)
+            title = UiIModelComponents.translate(this.state.isPlaying ? "timeline.pause" : "timeline.play");
+        return (React.createElement("button", { "data-testid": this.props.className, title: title, className: classnames("player-button", this.props.className), onClick: this._onClick },
+            React.createElement("span", { className: "icon", "data-testid": this.state.isPlaying ? "pause" : "play" },
+                React.createElement(Icon, { iconSpec: iconSpec, "data-testid": this.state.isPlaying ? "pause" : "play" }))));
+    }
+}
 //# sourceMappingURL=PlayerButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlayerButton.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/PlayerButton.tsx"],"names":[],"mappings":"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","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*--------------------------------------------------------------------------------------------*/\nimport \"./PlayerButton.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\n/** Player button used by buttons on timeline control\n * @internal\n */\nexport class PlayerButton extends React.PureComponent<any> {\n  private _onClick = () => {\n    // istanbul ignore else\n    if (this.props.onClick)\n      this.props.onClick();\n  };\n\n  public override render() {\n    const { icon, title } = this.props;\n    return (\n      <button data-testid={this.props.className} className={classnames(\"player-button\", this.props.className)} onClick={this._onClick} title={title}>\n        <span className={classnames(\"icon\", !!icon)}></span>\n      </button>\n    );\n  }\n}\n\n/** Properties for Play/Pause button used on timeline control\n * @internal\n */\nexport interface PlayerButtonProps extends CommonProps {\n  isPlaying: boolean;\n  onPlay?: () => void;\n  onPause?: () => void;\n  tooltip?: string;\n}\n\ninterface PlayButtonState {\n  isPlaying: boolean;\n}\n\n/** Play/Pause button used on timeline control\n * @internal\n */\nexport class PlayButton extends React.Component<PlayerButtonProps, PlayButtonState> {\n\n  constructor(props: PlayerButtonProps, context?: any) {\n    super(props, context);\n\n    this.state = { isPlaying: this.props.isPlaying };\n  }\n\n  /** @internal */\n  public override componentDidUpdate() {\n    if (this.props.isPlaying !== this.state.isPlaying) {\n      this.setState((_, props) => ({ isPlaying: props.isPlaying }));\n    }\n  }\n\n  private _onClick = () => {\n    const _isPlaying = !this.state.isPlaying;\n\n    this.setState({ isPlaying: _isPlaying });\n\n    if (_isPlaying) {\n      // istanbul ignore else\n      if (this.props.onPlay)\n        this.props.onPlay();\n    } else {\n      // istanbul ignore else\n      if (this.props.onPause)\n        this.props.onPause();\n    }\n  };\n\n  public override render() {\n    const { tooltip } = this.props;\n    const iconClassName = this.state.isPlaying ? \"icon icon-media-controls-pause\" : \"icon icon-media-controls-play\";\n    let title = tooltip;\n\n    if (!title)\n      title = UiIModelComponents.translate(this.state.isPlaying ? \"timeline.pause\" : \"timeline.play\");\n\n    return (\n      <button data-testid={this.props.className} title={title} className={classnames(\"player-button\", this.props.className)} onClick={this._onClick}>\n        <span className={iconClassName}></span>\n      </button>\n    );\n  }\n}\n"]}
+{"version":3,"file":"PlayerButton.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/PlayerButton.tsx"],"names":[],"mappings":"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","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\nimport \"./PlayerButton.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps, Icon } from \"@itwin/core-react\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\nimport { SvgPause, SvgPlay } from \"@itwin/itwinui-icons-react\";\r\n\r\n/** Player button used by buttons on timeline control\r\n * @internal\r\n */\r\nexport class PlayerButton extends React.PureComponent<any> {\r\n  private _onClick = () => {\r\n    // istanbul ignore else\r\n    if (this.props.onClick)\r\n      this.props.onClick();\r\n  };\r\n\r\n  public override render() {\r\n    const { icon, title } = this.props;\r\n    return (\r\n      <button data-testid={this.props.className} className={classnames(\"player-button\", this.props.className)} onClick={this._onClick} title={title}>\r\n        <span className=\"icon\"><Icon iconSpec={icon} /></span>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n\r\n/** Properties for Play/Pause button used on timeline control\r\n * @internal\r\n */\r\nexport interface PlayerButtonProps extends CommonProps {\r\n  isPlaying: boolean;\r\n  onPlay?: () => void;\r\n  onPause?: () => void;\r\n  tooltip?: string;\r\n}\r\n\r\ninterface PlayButtonState {\r\n  isPlaying: boolean;\r\n}\r\n\r\n/** Play/Pause button used on timeline control\r\n * @internal\r\n */\r\nexport class PlayButton extends React.Component<PlayerButtonProps, PlayButtonState> {\r\n\r\n  constructor(props: PlayerButtonProps, context?: any) {\r\n    super(props, context);\r\n\r\n    this.state = { isPlaying: this.props.isPlaying };\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate() {\r\n    if (this.props.isPlaying !== this.state.isPlaying) {\r\n      this.setState((_, props) => ({ isPlaying: props.isPlaying }));\r\n    }\r\n  }\r\n\r\n  private _onClick = () => {\r\n    const _isPlaying = !this.state.isPlaying;\r\n\r\n    this.setState({ isPlaying: _isPlaying });\r\n\r\n    if (_isPlaying) {\r\n      // istanbul ignore else\r\n      if (this.props.onPlay)\r\n        this.props.onPlay();\r\n    } else {\r\n      // istanbul ignore else\r\n      if (this.props.onPause)\r\n        this.props.onPause();\r\n    }\r\n  };\r\n\r\n  public override render() {\r\n    const { tooltip } = this.props;\r\n    const iconSpec = this.state.isPlaying ? <SvgPause /> : <SvgPlay />;\r\n    let title = tooltip;\r\n\r\n    if (!title)\r\n      title = UiIModelComponents.translate(this.state.isPlaying ? \"timeline.pause\" : \"timeline.play\");\r\n\r\n    return (\r\n      <button data-testid={this.props.className} title={title} className={classnames(\"player-button\", this.props.className)} onClick={this._onClick}>\r\n        <span className=\"icon\" data-testid={this.state.isPlaying ? \"pause\" : \"play\"} ><Icon iconSpec={iconSpec} data-testid={this.state.isPlaying ? \"pause\" : \"play\"} /></span>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -1,31 +1,28 @@
-/*---------------------------------------------------------------------------------------------
-* 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";
-
-.player-button {
-  width: 38px;
-  height: 38px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  outline: none;
-  border-radius: var(--iui-border-radius-1);
-  border: solid 1px $buic-background-5;
-  // background-image: linear-gradient(to bottom, $buic-background-1, $buic-background-2);
-  background-image: linear-gradient(
-      to bottom,
-      $buic-background-3,
-      $buic-background-3
-    ),
-    linear-gradient(to bottom, $buic-background-1, $buic-background-1);
-  color: $buic-foreground-body;
-
-  cursor: pointer;
-
-  &:hover {
-    color: $buic-foreground-activehover;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.player-button {
+  width: 38px;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  outline: none;
+  border-radius: var(--iui-border-radius-1);
+  border: solid 1px var(--iui-color-border-foreground);
+  background-color: var(--iui-color-background);
+  color: var(--iui-color-icon);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--iui-color-icon-hover);
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--iui-color-border-accent);
+    outline-offset: -1px;
+  }
+}