@itwin/imodel-components-react 4.10.0-dev.1 → 4.10.0

package/lib/cjs/imodel-components-react/timeline/TimelineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineComponent.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/TimelineComponent.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 *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Timeline\n */\nimport type { GenericUiEventArgs } from \"@itwin/appui-abstract\";\nimport { UiAdmin } from \"@itwin/appui-abstract\";\nimport type { DateFormatOptions } from \"@itwin/components-react\";\nimport {\n  toDateString,\n  toTimeString,\n  UiComponents,\n} from \"@itwin/components-react\";\nimport { Icon } from \"@itwin/core-react\";\nimport {\n  SvgCaretLeft,\n  SvgCaretRight,\n  SvgCheckmark,\n  SvgMoreVertical,\n  SvgPlayCircular,\n} from \"@itwin/itwinui-icons-react\";\nimport { DropdownMenu, MenuDivider, MenuItem } from \"@itwin/itwinui-react\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\n\nimport { UiIModelComponents } from \"../UiIModelComponents\";\nimport { InlineEdit } from \"./InlineEdit\";\nimport type { PlaybackSettings, TimelinePausePlayArgs } from \"./interfaces\";\nimport { TimelinePausePlayAction } from \"./interfaces\";\nimport { PlayButton, PlayerButton } from \"./PlayerButton\";\nimport { Scrubber } from \"./Scrubber\";\n\nimport \"./TimelineComponent.scss\";\n\n// cspell:ignore millisec\n\nconst slowSpeed = 60 * 1000;\nconst mediumSpeed = 20 * 1000;\nconst fastSpeed = 10 * 1000;\n/**\n * [[TimelineMenuItemOption]]: specifies how the app wants the timeline speeds to be installed on the TimelineComponent's ContextMenu\n * \"replace\" : use the app-supplied items in place of the standard items\n * \"append\" : add the app-supplied items following the standard items\n * \"prefix\" : add the app-supplied items before the standard items\n *\n * @public\n */\nexport type TimelineMenuItemOption = \"replace\" | \"append\" | \"prefix\";\n/**\n * [[TimelineMenuItemProps]] specifies playback speed entries in the Timeline's ContextMenu\n * @public\n */\nexport interface TimelineMenuItemProps {\n  /** localized label for menu item */\n  label: string;\n\n  /** duration for the entire timeline to play */\n  timelineDuration: number;\n}\n/** TimelineDateMarkerProps: Mark a date on the timeline with an indicator\n * @public\n */\nexport interface TimelineDateMarkerProps {\n  /** Date to mark. If undefined, today's date will be used. */\n  date?: Date;\n  /** ReactNode to use as the marker on the timeline. If undefined, a short vertical bar will mark the date. */\n  dateMarker?: React.ReactNode;\n}\n/**\n *  [[TimelineComponentProps]] configure the timeline\n * @public\n */\nexport interface TimelineComponentProps {\n  /** Start date: beginning of the date range of a date-based timeline. */\n  startDate?: Date;\n  /** End date: end of the date range of a date-based timeline. */\n  endDate?: Date;\n  /** Total duration: range of the timeline in milliseconds. */\n  totalDuration: number;\n  /** Initial value for the current duration (the location of the thumb) in milliseconds */\n  initialDuration?: number;\n  /** Show in minimized mode (For future use. This prop will always be treated as true.) */\n  minimized?: boolean;\n  /** When playing, repeat indefinitely */\n  repeat?: boolean;\n  /** Show duration instead of time */\n  showDuration?: boolean;\n  /** Callback with current duration value (as a fraction) */\n  onChange?: (duration: number) => void;\n  /** Callback triggered when play/pause button is pressed */\n  onPlayPause?: (playing: boolean) => void;\n  /** Callback triggered when backward/forward buttons are pressed */\n  onJump?: (forward: boolean) => void;\n  /** Callback triggered when a setting is changed */\n  onSettingsChange?: (arg: PlaybackSettings) => void;\n  /** Always display in miniMode with no expand menu (For future use. This prop will always be treated as true) */\n  alwaysMinimized?: boolean;\n  /** ComponentId -- must be set to use TimelineComponentEvents */\n  componentId?: string;\n  /** Include the repeat option on the Timeline Context Menu */\n  includeRepeat?: boolean;\n  /** App-supplied speed entries in the Timeline Context Menu */\n  appMenuItems?: TimelineMenuItemProps[];\n  /** How to include the supplied app menu items in the Timeline Context Menu (prefix, append, replace)*/\n  appMenuItemOption?: TimelineMenuItemOption;\n  /** Display date and time offset by the number of minutes specified. When undefined - local timezone will be used */\n  timeZoneOffset?: number;\n  /** Display a marker on the timeline rail to indicate current date - will only work if starDate and endDate are defined */\n  markDate?: TimelineDateMarkerProps;\n  /** Options used to format date string. If not defined it will user browser default locale settings. */\n  dateFormatOptions?: DateFormatOptions;\n  /** Options used to format time string. If not defined it will user browser default locale settings. */\n  timeFormatOptions?: DateFormatOptions;\n}\n/** @internal */\ninterface TimelineComponentState {\n  /**  True if timeline is currently playing, false if paused */\n  isPlaying: boolean;\n  /** Minimized mode (For future use. This will always be true) */\n  minimized?: boolean;\n  /** Current duration in milliseconds */\n  currentDuration: number;\n  /** Total duration in milliseconds */\n  totalDuration: number;\n  /** If true, automatically restart when the timeline is finished playing */\n  repeat: boolean;\n  /** If true, include the repeat option in the timeline context menu */\n  includeRepeat: boolean;\n}\n\n/**\n * [[TimelineComponent]] is used to playback timeline data\n * @public\n */\nexport class TimelineComponent extends React.Component<\n  TimelineComponentProps,\n  TimelineComponentState\n> {\n  private _timeLastCycle = 0;\n  private _requestFrame = 0;\n  private _unmounted = false;\n  private _repeatLabel: string;\n  private _removeListener?: () => void;\n  private _standardTimelineMenuItems: TimelineMenuItemProps[] = [\n    {\n      label: UiIModelComponents.translate(\"timeline.slow\"),\n      timelineDuration: slowSpeed,\n    },\n    {\n      label: UiIModelComponents.translate(\"timeline.medium\"),\n      timelineDuration: mediumSpeed,\n    },\n    {\n      label: UiIModelComponents.translate(\"timeline.fast\"),\n      timelineDuration: fastSpeed,\n    },\n  ];\n\n  constructor(props: TimelineComponentProps) {\n    super(props);\n\n    this.state = {\n      isPlaying: false,\n      minimized: true,\n      currentDuration: props.initialDuration\n        ? props.initialDuration\n        : /* istanbul ignore next */ 0,\n      totalDuration: this.props.totalDuration,\n      repeat: this.props.repeat ? true : false,\n      includeRepeat:\n        this.props.includeRepeat || this.props.includeRepeat === undefined\n          ? true\n          : false,\n    };\n\n    this._repeatLabel = UiIModelComponents.translate(\"timeline.repeat\");\n    // istanbul ignore else\n    if (this.props.componentId) {\n      // can't handle an event if we have no id\n      this._removeListener = UiAdmin.onGenericUiEvent.addListener(\n        this._handleTimelinePausePlayEvent\n      );\n    }\n  }\n\n  public override componentWillUnmount() {\n    if (this._removeListener) this._removeListener();\n    window.cancelAnimationFrame(this._requestFrame);\n    this._unmounted = true;\n  }\n\n  public override shouldComponentUpdate(\n    nextProps: TimelineComponentProps,\n    nextState: TimelineComponentState\n  ) {\n    let result = false;\n\n    // istanbul ignore next\n    if (\n      nextState !== this.state ||\n      nextProps !== this.props ||\n      nextProps.startDate !== this.props.startDate ||\n      nextProps.endDate !== this.props.endDate ||\n      nextProps.initialDuration !== this.props.initialDuration ||\n      nextProps.repeat !== this.props.repeat\n    )\n      result = true;\n\n    return result;\n  }\n\n  public override componentDidUpdate(prevProps: TimelineComponentProps) {\n    // istanbul ignore else\n    if (this.props.initialDuration !== prevProps.initialDuration) {\n      this._setDuration(\n        this.props.initialDuration\n          ? this.props.initialDuration\n          : /* istanbul ignore next */ 0,\n        this.props.totalDuration !== prevProps.totalDuration\n          ? this.props.totalDuration\n          : undefined\n      );\n    }\n\n    // istanbul ignore else\n    if (this.props.repeat !== prevProps.repeat) {\n      this._changeRepeatSetting(this.props.repeat);\n    }\n\n    // istanbul ignore else\n    if (this.props.totalDuration !== prevProps.totalDuration) {\n      this._onSetTotalDuration(this.props.totalDuration);\n    }\n  }\n  private _handleTimelinePausePlayEvent = (args: GenericUiEventArgs): void => {\n    const timelineArgs = args as TimelinePausePlayArgs;\n    // istanbul ignore else\n    if (\n      !timelineArgs ||\n      this.props.componentId !== timelineArgs.uiComponentId ||\n      timelineArgs.timelineAction === undefined\n    )\n      return;\n\n    let startPlaying: boolean;\n    switch (timelineArgs.timelineAction) {\n      case TimelinePausePlayAction.Play:\n        startPlaying = true;\n        break;\n      case TimelinePausePlayAction.Pause:\n        startPlaying = false;\n        break;\n      case TimelinePausePlayAction.Toggle:\n        startPlaying = !this.state.isPlaying;\n        break;\n      // istanbul ignore next\n      default:\n        return; // throw error?\n    }\n    if (startPlaying) this._onPlay();\n    else this._onPause();\n  };\n\n  // user clicked backward button\n  private _onBackward = () => {\n    // istanbul ignore else\n    if (this.props.onJump) this.props.onJump(false);\n  };\n\n  // user clicked forward button\n  private _onForward = () => {\n    // istanbul ignore else\n    if (this.props.onJump) this.props.onJump(true);\n  };\n\n  // user clicked play button\n  private _onPlay = () => {\n    // istanbul ignore if\n    if (this.state.isPlaying) return;\n\n    // timeline was complete, restart from the beginning\n    if (this.state.currentDuration >= this.state.totalDuration) {\n      this._replay();\n    } else this._play();\n\n    // istanbul ignore else\n    if (this.props.onPlayPause) this.props.onPlayPause(true);\n  };\n\n  // user clicked pause button\n  private _onPause = () => {\n    // istanbul ignore if\n    if (!this.state.isPlaying) return;\n\n    // stop requesting frames\n    window.cancelAnimationFrame(this._requestFrame);\n\n    // stop playing\n    this.setState({ isPlaying: false });\n\n    // istanbul ignore else\n    if (this.props.onPlayPause) this.props.onPlayPause(false);\n  };\n\n  // user clicked on timeline rail or dragged scrubber handle\n  private _onTimelineChange = (values: ReadonlyArray<number>) => {\n    const currentDuration = values[0];\n    this._setDuration(currentDuration);\n  };\n\n  // set the current duration, which will call the OnChange callback\n  private _setDuration = (currentDuration: number, updatedTotal?: number) => {\n    const actualDuration = Math.min(\n      updatedTotal ?? this.state.totalDuration,\n      Math.max(currentDuration, 0)\n    );\n\n    this._timeLastCycle = new Date().getTime();\n    // istanbul ignore else\n    if (!this._unmounted) this.setState({ currentDuration: actualDuration });\n    // istanbul ignore else\n    if (this.props.onChange) {\n      const fraction =\n        actualDuration / (updatedTotal ?? this.state.totalDuration);\n      this.props.onChange(fraction);\n    }\n  };\n\n  // recursively update the animation until we hit the end or the pause button is clicked\n  private _updateAnimation = (_timestamp: number) => {\n    // istanbul ignore else\n    if (!this.state.isPlaying && !this._unmounted) {\n      return;\n    }\n\n    // update duration\n    const currentTime = new Date().getTime();\n    const millisecondsElapsed = currentTime - this._timeLastCycle;\n    const duration = this.state.currentDuration + millisecondsElapsed;\n    this._setDuration(duration);\n\n    // stop the animation!\n    if (duration >= this.state.totalDuration) {\n      window.cancelAnimationFrame(this._requestFrame);\n      this.setState({ isPlaying: false });\n      if (this.state.repeat) this._replay();\n      else {\n        // istanbul ignore else\n        if (this.props.onPlayPause) this.props.onPlayPause(false);\n      }\n\n      return;\n    }\n\n    // continue the animation - request the next frame\n    this._requestFrame = window.requestAnimationFrame(this._updateAnimation);\n  };\n\n  private _play() {\n    // start playing\n    this.setState({ isPlaying: true }, () => {\n      // request the next frame\n      this._timeLastCycle = new Date().getTime();\n      this._requestFrame = window.requestAnimationFrame(this._updateAnimation);\n    });\n  }\n\n  private _replay = () => {\n    // timeline was complete, restart from the beginning\n    this.setState({ currentDuration: 0 }, () => this._play());\n  };\n\n  private _displayTime(millisec: number) {\n    const addZero = (i: number) => {\n      return i < 10 ? `0${i}` : i;\n    };\n\n    const date = new Date(millisec);\n    // const hours = date.getUTCHours();\n    const minutes = date.getUTCMinutes();\n    const seconds = date.getUTCSeconds();\n    return `${addZero(minutes)}:${addZero(seconds)}`;\n  }\n\n  private _getMilliseconds(time: string) {\n    // istanbul ignore else - WIP\n    if (time.indexOf(\":\") !== -1) {\n      return (\n        (Number(time.split(\":\")[0]) * 60 + Number(time.split(\":\")[1])) * 1000\n      );\n    } else {\n      return Number(time) * 1000;\n    }\n  }\n\n  // user changed the total duration\n  private _onTotalDurationChange = (value: string) => {\n    // NOTE: we should reset the current duration to 0\n    const milliseconds = this._getMilliseconds(value);\n    this._onSetTotalDuration(milliseconds);\n  };\n\n  private _changeRepeatSetting = (newValue?: boolean) => {\n    // istanbul ignore else\n    if (newValue !== undefined) {\n      this.setState(\n        () => ({ repeat: newValue }),\n        () => {\n          // istanbul ignore else\n          if (this.props.onSettingsChange) {\n            this.props.onSettingsChange({ loop: this.state.repeat });\n          }\n        }\n      );\n    }\n  };\n\n  private _onRepeatChanged = () => {\n    this.setState(\n      (prevState) => ({ repeat: !prevState.repeat }),\n      () => {\n        // istanbul ignore else\n        if (this.props.onSettingsChange) {\n          this.props.onSettingsChange({ loop: this.state.repeat });\n        }\n      }\n    );\n  };\n\n  private _currentDate = (): Date => {\n    const fraction = this.state.currentDuration / this.state.totalDuration;\n    if (this.props.endDate && this.props.startDate) {\n      const timeElapsed =\n        (this.props.endDate.getTime() - this.props.startDate.getTime()) *\n        fraction;\n      return new Date(this.props.startDate.getTime() + timeElapsed);\n    }\n    return new Date();\n  };\n\n  private _onSetTotalDuration = (milliseconds: number) => {\n    this.setState({ totalDuration: milliseconds }, () => {\n      // istanbul ignore else\n      if (this.props.onSettingsChange) {\n        this.props.onSettingsChange({ duration: milliseconds });\n      }\n    });\n  };\n\n  private _createMenuItemNode(\n    item: TimelineMenuItemProps,\n    index: number,\n    currentTimelineDuration: number,\n    close: () => void\n  ): React.ReactElement {\n    const label = item.label;\n    const checked = currentTimelineDuration === item.timelineDuration;\n    const icon = checked ? (\n      <span className=\"icon\">\n        <Icon iconSpec={<SvgCheckmark />} />{\" \"}\n      </span>\n    ) : (\n      <span />\n    );\n    return (\n      <MenuItem\n        key={index}\n        startIcon={icon}\n        onClick={() => {\n          this._onSetTotalDuration(item.timelineDuration);\n          close();\n        }}\n      >\n        {label}\n      </MenuItem>\n    );\n  }\n\n  private _renderSettings = () => {\n    const createMenuItemNodes = (close: () => void): React.ReactElement[] => {\n      const { totalDuration } = this.state;\n      let contextMenuItems: Array<TimelineMenuItemProps> = [];\n\n      if (!this.props.appMenuItems) {\n        contextMenuItems = this._standardTimelineMenuItems;\n      } else {\n        if (this.props.appMenuItemOption === \"append\") {\n          contextMenuItems = this._standardTimelineMenuItems.concat(\n            this.props.appMenuItems\n          );\n        } else if (this.props.appMenuItemOption === \"prefix\") {\n          contextMenuItems = this.props.appMenuItems.concat(\n            this._standardTimelineMenuItems\n          );\n        } else {\n          contextMenuItems = this.props.appMenuItems;\n        }\n      }\n\n      const itemNodes: React.ReactElement[] = [];\n      let keyIndex = 0;\n      if (this.state.includeRepeat) {\n        const checked = this.state.repeat;\n        const icon = checked ? (\n          <span className=\"icon\">\n            <Icon iconSpec={<SvgCheckmark />} />{\" \"}\n          </span>\n        ) : (\n          <span />\n        );\n        itemNodes.push(\n          <MenuItem\n            key={++keyIndex}\n            onClick={() => {\n              this._onRepeatChanged();\n              close();\n            }}\n            startIcon={icon}\n          >\n            {this._repeatLabel}\n          </MenuItem>\n        );\n        itemNodes.push(<MenuDivider key={++keyIndex} />);\n      }\n\n      contextMenuItems.forEach((item: TimelineMenuItemProps, index: number) => {\n        itemNodes.push(\n          this._createMenuItemNode(\n            item,\n            index + keyIndex + 1,\n            totalDuration,\n            close\n          )\n        );\n      });\n\n      return itemNodes;\n    };\n\n    return (\n      <DropdownMenu menuItems={createMenuItemNodes} placement=\"top-start\">\n        <span\n          data-testid=\"timeline-settings\"\n          className=\"timeline-settings icon\"\n          role=\"button\"\n          tabIndex={-1}\n          title={UiComponents.translate(\"button.label.settings\")}\n        >\n          <Icon iconSpec={<SvgMoreVertical />} />\n        </span>\n      </DropdownMenu>\n    );\n  };\n\n  public override render() {\n    const {\n      startDate,\n      endDate,\n      showDuration,\n      timeZoneOffset,\n      dateFormatOptions,\n      timeFormatOptions,\n    } = this.props;\n    const { currentDuration, totalDuration, minimized } = this.state;\n    const currentDate = this._currentDate();\n    const durationString = this._displayTime(currentDuration);\n    const totalDurationString = this._displayTime(totalDuration);\n    const hasDates = !!startDate && !!endDate;\n\n    return (\n      <div\n        data-testid=\"timeline-component\"\n        className={classnames(\n          \"timeline-component\",\n          !!minimized && \"minimized\",\n          hasDates && \"has-dates\"\n        )}\n      >\n        <div className=\"header\">\n          <PlayButton\n            className=\"play-button\"\n            isPlaying={this.state.isPlaying}\n            onPlay={this._onPlay}\n            onPause={this._onPause}\n            data-testid=\"timeline-play\"\n          />\n          <PlayerButton\n            className=\"play-backward\"\n            icon={<SvgCaretLeft />}\n            onClick={this._onBackward}\n            title={UiIModelComponents.translate(\"timeline.backward\")}\n          />\n          <PlayerButton\n            className=\"play-button-step\"\n            icon={<SvgPlayCircular />}\n            isPlaying={this.state.isPlaying}\n            onPlay={this._onPlay}\n            onPause={this._onPause}\n            title={UiIModelComponents.translate(\"timeline.step\")}\n          />\n          <PlayerButton\n            className=\"play-forward\"\n            icon={<SvgCaretRight />}\n            onClick={this._onForward}\n            title={UiIModelComponents.translate(\"timeline.backward\")}\n          />\n          <span className=\"current-date\">\n            {toDateString(currentDate, timeZoneOffset, dateFormatOptions)}\n          </span>\n        </div>\n        <div className=\"scrubber\">\n          <PlayButton\n            className=\"play-button\"\n            isPlaying={this.state.isPlaying}\n            onPlay={this._onPlay}\n            onPause={this._onPause}\n          />\n          <div className=\"start-time-container\">\n            {hasDates && (\n              <span data-testid=\"test-start-date\" className=\"start-date\">\n                {toDateString(startDate, timeZoneOffset, dateFormatOptions)}\n              </span>\n            )}\n            {hasDates && !showDuration && (\n              <span data-testid=\"test-start-time\" className=\"start-time\">\n                {toTimeString(startDate, timeZoneOffset, timeFormatOptions)}\n              </span>\n            )}\n            {showDuration && (\n              <span className=\"duration-start-time\">{durationString}</span>\n            )}\n          </div>\n          <Scrubber\n            className=\"slider\"\n            currentDuration={this.state.currentDuration}\n            totalDuration={totalDuration}\n            startDate={startDate}\n            endDate={endDate}\n            isPlaying={this.state.isPlaying}\n            inMiniMode={!!minimized}\n            showTime={!showDuration}\n            onChange={this._onTimelineChange}\n            onUpdate={this._onTimelineChange}\n            timeZoneOffset={this.props.timeZoneOffset}\n            markDate={this.props.markDate}\n          />\n          <div className=\"end-time-container\">\n            {hasDates && (\n              <span className=\"end-date\">\n                {toDateString(endDate, timeZoneOffset)}\n              </span>\n            )}\n            {hasDates && !showDuration && (\n              <span className=\"end-time\">\n                {toTimeString(endDate, timeZoneOffset, timeFormatOptions)}\n              </span>\n            )}\n            {showDuration && (\n              <InlineEdit\n                className=\"duration-end-time\"\n                defaultValue={totalDurationString}\n                onChange={this._onTotalDurationChange}\n              />\n            )}\n          </div>\n          {minimized && this._renderSettings()}\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"TimelineComponent.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/TimelineComponent.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 *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Timeline\n */\nimport \"./TimelineComponent.scss\";\nimport * as React from \"react\";\nimport { UiAdmin } from \"@itwin/appui-abstract\";\nimport type { DateFormatOptions } from \"@itwin/components-react\";\nimport {\n  toDateString,\n  toTimeString,\n  UiComponents,\n} from \"@itwin/components-react\";\nimport { SvgCheckmark, SvgMoreVertical } from \"@itwin/itwinui-icons-react\";\nimport {\n  DropdownMenu,\n  IconButton,\n  MenuDivider,\n  MenuItem,\n} from \"@itwin/itwinui-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\nimport { InlineEdit } from \"./InlineEdit\";\nimport type { PlaybackSettings, TimelinePausePlayArgs } from \"./interfaces\";\nimport { TimelinePausePlayAction } from \"./interfaces\";\nimport { PlayButton } from \"./PlayButton\";\nimport { Scrubber } from \"./Scrubber\";\n\nconst slowSpeed = 60 * 1000;\nconst mediumSpeed = 20 * 1000;\nconst fastSpeed = 10 * 1000;\n\n/** [[TimelineMenuItemOption]]: specifies how the app wants the timeline speeds to be installed on the TimelineComponent's ContextMenu\n * \"replace\" : use the app-supplied items in place of the standard items\n * \"append\" : add the app-supplied items following the standard items\n * \"prefix\" : add the app-supplied items before the standard items\n *\n * @public\n */\nexport type TimelineMenuItemOption = \"replace\" | \"append\" | \"prefix\";\n\n/** [[TimelineMenuItemProps]] specifies playback speed entries in the Timeline's ContextMenu\n * @public\n */\nexport interface TimelineMenuItemProps {\n  /** localized label for menu item */\n  label: string;\n\n  /** duration for the entire timeline to play */\n  timelineDuration: number;\n}\n\n/** TimelineDateMarkerProps: Mark a date on the timeline with an indicator\n * @public\n */\nexport interface TimelineDateMarkerProps {\n  /** Date to mark. If undefined, today's date will be used. */\n  date?: Date;\n  /** ReactNode to use as the marker on the timeline. If undefined, a short vertical bar will mark the date. */\n  dateMarker?: React.ReactNode;\n}\n\n/** [[TimelineComponentProps]] configure the timeline\n * @public\n */\nexport interface TimelineComponentProps {\n  /** Start date: beginning of the date range of a date-based timeline. */\n  startDate?: Date;\n  /** End date: end of the date range of a date-based timeline. */\n  endDate?: Date;\n  /** Total duration: range of the timeline in milliseconds.\n   * @note This can be changed by user interaction. See {@link TimelineComponentProps.appMenuItems}.\n   */\n  totalDuration: number;\n  /** Initial value for the current duration (the location of the thumb) in milliseconds */\n  initialDuration?: number;\n  /** Show in minimized mode (For future use. This prop will always be treated as true.)\n   * @deprecated in 4.10.x. Has no effect.\n   */\n  minimized?: boolean;\n  /** When playing, repeat indefinitely. Defaults to `false`.\n   * @note This can be changed by user interaction. See {@link TimelineComponentProps.includeRepeat}.\n   */\n  repeat?: boolean;\n  /** Show duration instead of time */\n  showDuration?: boolean;\n  /** Callback with current duration value (as a fraction) */\n  onChange?: (duration: number) => void;\n  /** Callback triggered when play/pause button is pressed */\n  onPlayPause?: (playing: boolean) => void;\n  /** Callback triggered when backward/forward buttons are pressed.\n   * @deprecated in 4.10.x. Has no effect.\n   */\n  onJump?: (forward: boolean) => void;\n  /** Callback triggered when a setting is changed */\n  onSettingsChange?: (arg: PlaybackSettings) => void;\n  /** Always display in miniMode with no expand menu (For future use. This prop will always be treated as true)\n   * @deprecated in 4.10.x. Has no effect.\n   */\n  alwaysMinimized?: boolean;\n  /** ComponentId -- must be set to use TimelineComponentEvents */\n  componentId?: string;\n  /** Include the repeat option on the Timeline Context Menu. Defaults to `true`. */\n  includeRepeat?: boolean;\n  /** App-supplied speed entries in the Timeline Context Menu. Defaults to `[Slow, Medium, Fast]` items. */\n  appMenuItems?: TimelineMenuItemProps[];\n  /** How to include the supplied app menu items in the Timeline Context Menu (prefix, append or replace). Defaults to `replace`. */\n  appMenuItemOption?: TimelineMenuItemOption;\n  /** Display date and time offset by the number of minutes specified. When undefined - local timezone will be used */\n  timeZoneOffset?: number;\n  /** Display a marker on the timeline rail to indicate current date - will only work if starDate and endDate are defined */\n  markDate?: TimelineDateMarkerProps;\n  /** Options used to format date string. If not defined it will user browser default locale settings. */\n  dateFormatOptions?: DateFormatOptions;\n  /** Options used to format time string. If not defined it will user browser default locale settings. */\n  timeFormatOptions?: DateFormatOptions;\n}\n\n/** [[TimelineComponent]] is used to playback timeline data\n * @public\n */\nexport function TimelineComponent(props: TimelineComponentProps) {\n  const {\n    appMenuItemOption = \"replace\",\n    startDate,\n    endDate,\n    showDuration,\n    timeZoneOffset,\n    dateFormatOptions,\n    timeFormatOptions,\n    includeRepeat = true,\n    onSettingsChange,\n    onChange,\n    onPlayPause,\n  } = props;\n  const [isPlaying, setIsPlaying] = React.useState(false);\n  const [currentDuration, setCurrentDuration] = React.useState(\n    props.initialDuration ?? 0\n  );\n  const [totalDuration, setTotalDuration] = React.useState(props.totalDuration);\n  const [repeat, setRepeat] = React.useState(props.repeat ?? false);\n\n  const playOrReplay = React.useCallback(() => {\n    if (isPlaying) return;\n\n    if (currentDuration >= totalDuration) {\n      setCurrentDuration(0);\n    }\n\n    setIsPlaying(true);\n    onPlayPause?.(true);\n  }, [isPlaying, onPlayPause, currentDuration, totalDuration]);\n  const pause = React.useCallback(() => {\n    if (!isPlaying) return;\n    setIsPlaying(false);\n    onPlayPause?.(false);\n  }, [isPlaying, onPlayPause]);\n  const updateTotalDuration = (newTotalDuration: number) => {\n    if (newTotalDuration === totalDuration) return;\n\n    const fraction = currentDuration / totalDuration;\n    const newCurrentDuration = fraction * newTotalDuration;\n\n    setTotalDuration(newTotalDuration);\n    setCurrentDuration(newCurrentDuration);\n    onSettingsChange?.({ duration: newTotalDuration });\n  };\n  const updateDuration = (\n    newDuration: number,\n    currentTotalDuration = totalDuration\n  ) => {\n    newDuration = Math.max(newDuration, 0);\n    newDuration = Math.min(newDuration, currentTotalDuration);\n\n    if (newDuration === currentDuration) return;\n    setCurrentDuration(newDuration);\n\n    const fraction = newDuration / currentTotalDuration;\n    onChange?.(fraction);\n  };\n  const updateRepeat = (newRepeat: boolean) => {\n    if (newRepeat === repeat) return;\n\n    setRepeat(newRepeat);\n    onSettingsChange?.({ loop: newRepeat });\n  };\n\n  const [prevTotalDuration, setPrevTotalDuration] = React.useState(\n    props.totalDuration\n  );\n  if (prevTotalDuration !== props.totalDuration) {\n    setPrevTotalDuration(props.totalDuration);\n    updateTotalDuration(props.totalDuration);\n  }\n\n  const [prevInitialDuration, setPrevInitialDuration] = React.useState(\n    props.initialDuration\n  );\n  if (prevInitialDuration !== props.initialDuration) {\n    setPrevInitialDuration(props.initialDuration);\n    updateDuration(props.initialDuration ?? 0, props.totalDuration);\n  }\n\n  const [prevRepeat, setPrevRepeat] = React.useState(props.repeat);\n  if (prevRepeat !== props.repeat) {\n    setPrevRepeat(props.repeat);\n    updateRepeat(props.repeat ?? repeat);\n  }\n\n  React.useEffect(() => {\n    if (!props.componentId) return;\n    return UiAdmin.onGenericUiEvent.addListener((args) => {\n      const timelineArgs = args as TimelinePausePlayArgs;\n      if (\n        !timelineArgs ||\n        props.componentId !== timelineArgs.uiComponentId ||\n        timelineArgs.timelineAction === undefined\n      )\n        return;\n\n      switch (timelineArgs.timelineAction) {\n        case TimelinePausePlayAction.Play:\n          playOrReplay();\n          break;\n        case TimelinePausePlayAction.Pause:\n          pause();\n          break;\n        case TimelinePausePlayAction.Toggle:\n          if (isPlaying) {\n            pause();\n          } else {\n            playOrReplay();\n          }\n          break;\n      }\n    });\n  }, [isPlaying, pause, playOrReplay, props.componentId]);\n  useAnimation(({ delta }) => {\n    const duration = currentDuration + delta;\n    updateDuration(duration);\n\n    if (duration >= totalDuration) {\n      if (repeat) {\n        setCurrentDuration(0);\n        return;\n      }\n\n      pause();\n    }\n  }, isPlaying);\n\n  const onTimelineChange = (values: ReadonlyArray<number>) => {\n    const newDuration = values[0];\n    updateDuration(newDuration);\n  };\n\n  const currentDurationStr = toDisplayTime(currentDuration);\n  const totalDurationStr = toDisplayTime(totalDuration);\n  const hasDates = !!startDate && !!endDate;\n  return (\n    <div data-testid=\"timeline-component\" className=\"timeline-component\">\n      <PlayButton isPlaying={isPlaying} onPlay={playOrReplay} onPause={pause} />\n      <div className=\"time-container\">\n        {hasDates && (\n          <span data-testid=\"test-start-date\" className=\"timeline-date\">\n            {toDateString(startDate, timeZoneOffset, dateFormatOptions)}\n          </span>\n        )}\n        {hasDates && !showDuration && (\n          <span data-testid=\"test-start-time\" className=\"timeline-time\">\n            {toTimeString(startDate, timeZoneOffset, timeFormatOptions)}\n          </span>\n        )}\n        {showDuration && (\n          <span className=\"timeline-duration-time\">{currentDurationStr}</span>\n        )}\n      </div>\n      <Scrubber\n        className=\"slider\"\n        currentDuration={currentDuration}\n        totalDuration={totalDuration}\n        startDate={startDate}\n        endDate={endDate}\n        isPlaying={isPlaying}\n        showTime={!showDuration}\n        onChange={onTimelineChange}\n        onUpdate={onTimelineChange}\n        timeZoneOffset={props.timeZoneOffset}\n        markDate={props.markDate}\n      />\n      <div className=\"time-container\">\n        {hasDates && (\n          <span data-testid=\"test-end-date\" className=\"timeline-date\">\n            {toDateString(endDate, timeZoneOffset)}\n          </span>\n        )}\n        {hasDates && !showDuration && (\n          <span className=\"timeline-time\">\n            {toTimeString(endDate, timeZoneOffset, timeFormatOptions)}\n          </span>\n        )}\n        {showDuration && (\n          <InlineEdit\n            className=\"timeline-duration-time\"\n            defaultValue={totalDurationStr}\n            onChange={(value) => {\n              const newTotalDuration = timeToMs(value);\n              updateTotalDuration(newTotalDuration);\n            }}\n          />\n        )}\n      </div>\n      <SettingsMenu\n        appMenuItems={props.appMenuItems}\n        appMenuItemOption={appMenuItemOption}\n        includeRepeat={includeRepeat}\n        repeat={repeat}\n        totalDuration={totalDuration}\n        onRepeatClick={() => {\n          updateRepeat(!repeat);\n        }}\n        onTotalDurationChange={(newTotalDuration) => {\n          updateTotalDuration(newTotalDuration);\n        }}\n      />\n    </div>\n  );\n}\n\ntype SettingsMenuProps = Pick<\n  TimelineComponentProps,\n  \"appMenuItems\" | \"totalDuration\"\n> &\n  Pick<\n    Required<TimelineComponentProps>,\n    \"appMenuItemOption\" | \"includeRepeat\" | \"repeat\"\n  > & {\n    onRepeatClick: () => void;\n    onTotalDurationChange: (totalDuration: number) => void;\n  };\n\nfunction SettingsMenu({\n  appMenuItems,\n  appMenuItemOption,\n  includeRepeat,\n  repeat,\n  totalDuration,\n  onRepeatClick,\n  onTotalDurationChange,\n}: SettingsMenuProps) {\n  const settingsLabel = React.useMemo(\n    () => UiComponents.translate(\"button.label.settings\"),\n    []\n  );\n  const repeatLabel = React.useMemo(\n    () => UiIModelComponents.translate(\"timeline.repeat\"),\n    []\n  );\n  const standardItems: TimelineMenuItemProps[] = React.useMemo(\n    () => [\n      {\n        label: UiIModelComponents.translate(\"timeline.slow\"),\n        timelineDuration: slowSpeed,\n      },\n      {\n        label: UiIModelComponents.translate(\"timeline.medium\"),\n        timelineDuration: mediumSpeed,\n      },\n      {\n        label: UiIModelComponents.translate(\"timeline.fast\"),\n        timelineDuration: fastSpeed,\n      },\n    ],\n    []\n  );\n\n  const menuItems = React.useMemo(() => {\n    if (!appMenuItems) {\n      return standardItems;\n    }\n\n    if (appMenuItemOption === \"append\") {\n      return [...standardItems, ...appMenuItems];\n    }\n    if (appMenuItemOption === \"prefix\") {\n      return [...appMenuItems, ...standardItems];\n    }\n    // Replace\n    return appMenuItems;\n  }, [appMenuItemOption, appMenuItems, standardItems]);\n\n  return (\n    <DropdownMenu\n      menuItems={(close) => {\n        return [\n          ...(includeRepeat\n            ? [\n                <MenuItem\n                  key=\"repeat\"\n                  onClick={() => {\n                    onRepeatClick();\n                    close();\n                  }}\n                  startIcon={repeat ? <SvgCheckmark /> : <></>}\n                >\n                  {repeatLabel}\n                </MenuItem>,\n                <MenuDivider key=\"divider\" />,\n              ]\n            : []),\n          ...menuItems.map((item, index) => {\n            const checked = totalDuration === item.timelineDuration;\n            return (\n              <MenuItem\n                key={index}\n                startIcon={checked ? <SvgCheckmark /> : <></>}\n                onClick={() => {\n                  onTotalDurationChange(item.timelineDuration);\n                  close();\n                }}\n              >\n                {item.label}\n              </MenuItem>\n            );\n          }),\n        ];\n      }}\n      placement=\"top-start\"\n    >\n      <IconButton\n        data-testid=\"timeline-settings\"\n        title={settingsLabel}\n        styleType=\"borderless\"\n      >\n        <SvgMoreVertical />\n      </IconButton>\n    </DropdownMenu>\n  );\n}\n\nfunction useAnimation(\n  onAnimate: (args: { delta: number }) => void,\n  playing = true\n) {\n  const onAnimateRef = React.useRef(onAnimate);\n  onAnimateRef.current = onAnimate;\n\n  const lastTimeRef = React.useRef<number | undefined>();\n\n  React.useEffect(() => {\n    if (!playing) return;\n\n    let handle = 0;\n    let didCancel = false;\n\n    const animate = (time: number) => {\n      if (lastTimeRef.current === undefined) {\n        lastTimeRef.current = time;\n      }\n\n      const delta = time - lastTimeRef.current;\n      lastTimeRef.current = time;\n\n      onAnimateRef.current({\n        delta,\n      });\n\n      if (didCancel) return;\n\n      handle = window.requestAnimationFrame(animate);\n    };\n\n    handle = window.requestAnimationFrame(animate);\n    return () => {\n      didCancel = true;\n      lastTimeRef.current = undefined;\n      window.cancelAnimationFrame(handle);\n    };\n  }, [playing]);\n}\n\nfunction timeToMs(time: string) {\n  if (time.indexOf(\":\") !== -1) {\n    return (\n      (Number(time.split(\":\")[0]) * 60 + Number(time.split(\":\")[1])) * 1000\n    );\n  } else {\n    return Number(time) * 1000;\n  }\n}\n\nfunction toDisplayTime(ms: number) {\n  const addZero = (i: number) => {\n    return i < 10 ? `0${i}` : i;\n  };\n\n  const date = new Date(ms);\n  // const hours = date.getUTCHours();\n  const minutes = date.getUTCMinutes();\n  const seconds = date.getUTCSeconds();\n  return `${addZero(minutes)}:${addZero(seconds)}`;\n}\n"]}

package/lib/cjs/imodel-components-react/timeline/TimelineComponent.scss

@@ -3,159 +3,46 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .timeline-component {
-  box-sizing: border-box;
   width: 100%;
+  min-width: 275px;
+
   display: flex;
-  flex-direction: column;
-  position: relative;
+  flex-direction: row;
+  align-items: center;
   padding: 8px 16px;
-  min-width: 275px;
+  box-sizing: border-box;
+  gap: 8px;
 
-  > .header {
+  .time-container {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    height: 38px;
-    position: relative;
-
-    > .play-backward {
-      border-radius: var(--iui-border-radius-1) 0 0 var(--iui-border-radius-1);
-    }
-
-    > .play-button-step {
-      border-left: none;
-      border-right: none;
-      border-radius: 0;
-    }
-
-    > .play-forward {
-      border-radius: 0px var(--iui-border-radius-1) var(--iui-border-radius-1) 0;
-    }
-
-    > .current-date {
-      font-size: 14px;
-      min-width: 180px;
-      padding: 8px;
-      color: var(--iui-color-text);
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      border-radius: var(--iui-border-radius-1);
-      border: solid 1px var(--iui-color-border);
-      background-color: var(--iui-color-background);
-      text-align: center;
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
   }
 
-  .play-button {
-    margin-right: 10px;
+  .timeline-time {
+    font-size: 12px;
+    color: var(--iui-color-text-muted);
+    text-align: center;
+    min-height: inherit;
   }
 
-  > .timeline-timeline {
-    margin: 8px 0;
+  .timeline-duration-time {
+    font-size: 14px;
+    width: 40px;
+    color: var(--iui-color-text);
+    text-align: center;
+    min-height: inherit;
   }
 
-  > .scrubber {
-    min-height: 20px;
-    display: flex;
-    align-items: center;
-    position: relative;
-
-    .start-time-container,
-    .end-time-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .start-time,
-    .end-time {
-      font-size: 12px;
-      color: var(--iui-color-text-muted);
-      text-align: center;
-      min-height: inherit;
-    }
-
-    .duration-start-time,
-    .duration-end-time {
-      font-size: 14px;
-      width: 40px;
-      color: var(--iui-color-text);
-      text-align: center;
-      min-height: inherit;
-    }
-
-    .start-date,
-    .end-date {
-      font-size: 12px;
-      color: var(--iui-color-text-muted);
-      padding-bottom: 4px;
-    }
-
-    .slider {
-      position: relative;
-      flex: 1;
-      margin: 0 20px;
-      height: 24px;
-    }
+  .timeline-date {
+    font-size: 12px;
+    color: var(--iui-color-text-muted);
+    padding-bottom: 4px;
   }
-}
-
-.timeline-settings {
-  margin-left: auto;
-  font-size: 14px;
-  color: var(--iui-color-text);
-  cursor: pointer;
-
-  &:hover {
-    color: var(--iui-color-text-hover);
-  }
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.timeline-component.minimized .timeline-settings {
-  margin-left: 8px;
-  margin-right: -6px;
-}
 
-.timeline-component.has-dates .start-time-container {
-  margin-right: 8px;
-}
-
-.timeline-component.has-dates .end-time-container {
-  margin-left: 8px;
-}
-
-.timeline-component.minimized .header,
-.timeline-component.minimized .timeline-timeline,
-.timeline-component:not(.minimized) .scrubber .start-date,
-.timeline-component:not(.minimized) .scrubber .end-date,
-.timeline-component:not(.has-dates) .scrubber .start-date,
-.timeline-component:not(.has-dates) .scrubber .end-date,
-.timeline-component:not(.minimized) .scrubber .play-button,
-.timeline-component:not(.minimized) .scrubber .timeline-settings {
-  display: none;
-}
-
-.separator {
-  padding: 0.5em 0;
-  position: relative;
-
-  &:before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 4px;
-    right: 4px;
-    width: auto;
-    height: 1px;
-    background: #dce0e3;
-    transform: translateY(-50%);
+  .slider {
+    position: relative;
+    flex: 1;
+    margin: 0 20px;
   }
 }

package/lib/cjs/imodel-components-react.d.ts

@@ -27,7 +27,6 @@ export * from "./imodel-components-react/quantityformat/QuantityFormatPanel";
 export * from "./imodel-components-react/timeline/interfaces";
 export * from "./imodel-components-react/timeline/BaseTimelineDataProvider";
 export * from "./imodel-components-react/timeline/InlineEdit";
-export * from "./imodel-components-react/timeline/PlayerButton";
 export * from "./imodel-components-react/timeline/Scrubber";
 export * from "./imodel-components-react/timeline/TimelineComponent";
 export * from "./imodel-components-react/timeline/SolarTimeline";

package/lib/cjs/imodel-components-react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"imodel-components-react.d.ts","sourceRoot":"","sources":["../../src/imodel-components-react.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAElF,cAAc,6CAA6C,CAAC;AAC5D,cAAc,mDAAmD,CAAC;AAClE,cAAc,mDAAmD,CAAC;AAClE,cAAc,kDAAkD,CAAC;AACjE,cAAc,oDAAoD,CAAC;AACnE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,kDAAkD,CAAC;AACjE,cAAc,wCAAwC,CAAC;AAEvD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,gDAAgD,CAAC;AAE/D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sDAAsD,CAAC;AAErE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yDAAyD,CAAC;AAExE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,4DAA4D,CAAC;AAC3E,cAAc,+DAA+D,CAAC;AAE9E,cAAc,sDAAsD,CAAC;AACrE,cAAc,0DAA0D,CAAC;AACzE,cAAc,uDAAuD,CAAC;AACtE,cAAc,qDAAqD,CAAC;AACpE,cAAc,0DAA0D,CAAC;AACzE,cAAc,sDAAsD,CAAC;AACrE,cAAc,4DAA4D,CAAC;AAC3E,cAAc,8DAA8D,CAAC;AAE7E,cAAc,+CAA+C,CAAC;AAC9D,cAAc,6DAA6D,CAAC;AAC5E,cAAc,+CAA+C,CAAC;AAC9D,cAAc,iDAAiD,CAAC;AAChE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,sDAAsD,CAAC;AACrE,cAAc,kDAAkD,CAAC;AACjE,cAAc,0DAA0D,CAAC;AAEzE,cAAc,sDAAsD,CAAC;AACrE,cAAc,4DAA4D,CAAC;AAE3E;;;;GAIG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG"}
+{"version":3,"file":"imodel-components-react.d.ts","sourceRoot":"","sources":["../../src/imodel-components-react.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAElF,cAAc,6CAA6C,CAAC;AAC5D,cAAc,mDAAmD,CAAC;AAClE,cAAc,mDAAmD,CAAC;AAClE,cAAc,kDAAkD,CAAC;AACjE,cAAc,oDAAoD,CAAC;AACnE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,kDAAkD,CAAC;AACjE,cAAc,wCAAwC,CAAC;AAEvD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,gDAAgD,CAAC;AAE/D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sDAAsD,CAAC;AAErE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yDAAyD,CAAC;AAExE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,4DAA4D,CAAC;AAC3E,cAAc,+DAA+D,CAAC;AAE9E,cAAc,sDAAsD,CAAC;AACrE,cAAc,0DAA0D,CAAC;AACzE,cAAc,uDAAuD,CAAC;AACtE,cAAc,qDAAqD,CAAC;AACpE,cAAc,0DAA0D,CAAC;AACzE,cAAc,sDAAsD,CAAC;AACrE,cAAc,4DAA4D,CAAC;AAC3E,cAAc,8DAA8D,CAAC;AAE7E,cAAc,+CAA+C,CAAC;AAC9D,cAAc,6DAA6D,CAAC;AAC5E,cAAc,+CAA+C,CAAC;AAC9D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,sDAAsD,CAAC;AACrE,cAAc,kDAAkD,CAAC;AACjE,cAAc,0DAA0D,CAAC;AAEzE,cAAc,sDAAsD,CAAC;AACrE,cAAc,4DAA4D,CAAC;AAE3E;;;;GAIG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG"}

package/lib/cjs/imodel-components-react.js

@@ -50,7 +50,6 @@ __exportStar(require("./imodel-components-react/quantityformat/QuantityFormatPan
 __exportStar(require("./imodel-components-react/timeline/interfaces"), exports);
 __exportStar(require("./imodel-components-react/timeline/BaseTimelineDataProvider"), exports);
 __exportStar(require("./imodel-components-react/timeline/InlineEdit"), exports);
-__exportStar(require("./imodel-components-react/timeline/PlayerButton"), exports);
 __exportStar(require("./imodel-components-react/timeline/Scrubber"), exports);
 __exportStar(require("./imodel-components-react/timeline/TimelineComponent"), exports);
 __exportStar(require("./imodel-components-react/timeline/SolarTimeline"), exports);

package/lib/cjs/imodel-components-react.js.map

@@ -1 +1 @@
-{"version":3,"file":"imodel-components-react.js","sourceRoot":"","sources":["../../src/imodel-components-react.ts"],"names":[],"mappings":";AAAA;;;gGAGgG;;;;;;;;;;;;;;;;;AAEhG,qEAAqE;AAErE,mFAAkF;AAAzE,wHAAA,kBAAkB,OAAA;AAE3B,8EAA4D;AAC5D,oFAAkE;AAClE,oFAAkE;AAClE,mFAAiE;AACjE,qFAAmE;AACnE,4EAA0D;AAC1D,mFAAiE;AACjE,yEAAuD;AAEvD,gFAA8D;AAC9D,iFAA+D;AAE/D,iFAA+D;AAC/D,uFAAqE;AAErE,8EAA4D;AAC5D,0FAAwE;AAExE,gFAA8D;AAC9D,6FAA2E;AAC3E,gGAA8E;AAE9E,uFAAqE;AACrE,2FAAyE;AACzE,wFAAsE;AACtE,sFAAoE;AACpE,2FAAyE;AACzE,uFAAqE;AACrE,6FAA2E;AAC3E,+FAA6E;AAE7E,gFAA8D;AAC9D,8FAA4E;AAC5E,gFAA8D;AAC9D,kFAAgE;AAChE,8EAA4D;AAC5D,uFAAqE;AACrE,mFAAiE;AACjE,2FAAyE;AAEzE,uFAAqE;AACrE,6FAA2E;AAE3E;;;;GAIG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG","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\n// cSpell:ignore iconpicker lineweight hocs datepicker quantityformat\n\nexport { UiIModelComponents } from \"./imodel-components-react/UiIModelComponents\";\n\nexport * from \"./imodel-components-react/color/AlphaSlider\";\nexport * from \"./imodel-components-react/color/ColorPickerButton\";\nexport * from \"./imodel-components-react/color/ColorPickerDialog\";\nexport * from \"./imodel-components-react/color/ColorPickerPopup\";\nexport * from \"./imodel-components-react/color/getCSSColorFromDef\";\nexport * from \"./imodel-components-react/color/HueSlider\";\nexport * from \"./imodel-components-react/color/SaturationPicker\";\nexport * from \"./imodel-components-react/color/Swatch\";\n\nexport * from \"./imodel-components-react/editors/ColorEditor\";\nexport * from \"./imodel-components-react/editors/WeightEditor\";\n\nexport * from \"./imodel-components-react/inputs/QuantityInput\";\nexport * from \"./imodel-components-react/inputs/QuantityNumberInput\";\n\nexport * from \"./imodel-components-react/lineweight/Swatch\";\nexport * from \"./imodel-components-react/lineweight/WeightPickerButton\";\n\nexport * from \"./imodel-components-react/navigationaids/Cube\";\nexport * from \"./imodel-components-react/navigationaids/CubeNavigationAid\";\nexport * from \"./imodel-components-react/navigationaids/DrawingNavigationAid\";\n\nexport * from \"./imodel-components-react/quantityformat/FormatPanel\";\nexport * from \"./imodel-components-react/quantityformat/FormatPrecision\";\nexport * from \"./imodel-components-react/quantityformat/FormatSample\";\nexport * from \"./imodel-components-react/quantityformat/FormatType\";\nexport * from \"./imodel-components-react/quantityformat/FormatUnitLabel\";\nexport * from \"./imodel-components-react/quantityformat/FormatUnits\";\nexport * from \"./imodel-components-react/quantityformat/MiscFormatOptions\";\nexport * from \"./imodel-components-react/quantityformat/QuantityFormatPanel\";\n\nexport * from \"./imodel-components-react/timeline/interfaces\";\nexport * from \"./imodel-components-react/timeline/BaseTimelineDataProvider\";\nexport * from \"./imodel-components-react/timeline/InlineEdit\";\nexport * from \"./imodel-components-react/timeline/PlayerButton\";\nexport * from \"./imodel-components-react/timeline/Scrubber\";\nexport * from \"./imodel-components-react/timeline/TimelineComponent\";\nexport * from \"./imodel-components-react/timeline/SolarTimeline\";\nexport * from \"./imodel-components-react/timeline/BaseSolarDataProvider\";\n\nexport * from \"./imodel-components-react/viewport/ViewportComponent\";\nexport * from \"./imodel-components-react/viewport/ViewportComponentEvents\";\n\n/** @docs-package-description\n * The imodel-components-react package contains React components that depend on the core-frontend, core-common or core-quantity packages.\n * The components pertain to Color, Cube, LineWeight, Navigation Aids, Quantity Inputs, Timeline and Viewport.\n * For more information, see [learning about imodel-components-react]($docs/learning/ui/imodel-components/index.md).\n */\n/**\n * @docs-group-description Color\n * Classes and components for working with and picking a Color.\n */\n/**\n * @docs-group-description Common\n * Common classes used across various UI components.\n */\n/**\n * @docs-group-description Cube\n * Component for 3D Cube.\n */\n/**\n * @docs-group-description Inputs\n * Input Components that format and parse input for IModelApps.\n */\n/**\n * @docs-group-description LineWeight\n * Classes and components for working with and picking a Line Weight.\n */\n/**\n * @docs-group-description NavigationAids\n * Classes and components for working with Navigation Aids.\n */\n/**\n * @docs-group-description PropertyEditors\n * Classes and components for working with Property Editors.\n */\n/**\n * @docs-group-description QuantityFormat\n * Classes and components for working with a Quantity Formats.\n */\n/**\n * @docs-group-description Timeline\n * Classes and components that provide a timeline\n */\n/**\n * @docs-group-description Viewport\n * Classes and components for working with a Viewport.\n */\n"]}
+{"version":3,"file":"imodel-components-react.js","sourceRoot":"","sources":["../../src/imodel-components-react.ts"],"names":[],"mappings":";AAAA;;;gGAGgG;;;;;;;;;;;;;;;;;AAEhG,qEAAqE;AAErE,mFAAkF;AAAzE,wHAAA,kBAAkB,OAAA;AAE3B,8EAA4D;AAC5D,oFAAkE;AAClE,oFAAkE;AAClE,mFAAiE;AACjE,qFAAmE;AACnE,4EAA0D;AAC1D,mFAAiE;AACjE,yEAAuD;AAEvD,gFAA8D;AAC9D,iFAA+D;AAE/D,iFAA+D;AAC/D,uFAAqE;AAErE,8EAA4D;AAC5D,0FAAwE;AAExE,gFAA8D;AAC9D,6FAA2E;AAC3E,gGAA8E;AAE9E,uFAAqE;AACrE,2FAAyE;AACzE,wFAAsE;AACtE,sFAAoE;AACpE,2FAAyE;AACzE,uFAAqE;AACrE,6FAA2E;AAC3E,+FAA6E;AAE7E,gFAA8D;AAC9D,8FAA4E;AAC5E,gFAA8D;AAC9D,8EAA4D;AAC5D,uFAAqE;AACrE,mFAAiE;AACjE,2FAAyE;AAEzE,uFAAqE;AACrE,6FAA2E;AAE3E;;;;GAIG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG","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\n// cSpell:ignore iconpicker lineweight hocs datepicker quantityformat\n\nexport { UiIModelComponents } from \"./imodel-components-react/UiIModelComponents\";\n\nexport * from \"./imodel-components-react/color/AlphaSlider\";\nexport * from \"./imodel-components-react/color/ColorPickerButton\";\nexport * from \"./imodel-components-react/color/ColorPickerDialog\";\nexport * from \"./imodel-components-react/color/ColorPickerPopup\";\nexport * from \"./imodel-components-react/color/getCSSColorFromDef\";\nexport * from \"./imodel-components-react/color/HueSlider\";\nexport * from \"./imodel-components-react/color/SaturationPicker\";\nexport * from \"./imodel-components-react/color/Swatch\";\n\nexport * from \"./imodel-components-react/editors/ColorEditor\";\nexport * from \"./imodel-components-react/editors/WeightEditor\";\n\nexport * from \"./imodel-components-react/inputs/QuantityInput\";\nexport * from \"./imodel-components-react/inputs/QuantityNumberInput\";\n\nexport * from \"./imodel-components-react/lineweight/Swatch\";\nexport * from \"./imodel-components-react/lineweight/WeightPickerButton\";\n\nexport * from \"./imodel-components-react/navigationaids/Cube\";\nexport * from \"./imodel-components-react/navigationaids/CubeNavigationAid\";\nexport * from \"./imodel-components-react/navigationaids/DrawingNavigationAid\";\n\nexport * from \"./imodel-components-react/quantityformat/FormatPanel\";\nexport * from \"./imodel-components-react/quantityformat/FormatPrecision\";\nexport * from \"./imodel-components-react/quantityformat/FormatSample\";\nexport * from \"./imodel-components-react/quantityformat/FormatType\";\nexport * from \"./imodel-components-react/quantityformat/FormatUnitLabel\";\nexport * from \"./imodel-components-react/quantityformat/FormatUnits\";\nexport * from \"./imodel-components-react/quantityformat/MiscFormatOptions\";\nexport * from \"./imodel-components-react/quantityformat/QuantityFormatPanel\";\n\nexport * from \"./imodel-components-react/timeline/interfaces\";\nexport * from \"./imodel-components-react/timeline/BaseTimelineDataProvider\";\nexport * from \"./imodel-components-react/timeline/InlineEdit\";\nexport * from \"./imodel-components-react/timeline/Scrubber\";\nexport * from \"./imodel-components-react/timeline/TimelineComponent\";\nexport * from \"./imodel-components-react/timeline/SolarTimeline\";\nexport * from \"./imodel-components-react/timeline/BaseSolarDataProvider\";\n\nexport * from \"./imodel-components-react/viewport/ViewportComponent\";\nexport * from \"./imodel-components-react/viewport/ViewportComponentEvents\";\n\n/** @docs-package-description\n * The imodel-components-react package contains React components that depend on the core-frontend, core-common or core-quantity packages.\n * The components pertain to Color, Cube, LineWeight, Navigation Aids, Quantity Inputs, Timeline and Viewport.\n * For more information, see [learning about imodel-components-react]($docs/learning/ui/imodel-components/index.md).\n */\n/**\n * @docs-group-description Color\n * Classes and components for working with and picking a Color.\n */\n/**\n * @docs-group-description Common\n * Common classes used across various UI components.\n */\n/**\n * @docs-group-description Cube\n * Component for 3D Cube.\n */\n/**\n * @docs-group-description Inputs\n * Input Components that format and parse input for IModelApps.\n */\n/**\n * @docs-group-description LineWeight\n * Classes and components for working with and picking a Line Weight.\n */\n/**\n * @docs-group-description NavigationAids\n * Classes and components for working with Navigation Aids.\n */\n/**\n * @docs-group-description PropertyEditors\n * Classes and components for working with Property Editors.\n */\n/**\n * @docs-group-description QuantityFormat\n * Classes and components for working with a Quantity Formats.\n */\n/**\n * @docs-group-description Timeline\n * Classes and components that provide a timeline\n */\n/**\n * @docs-group-description Viewport\n * Classes and components for working with a Viewport.\n */\n"]}

package/lib/esm/imodel-components-react/color/AlphaSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlphaSlider.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/AlphaSlider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,WAAW;IACb,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qDAAqD;IACrD,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtD,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,qBAAa,WAAY,SAAQ,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC;IACpE,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,kBAAkB,CAC2B;IAErD,gBAAgB;gBACJ,KAAK,EAAE,gBAAgB;IAInC,OAAO,CAAC,gBAAgB,CAgEtB;IAEF,gBAAgB;IACA,oBAAoB;IAIpC,OAAO,CAAC,SAAS,CAef;IAEF,OAAO,CAAC,YAAY,CAMlB;IAEF,OAAO,CAAC,UAAU,CA4BhB;IAEF,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,qBAAqB;IAK7B,gBAAgB;IACA,MAAM,IAAI,KAAK,CAAC,SAAS;CA0C1C"}
+{"version":3,"file":"AlphaSlider.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/AlphaSlider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,WAAW;IACb,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qDAAqD;IACrD,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtD,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,qBAAa,WAAY,SAAQ,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC;IACpE,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,kBAAkB,CAC2B;IAErD,gBAAgB;gBACJ,KAAK,EAAE,gBAAgB;IAInC,OAAO,CAAC,gBAAgB,CAgEtB;IAEF,gBAAgB;IACA,oBAAoB;IAIpC,OAAO,CAAC,SAAS,CAef;IAEF,OAAO,CAAC,YAAY,CAMlB;IAEF,OAAO,CAAC,UAAU,CAkChB;IAEF,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,qBAAqB;IAK7B,gBAAgB;IACA,MAAM,IAAI,KAAK,CAAC,SAAS;CA0C1C"}

package/lib/esm/imodel-components-react/color/AlphaSlider.js

@@ -104,24 +104,26 @@ export class AlphaSlider extends React.PureComponent {
         };
         this._onKeyDown = (evt) => {
             let newTransparency;
-            if (evt.key === Key.ArrowLeft || evt.key === Key.ArrowDown) {
+            if (evt.key === Key.ArrowLeft.valueOf() ||
+                evt.key === Key.ArrowDown.valueOf()) {
                 newTransparency = this.props.alpha - (evt.ctrlKey ? 0.1 : 0.05);
             }
-            else if (evt.key === Key.ArrowRight || evt.key === Key.ArrowUp) {
+            else if (evt.key === Key.ArrowRight.valueOf() ||
+                evt.key === Key.ArrowUp.valueOf()) {
                 newTransparency = this.props.alpha + (evt.ctrlKey ? 0.1 : 0.05);
             }
-            else if (evt.key === Key.PageDown) {
+            else if (evt.key === Key.PageDown.valueOf()) {
                 newTransparency = this.props.alpha - (evt.ctrlKey ? 0.5 : 0.25);
             }
-            else if (evt.key === Key.PageUp) {
+            else if (evt.key === Key.PageUp.valueOf()) {
                 newTransparency = this.props.alpha + (evt.ctrlKey ? 0.5 : 0.25);
             }
-            else if (evt.key === Key.Home) {
+            else if (evt.key === Key.Home.valueOf()) {
                 newTransparency = 0;
             }
             else {
                 // istanbul ignore else
-                if (evt.key === Key.End) {
+                if (evt.key === Key.End.valueOf()) {
                     newTransparency = 1;
                 }
             }

package/lib/esm/imodel-components-react/color/AlphaSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlphaSlider.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/AlphaSlider.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 *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\nimport \"./AlphaSlider.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\n/** Properties for the [[AlphaSlider]] React component\n * @public\n */\nexport interface AlphaSliderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    CommonProps {\n  /** true if slider is oriented horizontal, else vertical orientation is assumed */\n  isHorizontal?: boolean;\n  /** function to run when user selects color swatch */\n  onAlphaChange?: ((alpha: number) => void) | undefined;\n  /** Alpha value between 0 (transparent) and 1 (opaque) */\n  alpha: number;\n}\n\n/** AlphaSlider component used to set the alpha value.\n * @public\n */\nexport class AlphaSlider extends React.PureComponent<AlphaSliderProps> {\n  private _container: HTMLDivElement | null = null;\n  private _transparencyLabel =\n    UiIModelComponents.translate(\"color.transparency\");\n\n  /** @internal */\n  constructor(props: AlphaSliderProps) {\n    super(props);\n  }\n\n  private _calculateChange = (\n    e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n    isHorizontal: boolean,\n    alpha: number,\n    container: HTMLDivElement\n  ): number | undefined => {\n    e.preventDefault();\n    const { width: containerWidth, height: containerHeight } =\n      container.getBoundingClientRect();\n\n    let x = 0;\n    if (\"pageX\" in e) {\n      x = e.pageX;\n    } else {\n      // istanbul ignore if\n      if (undefined === e.touches) return undefined;\n      x = e.touches[0].pageX;\n    }\n    // istanbul ignore if\n    if (undefined === x) return undefined;\n\n    let y = 0;\n    if (\"pageY\" in e) {\n      y = e.pageY;\n    } else {\n      // istanbul ignore if\n      if (undefined === e.touches) return;\n      y = e.touches[0].pageY;\n    }\n    // istanbul ignore if\n    if (undefined === y) return undefined;\n\n    const left = x - (container.getBoundingClientRect().left + window.scrollX);\n    const top = y - (container.getBoundingClientRect().top + window.scrollY);\n\n    let t = 0;\n\n    if (!isHorizontal) {\n      // istanbul ignore next\n      if (top < 0) {\n        t = 1;\n      } else if (top > containerHeight) {\n        t = 0;\n      } else {\n        t = 1 - top / containerHeight;\n      }\n    } else {\n      // horizontal\n      // istanbul ignore next\n      if (left < 0) {\n        t = 0;\n      } else if (left > containerWidth) {\n        t = 1;\n      } else {\n        t = left / containerWidth;\n      }\n    }\n\n    // istanbul ignore if\n    if (t < 0) t = 0;\n    // istanbul ignore if\n    if (t > 1) t = 1;\n    // istanbul ignore next\n    return alpha !== t ? t : undefined;\n  };\n\n  /** @internal */\n  public override componentWillUnmount() {\n    this._unbindEventListeners();\n  }\n\n  private _onChange = (\n    e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n  ) => {\n    // istanbul ignore else\n    if (this._container && this.props.onAlphaChange) {\n      const change = this._calculateChange(\n        e,\n        this.props.isHorizontal ? this.props.isHorizontal : false,\n        this.props.alpha,\n        this._container\n      );\n      undefined !== change &&\n        typeof this.props.onAlphaChange === \"function\" &&\n        this.props.onAlphaChange(change);\n    }\n  };\n\n  private _onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n    this._onChange(e);\n    // istanbul ignore else\n    if (this._container) this._container.focus();\n    window.addEventListener(\"mousemove\", this._onChange as any);\n    window.addEventListener(\"mouseup\", this._onMouseUp);\n  };\n\n  private _onKeyDown = (evt: React.KeyboardEvent<HTMLDivElement>) => {\n    let newTransparency: number | undefined;\n    if (evt.key === Key.ArrowLeft || evt.key === Key.ArrowDown) {\n      newTransparency = this.props.alpha - (evt.ctrlKey ? 0.1 : 0.05);\n    } else if (evt.key === Key.ArrowRight || evt.key === Key.ArrowUp) {\n      newTransparency = this.props.alpha + (evt.ctrlKey ? 0.1 : 0.05);\n    } else if (evt.key === Key.PageDown) {\n      newTransparency = this.props.alpha - (evt.ctrlKey ? 0.5 : 0.25);\n    } else if (evt.key === Key.PageUp) {\n      newTransparency = this.props.alpha + (evt.ctrlKey ? 0.5 : 0.25);\n    } else if (evt.key === Key.Home) {\n      newTransparency = 0;\n    } else {\n      // istanbul ignore else\n      if (evt.key === Key.End) {\n        newTransparency = 1;\n      }\n    }\n\n    // istanbul ignore else\n    if (undefined !== newTransparency) {\n      // istanbul ignore if\n      if (newTransparency > 1) newTransparency = 1;\n      // istanbul ignore if\n      if (newTransparency < 0) newTransparency = 0;\n      // istanbul ignore else\n      if (this.props.onAlphaChange) this.props.onAlphaChange(newTransparency);\n    }\n  };\n\n  private _onMouseUp = () => {\n    this._unbindEventListeners();\n  };\n\n  private _unbindEventListeners() {\n    window.removeEventListener(\"mousemove\", this._onChange as any);\n    window.removeEventListener(\"mouseup\", this._onMouseUp);\n  }\n\n  /** @internal */\n  public override render(): React.ReactNode {\n    const containerClasses = classnames(\n      this.props.isHorizontal\n        ? \"components-alpha-container-horizontal\"\n        : \"components-alpha-container-vertical\",\n      this.props.className\n    );\n\n    const pointerStyle: React.CSSProperties = this.props.isHorizontal\n      ? { left: `${this.props.alpha * 100}%` }\n      : { left: `0px`, top: `${-(this.props.alpha * 100) + 100}%` };\n\n    return (\n      <div\n        className={containerClasses}\n        style={this.props.style}\n        data-testid=\"alpha-container\"\n      >\n        <div\n          data-testid=\"alpha-slider\"\n          role=\"slider\"\n          aria-label={this._transparencyLabel}\n          aria-valuemin={0}\n          aria-valuemax={1}\n          aria-valuenow={this.props.alpha}\n          className=\"components-alpha-slider\"\n          ref={(container) => (this._container = container)}\n          onMouseDown={this._onMouseDown}\n          onTouchMove={this._onChange}\n          onTouchStart={this._onChange}\n          tabIndex={0}\n          onKeyDown={this._onKeyDown}\n        >\n          <div\n            style={pointerStyle}\n            className=\"components-alpha-pointer\"\n            data-testid=\"alpha-pointer\"\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"AlphaSlider.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/AlphaSlider.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 *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\nimport \"./AlphaSlider.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\n/** Properties for the [[AlphaSlider]] React component\n * @public\n */\nexport interface AlphaSliderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    CommonProps {\n  /** true if slider is oriented horizontal, else vertical orientation is assumed */\n  isHorizontal?: boolean;\n  /** function to run when user selects color swatch */\n  onAlphaChange?: ((alpha: number) => void) | undefined;\n  /** Alpha value between 0 (transparent) and 1 (opaque) */\n  alpha: number;\n}\n\n/** AlphaSlider component used to set the alpha value.\n * @public\n */\nexport class AlphaSlider extends React.PureComponent<AlphaSliderProps> {\n  private _container: HTMLDivElement | null = null;\n  private _transparencyLabel =\n    UiIModelComponents.translate(\"color.transparency\");\n\n  /** @internal */\n  constructor(props: AlphaSliderProps) {\n    super(props);\n  }\n\n  private _calculateChange = (\n    e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n    isHorizontal: boolean,\n    alpha: number,\n    container: HTMLDivElement\n  ): number | undefined => {\n    e.preventDefault();\n    const { width: containerWidth, height: containerHeight } =\n      container.getBoundingClientRect();\n\n    let x = 0;\n    if (\"pageX\" in e) {\n      x = e.pageX;\n    } else {\n      // istanbul ignore if\n      if (undefined === e.touches) return undefined;\n      x = e.touches[0].pageX;\n    }\n    // istanbul ignore if\n    if (undefined === x) return undefined;\n\n    let y = 0;\n    if (\"pageY\" in e) {\n      y = e.pageY;\n    } else {\n      // istanbul ignore if\n      if (undefined === e.touches) return;\n      y = e.touches[0].pageY;\n    }\n    // istanbul ignore if\n    if (undefined === y) return undefined;\n\n    const left = x - (container.getBoundingClientRect().left + window.scrollX);\n    const top = y - (container.getBoundingClientRect().top + window.scrollY);\n\n    let t = 0;\n\n    if (!isHorizontal) {\n      // istanbul ignore next\n      if (top < 0) {\n        t = 1;\n      } else if (top > containerHeight) {\n        t = 0;\n      } else {\n        t = 1 - top / containerHeight;\n      }\n    } else {\n      // horizontal\n      // istanbul ignore next\n      if (left < 0) {\n        t = 0;\n      } else if (left > containerWidth) {\n        t = 1;\n      } else {\n        t = left / containerWidth;\n      }\n    }\n\n    // istanbul ignore if\n    if (t < 0) t = 0;\n    // istanbul ignore if\n    if (t > 1) t = 1;\n    // istanbul ignore next\n    return alpha !== t ? t : undefined;\n  };\n\n  /** @internal */\n  public override componentWillUnmount() {\n    this._unbindEventListeners();\n  }\n\n  private _onChange = (\n    e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n  ) => {\n    // istanbul ignore else\n    if (this._container && this.props.onAlphaChange) {\n      const change = this._calculateChange(\n        e,\n        this.props.isHorizontal ? this.props.isHorizontal : false,\n        this.props.alpha,\n        this._container\n      );\n      undefined !== change &&\n        typeof this.props.onAlphaChange === \"function\" &&\n        this.props.onAlphaChange(change);\n    }\n  };\n\n  private _onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n    this._onChange(e);\n    // istanbul ignore else\n    if (this._container) this._container.focus();\n    window.addEventListener(\"mousemove\", this._onChange as any);\n    window.addEventListener(\"mouseup\", this._onMouseUp);\n  };\n\n  private _onKeyDown = (evt: React.KeyboardEvent<HTMLDivElement>) => {\n    let newTransparency: number | undefined;\n    if (\n      evt.key === Key.ArrowLeft.valueOf() ||\n      evt.key === Key.ArrowDown.valueOf()\n    ) {\n      newTransparency = this.props.alpha - (evt.ctrlKey ? 0.1 : 0.05);\n    } else if (\n      evt.key === Key.ArrowRight.valueOf() ||\n      evt.key === Key.ArrowUp.valueOf()\n    ) {\n      newTransparency = this.props.alpha + (evt.ctrlKey ? 0.1 : 0.05);\n    } else if (evt.key === Key.PageDown.valueOf()) {\n      newTransparency = this.props.alpha - (evt.ctrlKey ? 0.5 : 0.25);\n    } else if (evt.key === Key.PageUp.valueOf()) {\n      newTransparency = this.props.alpha + (evt.ctrlKey ? 0.5 : 0.25);\n    } else if (evt.key === Key.Home.valueOf()) {\n      newTransparency = 0;\n    } else {\n      // istanbul ignore else\n      if (evt.key === Key.End.valueOf()) {\n        newTransparency = 1;\n      }\n    }\n\n    // istanbul ignore else\n    if (undefined !== newTransparency) {\n      // istanbul ignore if\n      if (newTransparency > 1) newTransparency = 1;\n      // istanbul ignore if\n      if (newTransparency < 0) newTransparency = 0;\n      // istanbul ignore else\n      if (this.props.onAlphaChange) this.props.onAlphaChange(newTransparency);\n    }\n  };\n\n  private _onMouseUp = () => {\n    this._unbindEventListeners();\n  };\n\n  private _unbindEventListeners() {\n    window.removeEventListener(\"mousemove\", this._onChange as any);\n    window.removeEventListener(\"mouseup\", this._onMouseUp);\n  }\n\n  /** @internal */\n  public override render(): React.ReactNode {\n    const containerClasses = classnames(\n      this.props.isHorizontal\n        ? \"components-alpha-container-horizontal\"\n        : \"components-alpha-container-vertical\",\n      this.props.className\n    );\n\n    const pointerStyle: React.CSSProperties = this.props.isHorizontal\n      ? { left: `${this.props.alpha * 100}%` }\n      : { left: `0px`, top: `${-(this.props.alpha * 100) + 100}%` };\n\n    return (\n      <div\n        className={containerClasses}\n        style={this.props.style}\n        data-testid=\"alpha-container\"\n      >\n        <div\n          data-testid=\"alpha-slider\"\n          role=\"slider\"\n          aria-label={this._transparencyLabel}\n          aria-valuemin={0}\n          aria-valuemax={1}\n          aria-valuenow={this.props.alpha}\n          className=\"components-alpha-slider\"\n          ref={(container) => (this._container = container)}\n          onMouseDown={this._onMouseDown}\n          onTouchMove={this._onChange}\n          onTouchStart={this._onChange}\n          tabIndex={0}\n          onKeyDown={this._onKeyDown}\n        >\n          <div\n            style={pointerStyle}\n            className=\"components-alpha-pointer\"\n            data-testid=\"alpha-pointer\"\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/lib/esm/imodel-components-react/color/HueSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HueSlider.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/HueSlider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgErD;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,WAAW;IACb,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACpD,sBAAsB;IACtB,GAAG,EAAE,QAAQ,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,WAAW,EACX,GAAG,EACH,SAAS,EACT,KAAK,GACN,EAAE,cAAc,qBAoLhB"}
+{"version":3,"file":"HueSlider.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/HueSlider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgErD;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,WAAW;IACb,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACpD,sBAAsB;IACtB,GAAG,EAAE,QAAQ,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,WAAW,EACX,GAAG,EACH,SAAS,EACT,KAAK,GACN,EAAE,cAAc,qBA0LhB"}

package/lib/esm/imodel-components-react/color/HueSlider.js

@@ -133,24 +133,26 @@ export function HueSlider({ isHorizontal, onHueChange, hsv, className, style, })
     const onKeyDown = React.useCallback((evt) => {
         let newHue;
         const hueValue = hsv.h;
-        if (evt.key === Key.ArrowLeft || evt.key === Key.ArrowDown) {
+        if (evt.key === Key.ArrowLeft.valueOf() ||
+            evt.key === Key.ArrowDown.valueOf()) {
             newHue = hueValue - (evt.ctrlKey ? 10 : 1);
         }
-        else if (evt.key === Key.ArrowRight || evt.key === Key.ArrowUp) {
+        else if (evt.key === Key.ArrowRight.valueOf() ||
+            evt.key === Key.ArrowUp.valueOf()) {
             newHue = hueValue + (evt.ctrlKey ? 10 : 1);
         }
-        else if (evt.key === Key.PageDown) {
+        else if (evt.key === Key.PageDown.valueOf()) {
             newHue = hueValue - (evt.ctrlKey ? 180 : 60);
         }
-        else if (evt.key === Key.PageUp) {
+        else if (evt.key === Key.PageUp.valueOf()) {
             newHue = hueValue + (evt.ctrlKey ? 180 : 60);
         }
-        else if (evt.key === Key.Home) {
+        else if (evt.key === Key.Home.valueOf()) {
             newHue = 0;
         }
         else {
             // istanbul ignore else
-            if (evt.key === Key.End) {
+            if (evt.key === Key.End.valueOf()) {
                 newHue = 359;
             }
         }

package/lib/esm/imodel-components-react/color/HueSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"HueSlider.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/HueSlider.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAGlC,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3D,+BAA+B;AAC/B,SAAS,YAAY,CAAC,UAAkB,EAAE,IAAY,EAAE,UAAmB;IACzE,uBAAuB;IACvB,IAAI,UAAU,IAAI,CAAC,EAAE;QACnB,OAAO,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;KAC7B;SAAM,IAAI,UAAU,IAAI,IAAI,EAAE;QAC7B,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;KAC7B;SAAM;QACL,IAAI,OAAO,GAAG,CAAC,UAAU,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;QACxC,IAAI,UAAU;YAAE,OAAO,GAAG,GAAG,GAAG,OAAO,CAAC;QACxC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC;KAC1C;AACH,CAAC;AAED,SAAS,eAAe,CACtB,UAAkB,EAClB,CAAsE,EACtE,YAAqB,EACrB,SAAyB;IAEzB,MAAM,EACJ,KAAK,EAAE,cAAc,EACrB,MAAM,EAAE,eAAe,EACvB,GAAG,EAAE,YAAY,EACjB,IAAI,EAAE,aAAa,GACpB,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;IAEtC,IAAI,CAAqB,CAAC;IAC1B,IAAI,OAAO,IAAI,CAAC,EAAE;QAChB,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;KACb;SAAM;QACL,qBAAqB;QACrB,IAAI,SAAS,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,MAAM;YAAE,OAAO,UAAU,CAAC;QACzE,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;KACxB;IACD,qBAAqB;IACrB,IAAI,SAAS,KAAK,CAAC;QAAE,OAAO,UAAU,CAAC;IAEvC,IAAI,CAAqB,CAAC;IAC1B,IAAI,OAAO,IAAI,CAAC,EAAE;QAChB,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;KACb;SAAM;QACL,qBAAqB;QACrB,IAAI,SAAS,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,MAAM;YAAE,OAAO,UAAU,CAAC;QACzE,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;KACxB;IACD,qBAAqB;IACrB,IAAI,SAAS,KAAK,CAAC;QAAE,OAAO,UAAU,CAAC;IAEvC,MAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACtD,MAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAErD,IAAI,CAAC,YAAY,EAAE;QACjB,WAAW;QACX,OAAO,YAAY,CAAC,QAAQ,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;KACtD;SAAM;QACL,aAAa;QACb,OAAO,YAAY,CAAC,QAAQ,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;KACtD;AACH,CAAC;AAgBD;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,YAAY,EACZ,WAAW,EACX,GAAG,EACH,SAAS,EACT,KAAK,GACU;IACf,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CACrC,kBAAkB,CAAC,SAAS,CAAC,WAAW,CAAC,CAC1C,CAAC;IACF,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAEvC,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAChC,CACE,CAAsE,EACtE,EAAE;QACF,uBAAuB;QACvB,IAAI,SAAS,CAAC,OAAO,EAAE;YACrB,MAAM,MAAM,GAAG,eAAe,CAC5B,GAAG,CAAC,CAAC,EACL,CAAC,EACD,CAAC,CAAC,YAAY,EACd,SAAS,CAAC,OAAO,CAClB,CAAC;YACF,uBAAuB;YACvB,MAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YACnC,uBAAuB;YACvB,IAAI,WAAW;gBAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;SACxC;IACH,CAAC,EACD,CAAC,YAAY,EAAE,GAAG,EAAE,WAAW,CAAC,CACjC,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,CACE,CAAsE,EACtE,EAAE;QACF,uBAAuB;QACvB,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,QAAQ,CAAC,CAAC,CAAC,CAAC;SACb;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACvC,uBAAuB;QACvB,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;SAC5B;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,CAAC,KAAuC,EAAE,EAAE;QAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,uBAAuB;QACvB,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;SAC5B;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,CAAmC,EAAE,EAAE;QACtC,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,uBAAuB;QACvB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE;YAChC,uBAAuB;YACvB,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;gBACvB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,EAAE;oBAC9C,OAAO,EAAE,IAAI;oBACb,IAAI,EAAE,IAAI;iBACX,CAAC,CAAC;gBACH,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;aAC3B;SACF;QAED,QAAQ,CAAC,CAAC,CAAC,CAAC;QAEZ,uBAAuB;QACvB,IAAI,SAAS,CAAC,OAAO;YAAE,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACnD,CAAC,EACD,CAAC,QAAQ,EAAE,SAAS,CAAC,CACtB,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,CAAmC,EAAE,EAAE;QACtC,uBAAuB;QACvB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa;YAAE,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAE5D,QAAQ,CAAC,CAAC,CAAC,CAAC;QAEZ,uBAAuB;QACvB,IAAI,SAAS,CAAC,OAAO;YAAE,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACnD,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,GAAwC,EAAE,EAAE;QAC3C,IAAI,MAA0B,CAAC;QAC/B,MAAM,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC;QACvB,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,SAAS,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,SAAS,EAAE;YAC1D,MAAM,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC5C;aAAM,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,UAAU,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,OAAO,EAAE;YAChE,MAAM,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC5C;aAAM,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,QAAQ,EAAE;YACnC,MAAM,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SAC9C;aAAM,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,MAAM,EAAE;YACjC,MAAM,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SAC9C;aAAM,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,EAAE;YAC/B,MAAM,GAAG,CAAC,CAAC;SACZ;aAAM;YACL,uBAAuB;YACvB,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,EAAE;gBACvB,MAAM,GAAG,GAAG,CAAC;aACd;SACF;QAED,uBAAuB;QACvB,IAAI,SAAS,KAAK,MAAM,EAAE;YACxB,qBAAqB;YACrB,IAAI,MAAM,GAAG,GAAG;gBAAE,MAAM,GAAG,GAAG,CAAC,CAAC,sBAAsB;YACtD,qBAAqB;YACrB,IAAI,MAAM,GAAG,CAAC;gBAAE,MAAM,GAAG,CAAC,CAAC;YAE3B,MAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YACnC,uBAAuB;YACvB,IAAI,WAAW;gBAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;YACvC,GAAG,CAAC,cAAc,EAAE,CAAC;SACtB;IACH,CAAC,EACD,CAAC,GAAG,EAAE,WAAW,CAAC,CACnB,CAAC;IAEF,MAAM,gBAAgB,GAAG,UAAU,CACjC,YAAY;QACV,CAAC,CAAC,qCAAqC;QACvC,CAAC,CAAC,mCAAmC,EACvC,SAAS,CACV,CAAC;IAEF,MAAM,YAAY,GAAwB,YAAY;QACpD,CAAC,CAAC;YACE,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG;YAC/B,eAAe,EAAE,OAAO,GAAG,CAAC,CAAC,cAAc;SAC5C;QACH,CAAC,CAAC;YACE,IAAI,EAAE,KAAK;YACX,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG;YACvC,eAAe,EAAE,OAAO,GAAG,CAAC,CAAC,cAAc;SAC5C,CAAC;IAEN,OAAO,CACL,6BAAK,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,KAAK,iBAAc,eAAe;QACzE,4CACc,YAAY,EACxB,IAAI,EAAC,QAAQ,gBACD,QAAQ,mBACL,CAAC,mBACD,GAAG,mBACH,GAAG,CAAC,CAAC,EACpB,SAAS,EAAC,uBAAuB,EACjC,GAAG,EAAE,SAAS,EACd,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,UAAU,EACvB,WAAW,EAAE,UAAU,EACvB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,SAAS;YAEpB,6BACE,KAAK,EAAE,YAAY,EACnB,SAAS,EAAC,wBAAwB,iBACtB,aAAa,GACzB,CACE,CACF,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 Color\n */\n\nimport \"./HueSlider.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport type { HSVColor } from \"@itwin/core-common\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\n// hue is a value from 0 to 360\nfunction calculateHue(currentPos: number, high: number, isVertical: boolean) {\n  // istanbul ignore next\n  if (currentPos <= 0) {\n    return isVertical ? 359 : 0;\n  } else if (currentPos >= high) {\n    return isVertical ? 0 : 359;\n  } else {\n    let percent = (currentPos * 100) / high;\n    if (isVertical) percent = 100 - percent;\n    return Math.round((359 * percent) / 100);\n  }\n}\n\nfunction calculateChange(\n  currentHue: number,\n  e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  isHorizontal: boolean,\n  container: HTMLDivElement\n) {\n  const {\n    width: containerWidth,\n    height: containerHeight,\n    top: containerTop,\n    left: containerLeft,\n  } = container.getBoundingClientRect();\n\n  let x: number | undefined;\n  if (\"pageX\" in e) {\n    x = e.pageX;\n  } else {\n    // istanbul ignore if\n    if (undefined === e.touches || 0 === e.touches.length) return currentHue;\n    x = e.touches[0].pageX;\n  }\n  // istanbul ignore if\n  if (undefined === x) return currentHue;\n\n  let y: number | undefined;\n  if (\"pageY\" in e) {\n    y = e.pageY;\n  } else {\n    // istanbul ignore if\n    if (undefined === e.touches || 0 === e.touches.length) return currentHue;\n    y = e.touches[0].pageY;\n  }\n  // istanbul ignore if\n  if (undefined === y) return currentHue;\n\n  const pointerX = x - (containerLeft + window.scrollX);\n  const pointerY = y - (containerTop + window.scrollY);\n\n  if (!isHorizontal) {\n    // vertical\n    return calculateHue(pointerY, containerHeight, true);\n  } else {\n    // horizontal\n    return calculateHue(pointerX, containerWidth, false);\n  }\n}\n\n/** Properties for the [[HueSlider]] React component\n * @beta\n */\nexport interface HueSliderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    CommonProps {\n  /** true if slider is oriented horizontal, else vertical orientation is assumed */\n  isHorizontal?: boolean;\n  /** function to run when user hue is changed */\n  onHueChange?: ((hue: HSVColor) => void) | undefined;\n  /** HSV Color Value */\n  hsv: HSVColor;\n}\n\n/** HueSlider component used to set the hue value.\n * @beta\n */\nexport function HueSlider({\n  isHorizontal,\n  onHueChange,\n  hsv,\n  className,\n  style,\n}: HueSliderProps) {\n  const container = React.useRef<HTMLDivElement>(null);\n  const [hueLabel] = React.useState(() =>\n    UiIModelComponents.translate(\"color.hue\")\n  );\n  const isDragging = React.useRef(false);\n\n  const onChange = React.useCallback(\n    (\n      e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n    ) => {\n      // istanbul ignore else\n      if (container.current) {\n        const newHue = calculateChange(\n          hsv.h,\n          e,\n          !!isHorizontal,\n          container.current\n        );\n        // istanbul ignore else\n        const newColor = hsv.clone(newHue);\n        // istanbul ignore else\n        if (onHueChange) onHueChange(newColor);\n      }\n    },\n    [isHorizontal, hsv, onHueChange]\n  );\n\n  const onDragging = React.useCallback(\n    (\n      e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n    ) => {\n      // istanbul ignore else\n      if (isDragging.current) {\n        onChange(e);\n      }\n    },\n    [onChange]\n  );\n\n  const onMouseUp = React.useCallback(() => {\n    // istanbul ignore else\n    if (isDragging.current) {\n      isDragging.current = false;\n    }\n  }, []);\n\n  const onTouchEnd = React.useCallback(\n    (event: React.TouchEvent<HTMLDivElement>) => {\n      event.preventDefault();\n\n      // istanbul ignore else\n      if (isDragging.current) {\n        onChange(event);\n        isDragging.current = false;\n      }\n    },\n    [onChange]\n  );\n\n  const onMouseDown = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      e.preventDefault();\n\n      // istanbul ignore else\n      if (e.target !== e.currentTarget) {\n        // istanbul ignore else\n        if (!isDragging.current) {\n          document.addEventListener(\"mouseup\", onMouseUp, {\n            capture: true,\n            once: true,\n          });\n          isDragging.current = true;\n        }\n      }\n\n      onChange(e);\n\n      // istanbul ignore else\n      if (container.current) container.current.focus();\n    },\n    [onChange, onMouseUp]\n  );\n\n  const onTouchStart = React.useCallback(\n    (e: React.TouchEvent<HTMLDivElement>) => {\n      // istanbul ignore else\n      if (e.target !== e.currentTarget) isDragging.current = true;\n\n      onChange(e);\n\n      // istanbul ignore else\n      if (container.current) container.current.focus();\n    },\n    [onChange]\n  );\n\n  const onKeyDown = React.useCallback(\n    (evt: React.KeyboardEvent<HTMLDivElement>) => {\n      let newHue: number | undefined;\n      const hueValue = hsv.h;\n      if (evt.key === Key.ArrowLeft || evt.key === Key.ArrowDown) {\n        newHue = hueValue - (evt.ctrlKey ? 10 : 1);\n      } else if (evt.key === Key.ArrowRight || evt.key === Key.ArrowUp) {\n        newHue = hueValue + (evt.ctrlKey ? 10 : 1);\n      } else if (evt.key === Key.PageDown) {\n        newHue = hueValue - (evt.ctrlKey ? 180 : 60);\n      } else if (evt.key === Key.PageUp) {\n        newHue = hueValue + (evt.ctrlKey ? 180 : 60);\n      } else if (evt.key === Key.Home) {\n        newHue = 0;\n      } else {\n        // istanbul ignore else\n        if (evt.key === Key.End) {\n          newHue = 359;\n        }\n      }\n\n      // istanbul ignore else\n      if (undefined !== newHue) {\n        // istanbul ignore if\n        if (newHue > 359) newHue = 359; // 360 is same as zero\n        // istanbul ignore if\n        if (newHue < 0) newHue = 0;\n\n        const newColor = hsv.clone(newHue);\n        // istanbul ignore else\n        if (onHueChange) onHueChange(newColor);\n        evt.preventDefault();\n      }\n    },\n    [hsv, onHueChange]\n  );\n\n  const containerClasses = classnames(\n    isHorizontal\n      ? \"components-hue-container-horizontal\"\n      : \"components-hue-container-vertical\",\n    className\n  );\n\n  const pointerStyle: React.CSSProperties = isHorizontal\n    ? {\n        left: `${(hsv.h * 100) / 360}%`,\n        backgroundColor: `hsl(${hsv.h} ,100%, 50%)`,\n      }\n    : {\n        left: `0px`,\n        top: `${-((hsv.h * 100) / 360) + 100}%`,\n        backgroundColor: `hsl(${hsv.h} ,100%, 50%)`,\n      };\n\n  return (\n    <div className={containerClasses} style={style} data-testid=\"hue-container\">\n      <div\n        data-testid=\"hue-slider\"\n        role=\"slider\"\n        aria-label={hueLabel}\n        aria-valuemin={0}\n        aria-valuemax={360}\n        aria-valuenow={hsv.h}\n        className=\"components-hue-slider\"\n        ref={container}\n        onMouseDown={onMouseDown}\n        onMouseMove={onDragging}\n        onTouchMove={onDragging}\n        onMouseUp={onMouseUp}\n        onTouchStart={onTouchStart}\n        onTouchEnd={onTouchEnd}\n        tabIndex={0}\n        onKeyDown={onKeyDown}\n      >\n        <div\n          style={pointerStyle}\n          className=\"components-hue-pointer\"\n          data-testid=\"hue-pointer\"\n        />\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"HueSlider.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/HueSlider.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 *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\nimport \"./HueSlider.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport type { HSVColor } from \"@itwin/core-common\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\n// hue is a value from 0 to 360\nfunction calculateHue(currentPos: number, high: number, isVertical: boolean) {\n  // istanbul ignore next\n  if (currentPos <= 0) {\n    return isVertical ? 359 : 0;\n  } else if (currentPos >= high) {\n    return isVertical ? 0 : 359;\n  } else {\n    let percent = (currentPos * 100) / high;\n    if (isVertical) percent = 100 - percent;\n    return Math.round((359 * percent) / 100);\n  }\n}\n\nfunction calculateChange(\n  currentHue: number,\n  e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  isHorizontal: boolean,\n  container: HTMLDivElement\n) {\n  const {\n    width: containerWidth,\n    height: containerHeight,\n    top: containerTop,\n    left: containerLeft,\n  } = container.getBoundingClientRect();\n\n  let x: number | undefined;\n  if (\"pageX\" in e) {\n    x = e.pageX;\n  } else {\n    // istanbul ignore if\n    if (undefined === e.touches || 0 === e.touches.length) return currentHue;\n    x = e.touches[0].pageX;\n  }\n  // istanbul ignore if\n  if (undefined === x) return currentHue;\n\n  let y: number | undefined;\n  if (\"pageY\" in e) {\n    y = e.pageY;\n  } else {\n    // istanbul ignore if\n    if (undefined === e.touches || 0 === e.touches.length) return currentHue;\n    y = e.touches[0].pageY;\n  }\n  // istanbul ignore if\n  if (undefined === y) return currentHue;\n\n  const pointerX = x - (containerLeft + window.scrollX);\n  const pointerY = y - (containerTop + window.scrollY);\n\n  if (!isHorizontal) {\n    // vertical\n    return calculateHue(pointerY, containerHeight, true);\n  } else {\n    // horizontal\n    return calculateHue(pointerX, containerWidth, false);\n  }\n}\n\n/** Properties for the [[HueSlider]] React component\n * @beta\n */\nexport interface HueSliderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    CommonProps {\n  /** true if slider is oriented horizontal, else vertical orientation is assumed */\n  isHorizontal?: boolean;\n  /** function to run when user hue is changed */\n  onHueChange?: ((hue: HSVColor) => void) | undefined;\n  /** HSV Color Value */\n  hsv: HSVColor;\n}\n\n/** HueSlider component used to set the hue value.\n * @beta\n */\nexport function HueSlider({\n  isHorizontal,\n  onHueChange,\n  hsv,\n  className,\n  style,\n}: HueSliderProps) {\n  const container = React.useRef<HTMLDivElement>(null);\n  const [hueLabel] = React.useState(() =>\n    UiIModelComponents.translate(\"color.hue\")\n  );\n  const isDragging = React.useRef(false);\n\n  const onChange = React.useCallback(\n    (\n      e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n    ) => {\n      // istanbul ignore else\n      if (container.current) {\n        const newHue = calculateChange(\n          hsv.h,\n          e,\n          !!isHorizontal,\n          container.current\n        );\n        // istanbul ignore else\n        const newColor = hsv.clone(newHue);\n        // istanbul ignore else\n        if (onHueChange) onHueChange(newColor);\n      }\n    },\n    [isHorizontal, hsv, onHueChange]\n  );\n\n  const onDragging = React.useCallback(\n    (\n      e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n    ) => {\n      // istanbul ignore else\n      if (isDragging.current) {\n        onChange(e);\n      }\n    },\n    [onChange]\n  );\n\n  const onMouseUp = React.useCallback(() => {\n    // istanbul ignore else\n    if (isDragging.current) {\n      isDragging.current = false;\n    }\n  }, []);\n\n  const onTouchEnd = React.useCallback(\n    (event: React.TouchEvent<HTMLDivElement>) => {\n      event.preventDefault();\n\n      // istanbul ignore else\n      if (isDragging.current) {\n        onChange(event);\n        isDragging.current = false;\n      }\n    },\n    [onChange]\n  );\n\n  const onMouseDown = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      e.preventDefault();\n\n      // istanbul ignore else\n      if (e.target !== e.currentTarget) {\n        // istanbul ignore else\n        if (!isDragging.current) {\n          document.addEventListener(\"mouseup\", onMouseUp, {\n            capture: true,\n            once: true,\n          });\n          isDragging.current = true;\n        }\n      }\n\n      onChange(e);\n\n      // istanbul ignore else\n      if (container.current) container.current.focus();\n    },\n    [onChange, onMouseUp]\n  );\n\n  const onTouchStart = React.useCallback(\n    (e: React.TouchEvent<HTMLDivElement>) => {\n      // istanbul ignore else\n      if (e.target !== e.currentTarget) isDragging.current = true;\n\n      onChange(e);\n\n      // istanbul ignore else\n      if (container.current) container.current.focus();\n    },\n    [onChange]\n  );\n\n  const onKeyDown = React.useCallback(\n    (evt: React.KeyboardEvent<HTMLDivElement>) => {\n      let newHue: number | undefined;\n      const hueValue = hsv.h;\n      if (\n        evt.key === Key.ArrowLeft.valueOf() ||\n        evt.key === Key.ArrowDown.valueOf()\n      ) {\n        newHue = hueValue - (evt.ctrlKey ? 10 : 1);\n      } else if (\n        evt.key === Key.ArrowRight.valueOf() ||\n        evt.key === Key.ArrowUp.valueOf()\n      ) {\n        newHue = hueValue + (evt.ctrlKey ? 10 : 1);\n      } else if (evt.key === Key.PageDown.valueOf()) {\n        newHue = hueValue - (evt.ctrlKey ? 180 : 60);\n      } else if (evt.key === Key.PageUp.valueOf()) {\n        newHue = hueValue + (evt.ctrlKey ? 180 : 60);\n      } else if (evt.key === Key.Home.valueOf()) {\n        newHue = 0;\n      } else {\n        // istanbul ignore else\n        if (evt.key === Key.End.valueOf()) {\n          newHue = 359;\n        }\n      }\n\n      // istanbul ignore else\n      if (undefined !== newHue) {\n        // istanbul ignore if\n        if (newHue > 359) newHue = 359; // 360 is same as zero\n        // istanbul ignore if\n        if (newHue < 0) newHue = 0;\n\n        const newColor = hsv.clone(newHue);\n        // istanbul ignore else\n        if (onHueChange) onHueChange(newColor);\n        evt.preventDefault();\n      }\n    },\n    [hsv, onHueChange]\n  );\n\n  const containerClasses = classnames(\n    isHorizontal\n      ? \"components-hue-container-horizontal\"\n      : \"components-hue-container-vertical\",\n    className\n  );\n\n  const pointerStyle: React.CSSProperties = isHorizontal\n    ? {\n        left: `${(hsv.h * 100) / 360}%`,\n        backgroundColor: `hsl(${hsv.h} ,100%, 50%)`,\n      }\n    : {\n        left: `0px`,\n        top: `${-((hsv.h * 100) / 360) + 100}%`,\n        backgroundColor: `hsl(${hsv.h} ,100%, 50%)`,\n      };\n\n  return (\n    <div className={containerClasses} style={style} data-testid=\"hue-container\">\n      <div\n        data-testid=\"hue-slider\"\n        role=\"slider\"\n        aria-label={hueLabel}\n        aria-valuemin={0}\n        aria-valuemax={360}\n        aria-valuenow={hsv.h}\n        className=\"components-hue-slider\"\n        ref={container}\n        onMouseDown={onMouseDown}\n        onMouseMove={onDragging}\n        onTouchMove={onDragging}\n        onMouseUp={onMouseUp}\n        onTouchStart={onTouchStart}\n        onTouchEnd={onTouchEnd}\n        tabIndex={0}\n        onKeyDown={onKeyDown}\n      >\n        <div\n          style={pointerStyle}\n          className=\"components-hue-pointer\"\n          data-testid=\"hue-pointer\"\n        />\n      </div>\n    </div>\n  );\n}\n"]}