@itwin/imodel-components-react 4.17.6 → 5.0.0-dev.3

package/lib/imodel-components-react/quantityformat/misc/ThousandsSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThousandsSeparator.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/misc/ThousandsSeparator.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 QuantityFormat\n */\n\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport type { FormatProps } from \"@itwin/core-quantity\";\nimport { Format, FormatTraits, getTraitString } from \"@itwin/core-quantity\";\nimport { Checkbox } from \"@itwin/itwinui-react\";\nimport { ThousandsSelector } from \"./ThousandsSelector.js\";\nimport { useTranslation } from \"../../useTranslation.js\";\n\n/** Properties of [[ThousandsSeparator]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface ThousandsSeparatorProps extends CommonProps {\n  formatProps: FormatProps;\n  onChange?: (format: FormatProps) => void;\n}\n\n/** Component use to set Quantity Format thousand group separator.\n * @internal\n */\nexport function ThousandsSeparator(props: ThousandsSeparatorProps) {\n  const { formatProps, onChange } = props;\n  const { translate } = useTranslation();\n\n  const handleSetFormatProps = React.useCallback(\n    (newProps: FormatProps) => {\n      onChange && onChange(newProps);\n    },\n    [onChange]\n  );\n\n  const setFormatTrait = React.useCallback(\n    (trait: FormatTraits, setActive: boolean) => {\n      const traitStr = getTraitString(trait);\n      let formatTraits: string[] = [traitStr];\n      if (setActive) {\n        // setting trait\n        if (formatProps.formatTraits) {\n          const traits = Array.isArray(formatProps.formatTraits)\n            ? formatProps.formatTraits\n            : formatProps.formatTraits.split(/,|;|\\|/);\n          formatTraits = [...traits, traitStr];\n        }\n      } else {\n        // clearing trait\n        if (formatProps.formatTraits) {\n          const traits = Array.isArray(formatProps.formatTraits)\n            ? formatProps.formatTraits\n            : formatProps.formatTraits.split(/,|;|\\|/);\n          formatTraits = traits.filter((traitEntry) => traitEntry !== traitStr);\n        }\n      }\n      const newFormatProps = { ...formatProps, formatTraits };\n      handleSetFormatProps(newFormatProps);\n    },\n    [formatProps, handleSetFormatProps]\n  );\n\n  const handleUseThousandsSeparatorChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setFormatTrait(FormatTraits.Use1000Separator, e.target.checked);\n    },\n    [setFormatTrait]\n  );\n\n  const isFormatTraitSet = React.useCallback(\n    (trait: FormatTraits) => {\n      return Format.isFormatTraitSetInProps(formatProps, trait);\n    },\n    [formatProps]\n  );\n\n  const handleThousandSeparatorChange = React.useCallback(\n    (thousandSeparator: string) => {\n      let decimalSeparator = formatProps.decimalSeparator;\n      // make sure 1000 and decimal separator do not match\n      if (isFormatTraitSet(FormatTraits.Use1000Separator)) {\n        if (thousandSeparator === \".\") decimalSeparator = \",\";\n        // thousandSeparator === \",\"\n        else decimalSeparator = \".\";\n      }\n      const newFormatProps = {\n        ...formatProps,\n        thousandSeparator,\n        decimalSeparator,\n      };\n      handleSetFormatProps(newFormatProps);\n    },\n    [formatProps, isFormatTraitSet, handleSetFormatProps]\n  );\n\n  return (\n    <>\n      <span className={\"uicore-label\"}>\n        {translate(\"QuantityFormat.labels.useThousandSeparatorLabel\")}\n      </span>\n      <Checkbox\n        data-testid=\"use-thousands-separator\"\n        checked={isFormatTraitSet(FormatTraits.Use1000Separator)}\n        onChange={handleUseThousandsSeparatorChange}\n      />\n      <span\n        className={classnames(\n          \"uicore-label\",\n          !isFormatTraitSet(FormatTraits.Use1000Separator) && \"uicore-disabled\"\n        )}\n      >\n        {translate(\"QuantityFormat.labels.thousandSeparatorLabel\")}\n      </span>\n      <ThousandsSelector\n        data-testid=\"thousands-separator-selector\"\n        separator={formatProps.thousandSeparator ?? \",\"}\n        disabled={!isFormatTraitSet(FormatTraits.Use1000Separator)}\n        onChange={handleThousandSeparatorChange}\n      />\n    </>\n  );\n}\n"]}

package/lib/imodel-components-react/quantityformat/misc/UnitDescr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnitDescr.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/misc/UnitDescr.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAa,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD;;GAEG;AAEH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AA8CD;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAmH9C"}

package/lib/imodel-components-react/quantityformat/misc/UnitDescr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnitDescr.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/misc/UnitDescr.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAiBrD,KAAK,UAAU,qBAAqB,CAClC,aAA0B,EAC1B,MAAiB,EACjB,aAA4B;IAE5B,MAAM,qBAAqB,GAAG,aAAa,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE;QAC7D,MAAM,UAAU,GAAG,MAAM,aAAa,CAAC,aAAa,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QACnE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACzC,CAAC,CAAC,CAAC;IACH,OAAO,qBAAqB,CAAC;AAC/B,CAAC;AAED,KAAK,UAAU,gBAAgB,CAC7B,UAAqB,EACrB,aAA4B,EAC5B,yBAAkC;IAElC,MAAM,UAAU,GAAG,UAAU,CAAC,UAAU,CAAC;IACzC,MAAM,aAAa,GAAG,MAAM,aAAa,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACvE,IAAI,CAAC,yBAAyB;QAAE,OAAO,aAAa,CAAC;IAErD,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CACpD,aAAa,EACb,UAAU,EACV,aAAa,CACd,CAAC;IACF,MAAM,iBAAiB,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAChE,qFAAqF;IACrF,OAAO,iBAAiB;SACrB,MAAM,CACL,CAAC,KAAK,EAAE,EAAE,CACR,KAAK,CAAC,SAAS,CAAC,MAAM,KAAK,UAAU,CAAC,MAAM;QAC5C,KAAK,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAC9B;SACA,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC;SACzD,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;AACrC,CAAC;AAED,SAAS,WAAW,CAAC,YAAoB;IACvC,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7C,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACjE,MAAM,KAAK,CAAC,2BAA2B,CAAC,CAAC;AAC3C,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EACJ,IAAI,EACJ,KAAK,EACL,cAAc,EACd,KAAK,EACL,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,aAAa,GACd,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAyB;QAC3E,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,EAAE;KAC1C,CAAC,CAAC;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;IACtE,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAEtC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;QACzB,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;QAC5B,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,KAAK,UAAU,4BAA4B;YACzC,MAAM,gBAAgB,GAAG,MAAM,aAAa,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;YAClE,MAAM,UAAU,GAAG,MAAM,aAAa,CAAC,cAAc,CACnD,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CACvC,CAAC;YACF,IAAI,UAAU,IAAI,gBAAgB,EAAE,CAAC;gBACnC,IAAI,gBAAuC,CAAC;gBAC5C,MAAM,cAAc,GAAG,MAAM,gBAAgB,CAC3C,UAAU,EACV,aAAa,EACb,KAAK,KAAK,CAAC,CACZ,CAAC;gBACF,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;oBACd,MAAM,iBAAiB,GAAG,MAAM,gBAAgB,CAC9C,gBAAgB,EAChB,aAAa,EACb,IAAI,CACL,CAAC;oBACF,IAAI,iBAAiB,CAAC,MAAM;wBAAE,gBAAgB,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC;gBACxE,CAAC;gBAED,MAAM,OAAO,GACX,cAAc,CAAC,MAAM,GAAG,CAAC;oBACvB,CAAC,CAAC,cAAc;yBACX,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE;wBACjB,OAAO;4BACL,KAAK,EAAE,GAAG,SAAS,CAAC,IAAI,IAAI,SAAS,CAAC,KAAK,EAAE;4BAC7C,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC;yBACnC,CAAC;oBACJ,CAAC,CAAC;yBACD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;oBACnD,CAAC,CAAC;wBACE;4BACE,KAAK,EAAE,GAAG,gBAAgB,CAAC,IAAI,IAAI,gBAAgB,CAAC,KAAK,EAAE;4BAC3D,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC;yBACzB;qBACF,CAAC;gBAER,IAAI,gBAAgB,EAAE,CAAC;oBACrB,6EAA6E;oBAC7E,OAAO,CAAC,IAAI,CAAC;wBACX,KAAK,EAAE,cAAc,gBAAgB,CAAC,IAAI,IAAI,gBAAgB,CAAC,KAAK,EAAE;wBACtE,KAAK,EAAE,cAAc;qBACtB,CAAC,CAAC,CAAC,mBAAmB;gBACzB,CAAC;gBAED,IAAI,KAAK,KAAK,CAAC;oBAAE,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,mBAAmB;gBAE5F,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;oBACtB,cAAc,CAAC,OAAO,CAAC,CAAC;oBACxB,cAAc,CAAC,gBAAgB,CAAC,CAAC;gBACnC,CAAC;YACH,CAAC;QACH,CAAC;QACD,KAAK,4BAA4B,EAAE,CAAC;IACtC,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE,aAAa,CAAC,CAAC,CAAC;IAExD,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAC1C,CAAC,QAAgB,EAAE,EAAE;QACnB,YAAY,IAAI,YAAY,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAChD,CAAC,EACD,CAAC,KAAK,EAAE,YAAY,CAAC,CACtB,CAAC;IAEF,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAC3C,CAAC,CAAsC,EAAE,EAAE;QACzC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,aAAa,IAAI,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IACxD,CAAC,EACD,CAAC,KAAK,EAAE,aAAa,CAAC,CACvB,CAAC;IAEF,OAAO,CACL;QACE,oBAAC,MAAM,IACL,OAAO,EAAE,WAAW,iBACP,QAAQ,WAAW,CAAC,IAAI,EAAE,EACvC,KAAK,EAAE,GAAG,WAAW,CAAC,IAAI,IAAI,WAAW,CAAC,KAAK,EAAE,EACjD,QAAQ,EAAE,kBAAkB,EAC5B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,OAAO,GACZ;QACF,oBAAC,KAAK,mBACS,cAAc,WAAW,CAAC,IAAI,EAAE,EAC7C,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,mBAAmB,EAC7B,IAAI,EAAC,OAAO,GACZ,CACD,CACJ,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 QuantityFormat\n */\n\nimport * as React from \"react\";\nimport type { UnitProps, UnitsProvider } from \"@itwin/core-quantity\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nimport { Input, Select } from \"@itwin/itwinui-react\";\n\n/** Properties of [[UnitDescr]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface UnitDescrProps extends CommonProps {\n  name: string;\n  parentUnitName?: string;\n  label: string;\n  index: number;\n  unitsProvider: UnitsProvider;\n  readonly?: boolean;\n  onUnitChange: (value: string, index: number) => void;\n  onLabelChange: (value: string, index: number) => void;\n}\n\nasync function getUnitConversionData(\n  possibleUnits: UnitProps[],\n  toUnit: UnitProps,\n  unitsProvider: UnitsProvider\n) {\n  const unitConversionEntries = possibleUnits.map(async (unit) => {\n    const conversion = await unitsProvider.getConversion(unit, toUnit);\n    return { conversion, unitProps: unit };\n  });\n  return unitConversionEntries;\n}\n\nasync function getPossibleUnits(\n  parentUnit: UnitProps,\n  unitsProvider: UnitsProvider,\n  ensureCompatibleComposite: boolean\n) {\n  const phenomenon = parentUnit.phenomenon;\n  const possibleUnits = await unitsProvider.getUnitsByFamily(phenomenon);\n  if (!ensureCompatibleComposite) return possibleUnits;\n\n  const conversionPromises = await getUnitConversionData(\n    possibleUnits,\n    parentUnit,\n    unitsProvider\n  );\n  const conversionEntries = await Promise.all(conversionPromises);\n  // sort the entries so the best potential sub unit will be the first one in the array\n  return conversionEntries\n    .filter(\n      (entry) =>\n        entry.unitProps.system === parentUnit.system &&\n        entry.conversion.factor < 1\n    )\n    .sort((a, b) => b.conversion.factor - a.conversion.factor)\n    .map((value) => value.unitProps);\n}\n\nfunction getUnitName(fullUnitName: string) {\n  const nameParts = fullUnitName.split(/[.:]/);\n  if (nameParts.length > 0) return nameParts[nameParts.length - 1];\n  throw Error(\"Bad unit name encountered\");\n}\n\n/** Component use to display dropdown list of possible units.\n * @internal\n */\nexport function UnitDescr(props: UnitDescrProps) {\n  const {\n    name,\n    label,\n    parentUnitName,\n    index,\n    onUnitChange,\n    onLabelChange,\n    readonly,\n    unitsProvider,\n  } = props;\n  const [unitOptions, setUnitOptions] = React.useState<SelectOption<string>[]>([\n    { value: name, label: getUnitName(name) },\n  ]);\n  const [currentUnit, setCurrentUnit] = React.useState({ name, label });\n  const isMounted = React.useRef(false);\n\n  React.useEffect(() => {\n    isMounted.current = true;\n    return () => {\n      isMounted.current = false;\n    };\n  });\n\n  React.useEffect(() => {\n    async function fetchAllowableUnitSelections() {\n      const currentUnitProps = await unitsProvider.findUnitByName(name);\n      const parentUnit = await unitsProvider.findUnitByName(\n        parentUnitName ? parentUnitName : name\n      );\n      if (parentUnit && currentUnitProps) {\n        let potentialSubUnit: UnitProps | undefined;\n        const potentialUnits = await getPossibleUnits(\n          parentUnit,\n          unitsProvider,\n          index !== 0\n        );\n        if (index < 3) {\n          const potentialSubUnits = await getPossibleUnits(\n            currentUnitProps,\n            unitsProvider,\n            true\n          );\n          if (potentialSubUnits.length) potentialSubUnit = potentialSubUnits[0];\n        }\n\n        const options =\n          potentialUnits.length > 0\n            ? potentialUnits\n                .map((unitValue) => {\n                  return {\n                    value: `${unitValue.name}:${unitValue.label}`,\n                    label: getUnitName(unitValue.name),\n                  };\n                })\n                .sort((a, b) => a.label.localeCompare(b.label))\n            : [\n                {\n                  value: `${currentUnitProps.name}:${currentUnitProps.label}`,\n                  label: getUnitName(name),\n                },\n              ];\n\n        if (potentialSubUnit) {\n          // construct an entry that will provide the name and label of the unit to add\n          options.push({\n            value: `ADDSUBUNIT:${potentialSubUnit.name}:${potentialSubUnit.label}`,\n            label: \"Add sub-unit\",\n          }); // NEEDSWORK - i18n\n        }\n\n        if (index !== 0) options.push({ value: \"REMOVEUNIT\", label: \"Remove\" }); // NEEDSWORK - i18n\n\n        if (isMounted.current) {\n          setUnitOptions(options);\n          setCurrentUnit(currentUnitProps);\n        }\n      }\n    }\n    void fetchAllowableUnitSelections();\n  }, [index, label, name, parentUnitName, unitsProvider]);\n\n  const handleOnUnitChange = React.useCallback(\n    (newValue: string) => {\n      onUnitChange && onUnitChange(newValue, index);\n    },\n    [index, onUnitChange]\n  );\n\n  const handleOnLabelChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      e.preventDefault();\n      onLabelChange && onLabelChange(e.target.value, index);\n    },\n    [index, onLabelChange]\n  );\n\n  return (\n    <>\n      <Select\n        options={unitOptions}\n        data-testid={`unit-${currentUnit.name}`}\n        value={`${currentUnit.name}:${currentUnit.label}`}\n        onChange={handleOnUnitChange}\n        disabled={readonly}\n        size=\"small\"\n      />\n      <Input\n        data-testid={`unit-label-${currentUnit.name}`}\n        value={label}\n        onChange={handleOnLabelChange}\n        size=\"small\"\n      />\n    </>\n  );\n}\n"]}

package/lib/{cjs/imodel-components-react → imodel-components-react}/timeline/BaseSolarDataProvider.d.ts

@@ -3,7 +3,7 @@
  */
 import { Cartographic, ColorDef } from "@itwin/core-common";
 import type { IModelConnection, ScreenViewport } from "@itwin/core-frontend";
-import type { SolarDataProvider } from "./interfaces";
+import type { SolarDataProvider } from "./interfaces.js";
 /** Base class that provides solar data for animation control
  * @alpha
  */

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSolarDataProvider.d.ts","sourceRoot":"","sources":["../../../src/imodel-components-react/timeline/BaseSolarDataProvider.ts"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,EAEL,YAAY,EAEZ,QAAQ,EACT,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC7E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAOzD;;GAEG;AACH,qBAAa,qBAAsB,YAAW,iBAAiB;IAC7D,SAAS,CAAC,sBAAsB,EAAE,MAAM,CAAC;IACzC,SAAS,CAAC,SAAS,EAAE,cAAc,GAAG,SAAS,CAAC;IAChD,SAAS,CAAC,mBAAmB,EAAE,YAAY,CAAC;IAC5C,SAAS,CAAC,YAAY,WAAqC;IAEpD,SAAS,EAAE,MAAM,CAAa;IAC9B,QAAQ,EAAE,MAAM,CAAa;IAC7B,MAAM,SAAM;IACZ,yBAAyB,UAAS;IAClC,iBAAiB,EAAE,MAAM,CAAK;IAErC,OAAO,CAAC,kBAAkB,CAAK;IAC/B,OAAO,CAAC,iBAAiB,CAAK;IAC9B,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,cAAc,CAAc;IACpC,OAAO,CAAC,gBAAgB,CAAc;IACtC,OAAO,CAAC,WAAW,CAAc;IAGjC,SAAS,CAAC,cAAc,CAAC,qBAAqB,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,IAAI;gBAgCxE,QAAQ,CAAC,EAAE,cAAc,EACzB,SAAS,CAAC,EAAE,MAAM,EAClB,QAAQ,CAAC,EAAE,MAAM;IAmBnB,IAAW,cAAc,IAAI,MAAM,CAElC;IAED,IAAW,WAAW,IAAI,QAAQ,CAEjC;IAED,IAAW,WAAW,CAAC,KAAK,EAAE,QAAQ,EAErC;IAED,IAAW,kBAAkB,YAE5B;IAED,mCAAmC;IACnC,IAAW,SAAS,IAAI,IAAI,CAE3B;IAED;uEACmE;IAC5D,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,aAAa,CAAC,EAAE,OAAO;IAYzD,wBAAwB;IACxB,IAAW,GAAG,IAAI,IAAI,CAErB;IAED,wCAAwC;IACxC,IAAW,UAAU,IAAI,MAAM,CAE9B;IAEM,qBAAqB,CAAC,MAAM,EAAE,gBAAgB,GAAG,YAAY;IAkBpE,IAAW,QAAQ,CAAC,QAAQ,EAAE,cAAc,GAAG,SAAS,EAIvD;IAED,IAAW,QAAQ,IAAI,cAAc,GAAG,SAAS,CAEhD;IAED,SAAS,CAAC,OAAO,CAAC,QAAQ,EAAE,YAAY;IAIxC,IAAW,OAAO,IAAI,IAAI,CAEzB;IAED,IAAW,SAAS,IAAI,MAAM,CAE7B;IAED,IAAW,MAAM,IAAI,IAAI,CAExB;IAED,IAAW,QAAQ,IAAI,MAAM,CAE5B;IAEM,aAAa,UAAW,IAAI,UAEjC;CACH"}

package/lib/{esm/imodel-components-react → imodel-components-react}/timeline/BaseSolarDataProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSolarDataProvider.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/BaseSolarDataProvider.ts"],"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 */\n\nimport { Point3d } from \"@itwin/core-geometry\";\nimport {\n  calculateSunriseOrSunset,\n  Cartographic,\n  ColorByName,\n  ColorDef,\n} from \"@itwin/core-common\";\nimport type { IModelConnection, ScreenViewport } from \"@itwin/core-frontend\";\nimport type { SolarDataProvider } from \"./interfaces\";\n\nconst millisecPerMinute = 1000 * 60;\nconst millisecPerHour = millisecPerMinute * 60;\n\n// the interface and class are in alpha state - it may change after usability testing - test coverage not complete\n\n/** Base class that provides solar data for animation control\n * @alpha\n */\nexport class BaseSolarDataProvider implements SolarDataProvider {\n  protected _projectTimeZoneOffset: number; // used to convert between project time and local time\n  protected _viewport: ScreenViewport | undefined;\n  protected _cartographicCenter: Cartographic;\n  protected _shadowColor = ColorDef.create(ColorByName.gray);\n\n  public longitude: number = -75.17035; // long/lat of Philadelphia\n  public latitude: number = 39.954927;\n  public viewId = \"\"; // View Id used to determine sunrise and sunset\n  public supportsTimelineAnimation = false; // set to true when provider determines animation data is available.\n  public animationFraction: number = 0; // value from 0.0 to 1.0 that specifies the percentage complete for the animation.\n\n  private _projectDayStartMS = 0;\n  private _projectSunriseMs = 0;\n  private _projectSunsetMs = 0;\n  private _zoneOffsetMs = 0;\n  private _projectSunrise = new Date();\n  private _projectSunset = new Date();\n  private _projectDateTime = new Date();\n  private _projectDay = new Date();\n\n  // projectTimeZoneOffset = zone offset in hours\n  protected initializeData(projectTimeZoneOffset: number, initialTime?: Date) {\n    if (!initialTime) initialTime = new Date(Date.now()); // users local time\n\n    this._zoneOffsetMs = projectTimeZoneOffset * millisecPerHour;\n    const year = initialTime.getFullYear();\n    const month = initialTime.getMonth();\n    const date = initialTime.getDate();\n    const hours = initialTime.getHours();\n    const minutes = initialTime.getMinutes();\n    const initialUtcMs = Date.UTC(year, month, date, hours, minutes, 0, 0);\n    const initialProjectMs = initialUtcMs - this._zoneOffsetMs;\n    this._projectDateTime = new Date(initialProjectMs);\n\n    const utcDayMs = Date.UTC(year, month, date, 0, 0, 0, 0);\n    const utcDay = new Date(utcDayMs);\n    this._projectDayStartMS = utcDayMs - this._zoneOffsetMs;\n    this._projectDay = new Date(this._projectDayStartMS);\n    this._projectSunrise = calculateSunriseOrSunset(\n      utcDay,\n      this._cartographicCenter,\n      true\n    );\n    this._projectSunset = calculateSunriseOrSunset(\n      utcDay,\n      this._cartographicCenter,\n      false\n    );\n    this._projectSunriseMs = this._projectSunrise.getTime();\n    this._projectSunsetMs = this._projectSunset.getTime();\n  }\n\n  constructor(\n    viewport?: ScreenViewport,\n    longitude?: number,\n    latitude?: number\n  ) {\n    this._viewport = viewport;\n    if (longitude) this.longitude = longitude;\n    if (latitude) this.latitude = latitude;\n\n    if (viewport) this.viewId = viewport.view.id;\n\n    // project location\n    this._cartographicCenter = Cartographic.fromDegrees({\n      longitude: this.longitude,\n      latitude: this.latitude,\n      height: 0.0,\n    });\n    this._projectTimeZoneOffset = this.getZone(this._cartographicCenter);\n\n    this.initializeData(this._projectTimeZoneOffset);\n  }\n\n  public get timeZoneOffset(): number {\n    return this._projectTimeZoneOffset;\n  }\n\n  public get shadowColor(): ColorDef {\n    return this._shadowColor;\n  }\n\n  public set shadowColor(color: ColorDef) {\n    this._shadowColor = color;\n  }\n\n  public get shouldShowTimeline() {\n    return false;\n  }\n\n  /** Get time at project location */\n  public get timeOfDay(): Date {\n    return this._projectDateTime;\n  }\n\n  /** The date can be in project time or if isProjectDate is false, it is assumed to be users current local time\n   *  which will be adjusted to the same time at project location. */\n  public setDateAndTime(date: Date, isProjectDate?: boolean) {\n    let userDay = date;\n\n    // convert date from user date to project location\n    if (isProjectDate) {\n      const userOffset = date.getTimezoneOffset() * millisecPerMinute;\n      userDay = new Date(date.getTime() - userOffset - this._zoneOffsetMs);\n    }\n\n    this.initializeData(this._projectTimeZoneOffset, userDay);\n  }\n\n  /** Project Day Start */\n  public get day(): Date {\n    return this._projectDay;\n  }\n\n  /** Project Day Start in milliseconds */\n  public get dayStartMs(): number {\n    return this._projectDayStartMS;\n  }\n\n  public getCartographicCenter(iModel: IModelConnection): Cartographic {\n    if (iModel.isGeoLocated) {\n      const projectExtents = iModel.projectExtents;\n      const projectCenter = Point3d.createAdd2Scaled(\n        projectExtents.low,\n        0.5,\n        projectExtents.high,\n        0.5\n      );\n      return iModel.spatialToCartographicFromEcef(projectCenter);\n    }\n    return Cartographic.fromDegrees({\n      longitude: this.longitude,\n      latitude: this.latitude,\n      height: 0.0,\n    });\n  }\n\n  public set viewport(viewport: ScreenViewport | undefined) {\n    this._viewport = viewport;\n    if (viewport) this.viewId = viewport.view.id;\n    else this.viewId = \"\";\n  }\n\n  public get viewport(): ScreenViewport | undefined {\n    return this._viewport;\n  }\n\n  protected getZone(location: Cartographic) {\n    return Math.floor(0.5 + location.longitudeDegrees / 15.0);\n  }\n\n  public get sunrise(): Date {\n    return this._projectSunrise;\n  }\n\n  public get sunriseMs(): number {\n    return this._projectSunriseMs;\n  }\n\n  public get sunset(): Date {\n    return this._projectSunset;\n  }\n\n  public get sunsetMs(): number {\n    return this._projectSunsetMs;\n  }\n\n  public onTimeChanged = (_time: Date) => {\n    // to be implemented by derived class\n  };\n}\n"]}
+{"version":3,"file":"BaseSolarDataProvider.js","sourceRoot":"","sources":["../../../src/imodel-components-react/timeline/BaseSolarDataProvider.ts"],"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 */\n\nimport { Point3d } from \"@itwin/core-geometry\";\nimport {\n  calculateSunriseOrSunset,\n  Cartographic,\n  ColorByName,\n  ColorDef,\n} from \"@itwin/core-common\";\nimport type { IModelConnection, ScreenViewport } from \"@itwin/core-frontend\";\nimport type { SolarDataProvider } from \"./interfaces.js\";\n\nconst millisecPerMinute = 1000 * 60;\nconst millisecPerHour = millisecPerMinute * 60;\n\n// the interface and class are in alpha state - it may change after usability testing - test coverage not complete\n\n/** Base class that provides solar data for animation control\n * @alpha\n */\nexport class BaseSolarDataProvider implements SolarDataProvider {\n  protected _projectTimeZoneOffset: number; // used to convert between project time and local time\n  protected _viewport: ScreenViewport | undefined;\n  protected _cartographicCenter: Cartographic;\n  protected _shadowColor = ColorDef.create(ColorByName.gray);\n\n  public longitude: number = -75.17035; // long/lat of Philadelphia\n  public latitude: number = 39.954927;\n  public viewId = \"\"; // View Id used to determine sunrise and sunset\n  public supportsTimelineAnimation = false; // set to true when provider determines animation data is available.\n  public animationFraction: number = 0; // value from 0.0 to 1.0 that specifies the percentage complete for the animation.\n\n  private _projectDayStartMS = 0;\n  private _projectSunriseMs = 0;\n  private _projectSunsetMs = 0;\n  private _zoneOffsetMs = 0;\n  private _projectSunrise = new Date();\n  private _projectSunset = new Date();\n  private _projectDateTime = new Date();\n  private _projectDay = new Date();\n\n  // projectTimeZoneOffset = zone offset in hours\n  protected initializeData(projectTimeZoneOffset: number, initialTime?: Date) {\n    if (!initialTime) initialTime = new Date(Date.now()); // users local time\n\n    this._zoneOffsetMs = projectTimeZoneOffset * millisecPerHour;\n    const year = initialTime.getFullYear();\n    const month = initialTime.getMonth();\n    const date = initialTime.getDate();\n    const hours = initialTime.getHours();\n    const minutes = initialTime.getMinutes();\n    const initialUtcMs = Date.UTC(year, month, date, hours, minutes, 0, 0);\n    const initialProjectMs = initialUtcMs - this._zoneOffsetMs;\n    this._projectDateTime = new Date(initialProjectMs);\n\n    const utcDayMs = Date.UTC(year, month, date, 0, 0, 0, 0);\n    const utcDay = new Date(utcDayMs);\n    this._projectDayStartMS = utcDayMs - this._zoneOffsetMs;\n    this._projectDay = new Date(this._projectDayStartMS);\n    this._projectSunrise = calculateSunriseOrSunset(\n      utcDay,\n      this._cartographicCenter,\n      true\n    );\n    this._projectSunset = calculateSunriseOrSunset(\n      utcDay,\n      this._cartographicCenter,\n      false\n    );\n    this._projectSunriseMs = this._projectSunrise.getTime();\n    this._projectSunsetMs = this._projectSunset.getTime();\n  }\n\n  constructor(\n    viewport?: ScreenViewport,\n    longitude?: number,\n    latitude?: number\n  ) {\n    this._viewport = viewport;\n    if (longitude) this.longitude = longitude;\n    if (latitude) this.latitude = latitude;\n\n    if (viewport) this.viewId = viewport.view.id;\n\n    // project location\n    this._cartographicCenter = Cartographic.fromDegrees({\n      longitude: this.longitude,\n      latitude: this.latitude,\n      height: 0.0,\n    });\n    this._projectTimeZoneOffset = this.getZone(this._cartographicCenter);\n\n    this.initializeData(this._projectTimeZoneOffset);\n  }\n\n  public get timeZoneOffset(): number {\n    return this._projectTimeZoneOffset;\n  }\n\n  public get shadowColor(): ColorDef {\n    return this._shadowColor;\n  }\n\n  public set shadowColor(color: ColorDef) {\n    this._shadowColor = color;\n  }\n\n  public get shouldShowTimeline() {\n    return false;\n  }\n\n  /** Get time at project location */\n  public get timeOfDay(): Date {\n    return this._projectDateTime;\n  }\n\n  /** The date can be in project time or if isProjectDate is false, it is assumed to be users current local time\n   *  which will be adjusted to the same time at project location. */\n  public setDateAndTime(date: Date, isProjectDate?: boolean) {\n    let userDay = date;\n\n    // convert date from user date to project location\n    if (isProjectDate) {\n      const userOffset = date.getTimezoneOffset() * millisecPerMinute;\n      userDay = new Date(date.getTime() - userOffset - this._zoneOffsetMs);\n    }\n\n    this.initializeData(this._projectTimeZoneOffset, userDay);\n  }\n\n  /** Project Day Start */\n  public get day(): Date {\n    return this._projectDay;\n  }\n\n  /** Project Day Start in milliseconds */\n  public get dayStartMs(): number {\n    return this._projectDayStartMS;\n  }\n\n  public getCartographicCenter(iModel: IModelConnection): Cartographic {\n    if (iModel.isGeoLocated) {\n      const projectExtents = iModel.projectExtents;\n      const projectCenter = Point3d.createAdd2Scaled(\n        projectExtents.low,\n        0.5,\n        projectExtents.high,\n        0.5\n      );\n      return iModel.spatialToCartographicFromEcef(projectCenter);\n    }\n    return Cartographic.fromDegrees({\n      longitude: this.longitude,\n      latitude: this.latitude,\n      height: 0.0,\n    });\n  }\n\n  public set viewport(viewport: ScreenViewport | undefined) {\n    this._viewport = viewport;\n    if (viewport) this.viewId = viewport.view.id;\n    else this.viewId = \"\";\n  }\n\n  public get viewport(): ScreenViewport | undefined {\n    return this._viewport;\n  }\n\n  protected getZone(location: Cartographic) {\n    return Math.floor(0.5 + location.longitudeDegrees / 15.0);\n  }\n\n  public get sunrise(): Date {\n    return this._projectSunrise;\n  }\n\n  public get sunriseMs(): number {\n    return this._projectSunriseMs;\n  }\n\n  public get sunset(): Date {\n    return this._projectSunset;\n  }\n\n  public get sunsetMs(): number {\n    return this._projectSunsetMs;\n  }\n\n  public onTimeChanged = (_time: Date) => {\n    // to be implemented by derived class\n  };\n}\n"]}

package/lib/{cjs/imodel-components-react → imodel-components-react}/timeline/BaseTimelineDataProvider.d.ts

@@ -2,7 +2,7 @@
  * @module Timeline
  */
 import type { ScreenViewport } from "@itwin/core-frontend";
-import type { PlaybackSettings, TimelineDataProvider } from "./interfaces";
+import type { PlaybackSettings, TimelineDataProvider } from "./interfaces.js";
 /** Base Timeline Data Provider
  * @alpha
  */

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTimelineDataProvider.d.ts","sourceRoot":"","sources":["../../../src/imodel-components-react/timeline/BaseTimelineDataProvider.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE9E;;GAEG;AACH,qBAAa,wBAAyB,YAAW,oBAAoB;IACnE,SAAgB,EAAE,8BAA8B;IACzC,KAAK,EAAE,IAAI,GAAG,SAAS,CAAC;IACxB,GAAG,EAAE,IAAI,GAAG,SAAS,CAAC;IACtB,MAAM,SAAM;IAEZ,yBAAyB,UAAS;IAClC,iBAAiB,EAAE,MAAM,CAAK;IACrC,SAAS,CAAC,SAAS,EAAE,cAAc,GAAG,SAAS,CAAC;gBAEpC,QAAQ,CAAC,EAAE,cAAc;IAKrC,SAAS,CAAC,SAAS,EAAE,gBAAgB,CAGnC;IAEW,gBAAgB,IAAI,OAAO,CAAC,OAAO,CAAC;IAIjD,kDAAkD;IAClD,IAAW,eAAe,IAAI,MAAM,CAEnC;IAED,uCAAuC;IACvC,IAAW,QAAQ,IAAI,MAAM,CAE5B;IAED,IAAW,QAAQ,CAAC,QAAQ,EAAE,cAAc,GAAG,SAAS,EAIvD;IAED,IAAW,QAAQ,IAAI,cAAc,GAAG,SAAS,CAEhD;IAED,IAAW,IAAI,IAAI,OAAO,CAIzB;IAEM,WAAW,IAAI,gBAAgB;IAI/B,cAAc,CAAC,QAAQ,EAAE,gBAAgB;IAIzC,wBAAwB,cAAe,gBAAgB,UAAQ;IAE/D,0BAA0B,uBAAwB,MAAM,UAAQ;CACxE"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTimelineDataProvider.js","sourceRoot":"","sources":["../../../src/imodel-components-react/timeline/BaseTimelineDataProvider.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAKH;;GAEG;AACH,MAAM,OAAO,wBAAwB;IAUnC,YAAY,QAAyB;QATrB,OAAE,GAAG,0BAA0B,CAAC;QAGzC,WAAM,GAAG,EAAE,CAAC;QAEZ,8BAAyB,GAAG,KAAK,CAAC,CAAC,oEAAoE;QACvG,sBAAiB,GAAW,CAAC,CAAC,CAAC,kFAAkF;QAQ9G,cAAS,GAAqB;YACtC,QAAQ,EAAE,EAAE,GAAG,IAAI;YACnB,IAAI,EAAE,IAAI;SACX,CAAC;QAwCK,6BAAwB,GAAG,CAAC,SAA2B,EAAE,EAAE,GAAE,CAAC,CAAC;QAE/D,+BAA0B,GAAG,CAAC,kBAA0B,EAAE,EAAE,GAAE,CAAC,CAAC;QAjDrE,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAC1B,IAAI,QAAQ;YAAE,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;IAC/C,CAAC;IAOM,KAAK,CAAC,gBAAgB;QAC3B,OAAO,KAAK,CAAC;IACf,CAAC;IAED,kDAAkD;IAClD,IAAW,eAAe;QACxB,OAAO,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC;IAChD,CAAC;IAED,uCAAuC;IACvC,IAAW,QAAQ;QACjB,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAS,CAAC,CAAC,CAAC,KAAK,CAAC;IAC5E,CAAC;IAED,IAAW,QAAQ,CAAC,QAAoC;QACtD,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAC1B,IAAI,QAAQ;YAAE,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;;YACxC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;IACxB,CAAC;IAED,IAAW,QAAQ;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED,IAAW,IAAI;QACb,OAAO,SAAS,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI;YAC1C,CAAC,CAAC,KAAK;YACP,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,IAAK,CAAC;IAC/B,CAAC;IAEM,WAAW;QAChB,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAEM,cAAc,CAAC,QAA0B;QAC9C,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,QAAQ,EAAE,CAAC;IACtD,CAAC;CAKF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Timeline\n */\n\nimport type { ScreenViewport } from \"@itwin/core-frontend\";\nimport type { PlaybackSettings, TimelineDataProvider } from \"./interfaces.js\";\n\n/** Base Timeline Data Provider\n * @alpha\n */\nexport class BaseTimelineDataProvider implements TimelineDataProvider {\n  public readonly id = \"TestTimelineDataProvider\";\n  public start: Date | undefined;\n  public end: Date | undefined;\n  public viewId = \"\";\n\n  public supportsTimelineAnimation = false; // set to true when provider determines animation data is available.\n  public animationFraction: number = 0; // value from 0.0 to 1.0 that specifies the percentage complete for the animation.\n  protected _viewport: ScreenViewport | undefined;\n\n  constructor(viewport?: ScreenViewport) {\n    this._viewport = viewport;\n    if (viewport) this.viewId = viewport.view.id;\n  }\n\n  protected _settings: PlaybackSettings = {\n    duration: 20 * 1000,\n    loop: true,\n  };\n\n  public async loadTimelineData(): Promise<boolean> {\n    return false;\n  }\n\n  /** Called to get the initial scrubber location */\n  public get initialDuration(): number {\n    return this.duration * this.animationFraction;\n  }\n\n  /** Called to get playback duration  */\n  public get duration(): number {\n    return this.getSettings().duration ? this.getSettings().duration! : 20000;\n  }\n\n  public set viewport(viewport: ScreenViewport | undefined) {\n    this._viewport = viewport;\n    if (viewport) this.viewId = viewport.view.id;\n    else this.viewId = \"\";\n  }\n\n  public get viewport(): ScreenViewport | undefined {\n    return this._viewport;\n  }\n\n  public get loop(): boolean {\n    return undefined === this.getSettings().loop\n      ? false\n      : this.getSettings().loop!;\n  }\n\n  public getSettings(): PlaybackSettings {\n    return this._settings;\n  }\n\n  public updateSettings(settings: PlaybackSettings) {\n    this._settings = { ...this._settings, ...settings };\n  }\n\n  public onPlaybackSettingChanged = (_settings: PlaybackSettings) => {};\n\n  public onAnimationFractionChanged = (_animationFraction: number) => {};\n}\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../../../src/imodel-components-react/timeline/InlineEdit.tsx"],"names":[],"mappings":"AAIA,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD,UAAU,eAAgB,SAAQ,WAAW;IAC3C,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAC7C,eAAe,EACf,eAAe,CAChB;IACC,OAAO,CAAC,SAAS,CAAuC;gBAE5C,KAAK,EAAE,eAAe;IASlB,kBAAkB,CAChC,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,eAAe;IAS7B,OAAO,CAAC,OAAO,CAEb;IAEF,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,UAAU,CAYhB;IAEF,OAAO,CAAC,SAAS,CAEf;IAEF,OAAO,CAAC,WAAW;IAIH,MAAM;CAiBvB"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineEdit.js","sourceRoot":"","sources":["../../../src/imodel-components-react/timeline/InlineEdit.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\nimport \"./InlineEdit.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Input } from \"@itwin/itwinui-react\";\n\n// eslint-disable-next-line deprecation/deprecation\ninterface InlineEditProps extends CommonProps {\n  defaultValue: string;\n  onChange?: (value: string) => void;\n}\n\ninterface InlineEditState {\n  value: string;\n  originalValue: string;\n}\n\n/** Duration Inline Editor\n * @internal\n */\nexport class InlineEdit extends React.Component<\n  InlineEditProps,\n  InlineEditState\n> {\n  private _inputRef = React.createRef<HTMLInputElement>();\n\n  constructor(props: InlineEditProps) {\n    super(props);\n\n    this.state = {\n      value: this.props.defaultValue,\n      originalValue: this.props.defaultValue,\n    };\n  }\n\n  public override componentDidUpdate(\n    prevProps: InlineEditProps,\n    _prevState: InlineEditState\n  ) {\n    if (prevProps.defaultValue !== this.props.defaultValue) {\n      this.setState((_, props) => {\n        return { value: props.defaultValue, originalValue: props.defaultValue };\n      });\n    }\n  }\n\n  private _onBlur = (event: React.ChangeEvent<HTMLInputElement>) => {\n    this._sendChange(event.target.value);\n  };\n\n  private _onFocus = (event: React.ChangeEvent<HTMLInputElement>) => {\n    event.target.select();\n  };\n\n  private _onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (event.key) {\n      case Key.Escape.valueOf():\n        this.setState(\n          (prevState) => ({ value: prevState.originalValue }),\n          () => this._inputRef.current!.select()\n        );\n        break;\n      case Key.Enter.valueOf():\n        this._sendChange(this.state.value);\n        break;\n    }\n  };\n\n  private _onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    this.setState({ value: event.target.value });\n  };\n\n  private _sendChange(value: string) {\n    if (this.props.onChange) this.props.onChange(value);\n  }\n\n  public override render() {\n    return (\n      <Input\n        data-testid=\"timeline-duration-edit-input\"\n        className={classnames(\"inline-edit-input\", this.props.className)}\n        style={this.props.style}\n        ref={this._inputRef}\n        type=\"text\"\n        value={this.state.value}\n        size=\"small\"\n        onFocus={this._onFocus}\n        onBlur={this._onBlur}\n        onKeyDown={this._onKeyDown}\n        onChange={this._onChange}\n      />\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.inline-edit-input {
+  color: var(--iui-color-text);
+  background: inherit;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  padding: 0px;
+
+  &:hover {
+    border: 1px solid var(--iui-color-background-disabled);
+  }
+
+  &:focus {
+    background: var(--iui-color-background);
+    border: 1px solid var(--iui-color-background-disabled);
+    outline: none;
+    color: var(--iui-color-text-hover);
+  }
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlayButton.d.ts","sourceRoot":"","sources":["../../../src/imodel-components-react/timeline/PlayButton.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,eAAe;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,eAAe,qBAoBzE"}

package/lib/{esm/imodel-components-react → imodel-components-react}/timeline/PlayButton.js

@@ -5,7 +5,7 @@
 import * as React from "react";
 import { SvgPause, SvgPlay } from "@itwin/itwinui-icons-react";
 import { IconButton } from "@itwin/itwinui-react";
-import { useTranslation } from "../useTranslation";
+import { useTranslation } from "../useTranslation.js";
 /** Play/pause button used in timeline components.
  * @internal
  */

package/lib/imodel-components-react/timeline/PlayButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayButton.js","sourceRoot":"","sources":["../../../src/imodel-components-react/timeline/PlayButton.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAQtD;;GAEG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAmB;IACxE,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IACvC,MAAM,KAAK,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;IAExE,OAAO,CACL,oBAAC,UAAU,IACT,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,SAAS,EAAE,CAAC;gBACd,OAAO,EAAE,EAAE,CAAC;gBACZ,OAAO;YACT,CAAC;YAED,MAAM,EAAE,EAAE,CAAC;QACb,CAAC,IAEA,SAAS,CAAC,CAAC,CAAC,oBAAC,QAAQ,OAAG,CAAC,CAAC,CAAC,oBAAC,OAAO,OAAG,CAC5B,CACd,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 *--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport { SvgPause, SvgPlay } from \"@itwin/itwinui-icons-react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport { useTranslation } from \"../useTranslation.js\";\n\ninterface PlayButtonProps {\n  isPlaying: boolean;\n  onPlay?: () => void;\n  onPause?: () => void;\n}\n\n/** Play/pause button used in timeline components.\n * @internal\n */\nexport function PlayButton({ isPlaying, onPlay, onPause }: PlayButtonProps) {\n  const { translate } = useTranslation();\n  const label = translate(isPlaying ? \"timeline.pause\" : \"timeline.play\");\n\n  return (\n    <IconButton\n      styleType=\"borderless\"\n      label={label}\n      onClick={() => {\n        if (isPlaying) {\n          onPause?.();\n          return;\n        }\n\n        onPlay?.();\n      }}\n    >\n      {isPlaying ? <SvgPause /> : <SvgPlay />}\n    </IconButton>\n  );\n}\n"]}

package/lib/{cjs/imodel-components-react → imodel-components-react}/timeline/Scrubber.d.ts

@@ -2,10 +2,8 @@ import "./Scrubber.scss";
 import * as React from "react";
 import { Slider } from "@itwin/itwinui-react";
 import type { CommonProps } from "@itwin/core-react";
-import type { TimelineDateMarkerProps } from "./TimelineComponent";
-/**
- * @internal
- */
+import type { TimelineDateMarkerProps } from "./TimelineComponent.js";
+/** @internal */
 export declare function getPercentageOfRectangle(rect: DOMRect, pointer: number): number;
 /** @internal */
 export declare function RailMarkers({ showToolTip, percent, tooltipText, markDate, }: {

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

@@ -0,0 +1 @@
+{"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../src/imodel-components-react/timeline/Scrubber.tsx"],"names":[],"mappings":"AAIA,OAAO,iBAAiB,CAAC;AACzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEtE,gBAAgB;AAChB,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,UAGtE;AA8FD,gBAAgB;AAChB,wBAAgB,WAAW,CAAC,EAC1B,WAAW,EACX,OAAO,EACP,WAAW,EACX,QAAQ,GACT,EAAE;IACD,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC5B,qBAsBA;AAED;;;GAGG;AACH,wBAAgB,WAAW,sBAQ1B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,eAAe,EAAE,cAAc,GAAG,SAAS,WA+B1E;AAED;;GAEG;AAEH,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACnD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC,mBAAmB,CAAC,EAAE,KAAK,CAAC,cAAc,CACxC,OAAO,MAAM,CACd,CAAC,qBAAqB,CAAC,CAAC;CAC1B;AAED;;GAEG;AACH,UAAU,eAAe;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AACD;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAsH5C"}

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

@@ -5,11 +5,8 @@
 import "./Scrubber.scss";
 import * as React from "react";
 import { Slider } from "@itwin/itwinui-react";
-import { useEventListener } from "@itwin/core-react";
 import { toDateString, toTimeString } from "@itwin/components-react";
-/**
- * @internal
- */
+/** @internal */
 export function getPercentageOfRectangle(rect, pointer) {
     const position = Math.min(rect.right, Math.max(rect.left, pointer));
     return (position - rect.left) / rect.width;
@@ -90,14 +87,24 @@ export function useFocusedThumb(sliderContainer) {
         setThumbElement(element);
     }, [sliderContainer, thumbElement]);
     const [thumbHasFocus, setThumbHasFocus] = React.useState(false);
-    const handleThumbFocus = React.useCallback(() => {
-        setThumbHasFocus(true);
-    }, []);
-    const handleThumbBlur = React.useCallback(() => {
-        setThumbHasFocus(false);
-    }, []);
-    useEventListener("focus", handleThumbFocus, thumbElement);
-    useEventListener("blur", handleThumbBlur, thumbElement);
+    React.useEffect(() => {
+        const listener = () => {
+            setThumbHasFocus(true);
+        };
+        thumbElement?.addEventListener("focus", listener);
+        return () => {
+            thumbElement?.removeEventListener("focus", listener);
+        };
+    }, [thumbElement]);
+    React.useEffect(() => {
+        const listener = () => {
+            setThumbHasFocus(false);
+        };
+        thumbElement?.addEventListener("blur", listener);
+        return () => {
+            thumbElement?.removeEventListener("blur", listener);
+        };
+    }, [thumbElement]);
     return thumbHasFocus;
 }
 /** Scrubber/Slider for timeline control

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

@@ -0,0 +1 @@
+{"version":3,"file":"Scrubber.js","sourceRoot":"","sources":["../../../src/imodel-components-react/timeline/Scrubber.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\nimport \"./Scrubber.scss\";\nimport * as React from \"react\";\nimport { Slider } from \"@itwin/itwinui-react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { toDateString, toTimeString } from \"@itwin/components-react\";\nimport type { TimelineDateMarkerProps } from \"./TimelineComponent.js\";\n\n/** @internal */\nexport function getPercentageOfRectangle(rect: DOMRect, pointer: number) {\n  const position = Math.min(rect.right, Math.max(rect.left, pointer));\n  return (position - rect.left) / rect.width;\n}\n\nconst formatDuration = (value: number) => {\n  const addZero = (i: number) => {\n    return i < 10 ? `0${i}` : i;\n  };\n\n  const date = new Date(value);\n  const minutes = date.getUTCMinutes();\n  const seconds = date.getUTCSeconds();\n  return `${addZero(minutes)}:${addZero(seconds)}`;\n};\n\nconst formatDate = (\n  startDate: Date,\n  endDate: Date,\n  fraction: number,\n  timeZoneOffset?: number\n) => {\n  const delta = (endDate.getTime() - startDate.getTime()) * fraction;\n  const date = new Date(startDate.getTime() + delta);\n  return toDateString(date, timeZoneOffset);\n};\n\nconst formatTime = (\n  startDate: Date,\n  endDate: Date,\n  fraction: number,\n  timeZoneOffset?: number\n) => {\n  const delta = (endDate.getTime() - startDate.getTime()) * fraction;\n  const date = new Date(startDate.getTime() + delta);\n  return ` ${toTimeString(date, timeZoneOffset)}`;\n};\n\nfunction generateToolTipText(\n  showTime: boolean,\n  percent: number,\n  min: number,\n  max: number,\n  startDate?: Date,\n  endDate?: Date,\n  timeZoneOffset = 0\n) {\n  if (startDate && endDate)\n    return `${formatDate(startDate, endDate, percent, timeZoneOffset)}${\n      showTime ? formatTime(startDate, endDate, percent, timeZoneOffset) : \"\"\n    } `;\n\n  const val = Math.round(min + (max - min) * percent);\n  return formatDuration(val);\n}\n\nfunction getPercentageFromDate(startDate: Date, endDate: Date, date?: Date) {\n  const newDate = date ? date : new Date();\n  const startTime = startDate.getTime();\n  const totalDuration = endDate.getTime() - startTime;\n  return (newDate.getTime() - startTime) / totalDuration;\n}\n\nfunction getDateMarker(\n  dateMarkerPropsIn: TimelineDateMarkerProps,\n  startDate: Date,\n  endDate: Date\n): DateMarkerProps {\n  const percentage = getPercentageFromDate(\n    startDate,\n    endDate,\n    dateMarkerPropsIn.date\n  );\n  const marker = dateMarkerPropsIn.dateMarker ? (\n    dateMarkerPropsIn.dateMarker\n  ) : (\n    <span className=\"date-marker-default\"></span>\n  );\n  return { datePercentage: percentage, dateMarker: marker };\n}\n\nfunction markDateInTimelineRange(\n  dateMarkerProps?: TimelineDateMarkerProps,\n  startDate?: Date,\n  endDate?: Date\n): boolean {\n  if (dateMarkerProps && startDate && endDate) {\n    const inDate = dateMarkerProps.date ? dateMarkerProps.date : new Date();\n    if (\n      inDate.getTime() >= startDate.getTime() &&\n      inDate.getTime() <= endDate.getTime()\n    )\n      return true;\n  }\n  return false;\n}\n\n/** @internal */\nexport function RailMarkers({\n  showToolTip,\n  percent,\n  tooltipText,\n  markDate,\n}: {\n  showToolTip: boolean;\n  percent: number;\n  tooltipText: string;\n  markDate?: DateMarkerProps;\n}) {\n  return (\n    <div className=\"components-timeline-rail-marker-container\">\n      {showToolTip && (\n        <div\n          className=\"components-timeline-tooltip\"\n          style={{ left: `${Math.round(percent * 100)}% ` }}\n        >\n          <span className=\"tooltip-text\">{tooltipText}</span>\n        </div>\n      )}\n      {markDate && (\n        <div\n          className=\"components-timeline-date-marker\"\n          data-testid=\"test-date-marker\"\n          style={{ left: `${Math.round(markDate.datePercentage * 100)}% ` }}\n        >\n          {markDate.dateMarker}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Custom Timeline Thumb\n * @internal\n */\nexport function CustomThumb() {\n  return (\n    <div className=\"scrubber-handle\">\n      <div />\n      <div />\n      <div />\n    </div>\n  );\n}\n\n/**\n * @internal\n */\nexport function useFocusedThumb(sliderContainer: HTMLDivElement | undefined) {\n  const [thumbElement, setThumbElement] = React.useState<HTMLDivElement>();\n\n  React.useLayoutEffect(() => {\n    if (!sliderContainer) return;\n    const element = sliderContainer.querySelector(\".components-timeline-thumb\");\n    if (!element) return;\n    setThumbElement(element as HTMLDivElement);\n  }, [sliderContainer, thumbElement]);\n\n  const [thumbHasFocus, setThumbHasFocus] = React.useState(false);\n\n  React.useEffect(() => {\n    const listener = () => {\n      setThumbHasFocus(true);\n    };\n    thumbElement?.addEventListener(\"focus\", listener);\n    return () => {\n      thumbElement?.removeEventListener(\"focus\", listener);\n    };\n  }, [thumbElement]);\n  React.useEffect(() => {\n    const listener = () => {\n      setThumbHasFocus(false);\n    };\n    thumbElement?.addEventListener(\"blur\", listener);\n    return () => {\n      thumbElement?.removeEventListener(\"blur\", listener);\n    };\n  }, [thumbElement]);\n  return thumbHasFocus;\n}\n\n/** Properties for Scrubber/Slider used on timeline control\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface ScrubberProps extends CommonProps {\n  currentDuration: number;\n  totalDuration: number;\n  isPlaying: boolean;\n  startDate?: Date;\n  endDate?: Date;\n  showTime?: boolean;\n  onChange?: (values: ReadonlyArray<number>) => void;\n  onUpdate?: (values: ReadonlyArray<number>) => void;\n  timeZoneOffset?: number;\n  markDate?: TimelineDateMarkerProps;\n  trackContainerProps?: React.ComponentProps<\n    typeof Slider\n  >[\"trackContainerProps\"];\n}\n\n/** Properties for marking current date in RailMarkers\n * @internal\n */\ninterface DateMarkerProps {\n  datePercentage: number;\n  dateMarker?: React.ReactNode;\n}\n/** Scrubber/Slider for timeline control\n * @internal\n */\nexport function Scrubber(props: ScrubberProps) {\n  const {\n    startDate,\n    endDate,\n    showTime,\n    isPlaying,\n    totalDuration,\n    timeZoneOffset,\n    currentDuration,\n    className,\n    onChange,\n    onUpdate,\n    trackContainerProps,\n  } = props;\n\n  const [sliderContainer, setSliderContainer] =\n    React.useState<HTMLDivElement | null>(null);\n  const [pointerPercent, setPointerPercent] = React.useState(0);\n\n  const tooltipProps = React.useCallback(() => {\n    return { visible: false };\n  }, []);\n\n  const [showRailTooltip, setShowRailTooltip] = React.useState(false);\n\n  const handlePointerEnter = React.useCallback(() => {\n    setShowRailTooltip(true);\n  }, []);\n\n  const handlePointerLeave = React.useCallback(() => {\n    setShowRailTooltip(false);\n  }, []);\n\n  const handlePointerMove = React.useCallback(\n    (event: React.PointerEvent) => {\n      sliderContainer &&\n        setPointerPercent(\n          getPercentageOfRectangle(\n            sliderContainer.getBoundingClientRect(),\n            event.clientX\n          )\n        );\n    },\n    [sliderContainer]\n  );\n\n  const thumbHasFocus = useFocusedThumb(sliderContainer ?? undefined);\n\n  const tickLabel = React.useMemo(() => {\n    const showTip = isPlaying || showRailTooltip || thumbHasFocus;\n    const percent =\n      isPlaying || thumbHasFocus\n        ? currentDuration / totalDuration\n        : pointerPercent;\n    const markDateInRange = markDateInTimelineRange(\n      props.markDate,\n      startDate,\n      endDate\n    );\n    const currentDateMarker =\n      props.markDate && markDateInRange && startDate && endDate\n        ? getDateMarker(props.markDate, startDate, endDate)\n        : undefined;\n    const tooltipText = generateToolTipText(\n      !!showTime,\n      percent,\n      0,\n      totalDuration,\n      startDate,\n      endDate,\n      timeZoneOffset\n    );\n    return (\n      <RailMarkers\n        showToolTip={showTip}\n        percent={percent}\n        tooltipText={tooltipText}\n        markDate={currentDateMarker}\n      />\n    );\n  }, [\n    isPlaying,\n    showRailTooltip,\n    currentDuration,\n    totalDuration,\n    pointerPercent,\n    startDate,\n    endDate,\n    timeZoneOffset,\n    showTime,\n    thumbHasFocus,\n    props.markDate,\n  ]);\n\n  return (\n    <Slider\n      ref={setSliderContainer}\n      className={className}\n      step={1}\n      min={0}\n      max={totalDuration}\n      minLabel=\"\"\n      maxLabel=\"\"\n      onUpdate={onUpdate}\n      onChange={onChange}\n      values={[currentDuration]}\n      tooltipProps={tooltipProps}\n      thumbProps={() => ({\n        children: <CustomThumb />,\n        className: \"components-timeline-thumb\",\n      })}\n      tickLabels={tickLabel}\n      onPointerEnter={handlePointerEnter}\n      onPointerMove={handlePointerMove}\n      onPointerLeave={handlePointerLeave}\n      trackContainerProps={trackContainerProps}\n    />\n  );\n}\n"]}

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

@@ -0,0 +1,105 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
+
+.components-timeline-thumb {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--iui-color-background);
+  box-sizing: border-box;
+  width: 38px;
+  height: 20px;
+  border-radius: var(--iui-border-radius-1);
+  border: 1px solid var(--iui-color-border);
+  transform: translateX(-19.2px);
+}
+
+.components-timeline-rail-marker-container {
+  position: absolute;
+  width: 100%;
+  top: 0;
+
+  .components-timeline-tooltip {
+    @include uicore-z-index(tooltip);
+    position: absolute;
+    top: -8px;
+    display: inline-block;
+    transform: translateX(-50px);
+    border-bottom: 1px dotted rgba(0, 0, 0, var(--iui-opacity-3));
+    font-size: 14px;
+
+    .tooltip-text {
+      width: 100px;
+      background-color: rgba(0, 0, 0, var(--iui-opacity-3));
+      color: #fff;
+      // opacity: 0.8;
+      text-align: center;
+      border-radius: 6px;
+      padding: 8px 0;
+      position: absolute;
+      z-index: 1;
+      bottom: 150%;
+
+      &:after {
+        content: "";
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-left: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: rgba(0, 0, 0, var(--iui-opacity-3)) transparent
+          transparent transparent;
+      }
+    }
+  }
+}
+
+.scrubber-handle {
+  pointer-events: none;
+  position: absolute;
+  width: 38px;
+  height: 20px;
+  border-radius: var(--iui-border-radius-1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  > div {
+    width: 1px;
+    height: 10px;
+    margin: 0 1px;
+    background-color: var(--iui-color-border-subtle);
+  }
+}
+
+.scrubber-track {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 4px;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.components-timeline-date-marker {
+  pointer-events: none;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(50%);
+}
+
+.date-marker-default {
+  height: 12px;
+  width: 3px;
+  border-radius: var(--iui-border-radius-1);
+  transform: translateY(1px);
+  background-color: var(--iui-color-border);
+}

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

@@ -4,7 +4,7 @@
 import "./SolarTimeline.scss";
 import * as React from "react";
 import { ColorDef } from "@itwin/core-common";
-import type { SolarDataProvider } from "./interfaces";
+import type { SolarDataProvider } from "./interfaces.js";
 interface SolarTimelineComponentProps {
     dataProvider: SolarDataProvider;
     onPlayPause?: (playing: boolean) => void;

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

@@ -0,0 +1 @@
+{"version":3,"file":"SolarTimeline.d.ts","sourceRoot":"","sources":["../../../src/imodel-components-react/timeline/SolarTimeline.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AA4B3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AA8EzD,UAAU,2BAA2B;IACnC,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,2BAA2B;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,WAAW,EAAE,QAAQ,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,aAAa,CACpD,2BAA2B,EAC3B,2BAA2B,CAC5B;IACC,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,cAAc,CAAK;IAE3B,OAAO,CAAC,QAAQ,CAAC,aAAa,CAS5B;IAEF,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAsB;gBAElC,KAAK,EAAE,2BAA2B;IA8C9B,oBAAoB;IAMpC,OAAO,CAAC,gBAAgB,CA4CtB;IAEF,OAAO,CAAC,KAAK;IAWb,OAAO,CAAC,QAAQ,CAad;IAGF,OAAO,CAAC,OAAO,CAYb;IAEF,OAAO,CAAC,wBAAwB;IAWhC,OAAO,CAAC,aAAa,CAyCnB;IAEF,OAAO,CAAC,qBAAqB,CAE3B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAEF,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,oBAAoB;IA0B5B,OAAO,CAAC,SAAS,CAEf;IAEF,OAAO,CAAC,SAAS,CAEf;IAEF,OAAO,CAAC,cAAc,CAGpB;IAEF,OAAO,CAAC,aAAa,CAEnB;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEK,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IASxB,MAAM;CA8JvB"}

package/lib/{esm/imodel-components-react → imodel-components-react}/timeline/SolarTimeline.js

@@ -12,9 +12,9 @@ import { ColorByName, ColorDef } from "@itwin/core-common";
 import { adjustDateToTimezone, UiComponents } from "@itwin/components-react";
 import { Button, ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, DatePicker, Flex, Icon, IconButton, Label, Popover, Select, Slider, Text, Tooltip, VisuallyHidden, } from "@itwin/itwinui-react";
 import { SvgCalendar, SvgLoop, SvgMoon, SvgSettings, SvgSun, } from "@itwin/itwinui-icons-react";
-import { UiIModelComponents } from "../UiIModelComponents";
-import { PlayButton } from "./PlayButton";
-import { useTranslation } from "../useTranslation";
+import { UiIModelComponents } from "../UiIModelComponents.js";
+import { PlayButton } from "./PlayButton.js";
+import { useTranslation } from "../useTranslation.js";
 const msPerMinute = 1000 * 60;
 const msPerHour = msPerMinute * 60;
 const defaultPlaybackDuration = 40 * 1000;

package/lib/imodel-components-react/timeline/SolarTimeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolarTimeline.js","sourceRoot":"","sources":["../../../src/imodel-components-react/timeline/SolarTimeline.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE3D,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EACL,MAAM,EACN,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,WAAW,EACX,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,KAAK,EACL,OAAO,EACP,MAAM,EACN,MAAM,EACN,IAAI,EACJ,OAAO,EACP,cAAc,GACf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,WAAW,EACX,MAAM,GACP,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,WAAW,GAAG,IAAI,GAAG,EAAE,CAAC;AAC9B,MAAM,SAAS,GAAG,WAAW,GAAG,EAAE,CAAC;AACnC,MAAM,uBAAuB,GAAG,EAAE,GAAG,IAAI,CAAC;AAE1C,MAAM,MAAM,GAAG,CAAC,CAAC;AAejB,SAAS,QAAQ,CAAC,KAAoB;IACpC,MAAM,EACJ,UAAU,EACV,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,cAAc,EACd,eAAe,EACf,mBAAmB,GACpB,GAAG,KAAK,CAAC;IAEV,MAAM,cAAc,GAAG,UAAU,CAAC,UAAU,GAAG,mBAAmB,CAAC,CAAC;IAEpE,MAAM,SAAS,GAAG,UAAU,CAC1B,gBAAgB,EAChB,KAAK,CAAC,SAAS,EACf,UAAU,IAAI,WAAW,CAC1B,CAAC;IACF,MAAM,UAAU,GAAG,UAAU,CAAC,UAAU,GAAG,eAAe,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,UAAU,CAAC,UAAU,GAAG,cAAc,CAAC,CAAC;IAC1D,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS;QACvB,oBAAC,cAAc,yBAAgC;QAC/C,oBAAC,MAAM,IACL,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAC,EACrD,IAAI,EAAE,WAAW,EACjB,GAAG,EAAE,eAAe,EACpB,GAAG,EAAE,cAAc,EACnB,QAAQ,EACN,oBAAC,OAAO,IAAC,OAAO,EAAE,UAAU;gBAC1B,oBAAC,IAAI;oBACH,oBAAC,MAAM,OAAG,CACL,CACC,EAEZ,QAAQ,EACN,oBAAC,OAAO,IAAC,OAAO,EAAE,SAAS;gBACzB,oBAAC,IAAI;oBACH,oBAAC,OAAO,OAAG,CACN,CACC,EAEZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,CAAC,mBAAmB,CAAC,EAC7B,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC;gBACnB,OAAO,EAAE,cAAc;aACxB,CAAC,GACF,CACE,CACP,CAAC;AACJ,CAAC;AAyBD;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,aAGxC;IAmBC,YAAY,KAAkC;QAC5C,KAAK,CAAC,KAAK,CAAC,CAAC;QAnBP,kBAAa,GAAG,CAAC,CAAC;QAClB,eAAU,GAAG,KAAK,CAAC;QACnB,mBAAc,GAAG,CAAC,CAAC;QACnB,mBAAc,GAAG,CAAC,CAAC;QAEV,kBAAa,GAAG;YAC/B,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC;YACjC,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC;YACtC,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC;YACrC,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC;YACtC,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC;YACvC,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC;YACtC,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC;YAChC,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC;SACvC,CAAC;QAEe,YAAO,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAqD9C,uFAAuF;QAC/E,qBAAgB,GAAG,CAAC,UAAkB,EAAE,EAAE;YAChD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBAC7C,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;gBAChD,OAAO;YACT,CAAC;YAED,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC;YACzC,IAAI,CAAC,cAAc,IAAI,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC;YACzD,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;YAClC,IAAI,eAAe,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC;YACxE,IAAI,eAAe,GAAG,CAAC;gBAAE,eAAe,GAAG,CAAC,CAAC;YAE7C,IAAI,eAAe,GAAG,IAAI,CAAC;YAE3B,+HAA+H;YAC/H,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAC5B,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CACrE,CAAC;YAEF,IAAI,eAAe,GAAG,IAAI,EAAE,CAAC;gBAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;oBACrB,eAAe,GAAG,KAAK,CAAC;oBACxB,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC;oBAC1C,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;gBAClD,CAAC;qBAAM,CAAC;oBACN,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC;oBAC3C,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;gBAC1B,CAAC;YACH,CAAC;YAED,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,CAAC;gBAC1C,MAAM,cAAc,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,aAAa,CAAC,CAAC;gBACvE,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YACxD,CAAC;YAED,IAAI,CAAC,QAAQ,CACX,EAAE,SAAS,EAAE,eAAe,EAAE,mBAAmB,EAAE,aAAa,EAAE,EAClE,GAAG,EAAE;gBACH,IAAI,eAAe;oBACjB,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,qBAAqB,CAC/C,IAAI,CAAC,gBAAgB,CACtB,CAAC;YACN,CAAC,CACF,CAAC;QACJ,CAAC,CAAC;QAYF,4BAA4B;QACpB,aAAQ,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS;gBAAE,OAAO;YAElC,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC;YACzC,IAAI,CAAC,cAAc,IAAI,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC;YAEzD,yBAAyB;YACzB,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAEhD,eAAe;YACf,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;YAEpC,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW;gBAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC5D,CAAC,CAAC;QAEF,2BAA2B;QACnB,YAAO,GAAG,GAAG,EAAE;YACrB,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS;gBAAE,OAAO;YAEjC,IACE,IAAI,CAAC,KAAK,CAAC,mBAAmB,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc;gBAC3D,IAAI,CAAC,KAAK,CAAC,mBAAmB,IAAI,IAAI,CAAC,KAAK,CAAC,eAAe,EAC5D,CAAC;gBACD,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;gBACxB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;YACzC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YAC7C,CAAC;QACH,CAAC,CAAC;QAaM,kBAAa,GAAG,CAAC,OAAa,EAAE,EAAE;YACxC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;YAEhD,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC;YACtD,MAAM,eAAe,GACnB,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,UAAU,CAAC;YACzD,MAAM,cAAc,GAClB,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,EAAE,GAAG,UAAU,CAAC;YACxD,MAAM,UAAU,GAAG,cAAc,GAAG,eAAe,CAAC;YAEpD,gDAAgD;YAChD,8EAA8E;YAE9E,cAAc;YACd,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC;YACpC,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,EAAE,CAAC;YACxC,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;YACnE,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,CAAC;YAC1D,iEAAiE;YAEjE,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,CAC1C,UAAU,EACV,eAAe,EACf,cAAc,CACf,CAAC;YACF,IAAI,CAAC,wBAAwB,CAC3B,mBAAmB,EACnB,eAAe,EACf,UAAU,CACX,CAAC;YACF,IAAI,CAAC,cAAc,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC;YAE3C,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,CAAC,eAAe,CAAC,CAAC;YACzD,IAAI,CAAC,QAAQ,CAAC;gBACZ,UAAU;gBACV,eAAe;gBACf,cAAc;gBACd,mBAAmB;gBACnB,UAAU;gBACV,YAAY,EAAE,KAAK;aACpB,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,0BAAqB,GAAG,GAAG,EAAE;YACnC,IAAI,CAAC,QAAQ,CAAC,EAAE,gBAAgB,EAAE,KAAK,EAAE,CAAC,CAAC;QAC7C,CAAC,CAAC;QAEM,yBAAoB,GAAG,GAAG,EAAE;YAClC,IAAI,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;gBAC5B,gBAAgB,EAAE,CAAC,SAAS,CAAC,gBAAgB;aAC9C,CAAC,CAAC,CAAC;QACN,CAAC,CAAC;QAgCM,cAAS,GAAG,CAAC,MAA6B,EAAE,EAAE;YACpD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS;gBAAE,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAClE,CAAC,CAAC;QAEM,cAAS,GAAG,CAAC,MAA6B,EAAE,EAAE;YACpD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS;gBAAE,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAClE,CAAC,CAAC;QAEM,mBAAc,GAAG,CAAC,KAAa,EAAE,EAAE;YACzC,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC;YACrD,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,CAAC;QACpD,CAAC,CAAC;QAEM,kBAAa,GAAG,GAAG,EAAE;YAC3B,IAAI,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;QAC5D,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,EAAU,EAAE,EAAE;YACnC,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC;YAC1B,MAAM,OAAO,GAAG,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;YAClD,MAAM,OAAO,GAAG,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;YAClD,8CAA8C;YAC9C,MAAM,SAAS,GAAG,oBAAoB,CACpC,IAAI,EACJ,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,cAAc,GAAG,EAAE,CAC5C,CAAC;YACF,IAAI,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC;YACjC,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAClC,MAAM,MAAM,GAAG,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;YACvE,KAAK,GAAG,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;YACxC,MAAM,QAAQ,GAAG,KAAK,CAAC,cAAc,CAAC,SAAS,EAAE;gBAC/C,oBAAoB,EAAE,CAAC;aACxB,CAAC,CAAC;YACH,MAAM,UAAU,GAAG,OAAO,CAAC,cAAc,CAAC,SAAS,EAAE;gBACnD,oBAAoB,EAAE,CAAC;aACxB,CAAC,CAAC;YACH,OAAO,GAAG,QAAQ,IAAI,UAAU,IAAI,MAAM,EAAE,CAAC;QAC/C,CAAC,CAAC;QA3QA,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC;QACtD,MAAM,eAAe,GACnB,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,UAAU,CAAC;QACzD,MAAM,cAAc,GAClB,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,EAAE,GAAG,UAAU,CAAC;QACxD,MAAM,UAAU,GAAG,cAAc,GAAG,eAAe,CAAC;QACpD,MAAM,WAAW,GACf,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,OAAO,EAAE,GAAG,UAAU,CAAC;QAC3D,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,CAC1C,WAAW,EACX,eAAe,EACf,cAAc,CACf,CAAC;QACF,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC;QACxD,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ;YAClC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ;YACrB,CAAC,CAAC,uBAAuB,CAAC;QAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACtD,MAAM,gBAAgB,GAAG,QAAQ,GAAG,KAAK,CAAC;QAC1C,IAAI,CAAC,wBAAwB,CAC3B,mBAAmB,EACnB,eAAe,EACf,UAAU,EACV,gBAAgB,CACjB,CAAC;QAEF,IAAI,CAAC,KAAK,GAAG;YACX,YAAY,EAAE,KAAK;YACnB,gBAAgB,EAAE,KAAK;YACvB,SAAS,EAAE,KAAK;YAChB,UAAU;YACV,eAAe;YACf,cAAc;YACd,UAAU;YACV,mBAAmB;YACnB,KAAK;YACL,IAAI,EAAE,KAAK;YACX,WAAW;YACX,QAAQ;YACR,gBAAgB;SACjB,CAAC;IACJ,CAAC;IAEe,oBAAoB;QAClC,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAChD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IACzB,CAAC;IAiDO,KAAK,CAAC,SAAiB;QAC7B,IAAI,CAAC,cAAc,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC;QAE3C,gBAAgB;QAChB,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,mBAAmB,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE;YACtE,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YACzE,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW;gBAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAC3D,CAAC,CAAC,CAAC;IACL,CAAC;IAiCO,wBAAwB,CAC9B,WAAmB,EACnB,eAAuB,EACvB,UAAkB,EAClB,gBAAyB;QAEzB,IAAI,CAAC,cAAc;YACjB,CAAC,CAAC,WAAW,GAAG,eAAe,CAAC,GAAG,UAAU,CAAC;gBAC9C,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACxE,CAAC;IAuDO,WAAW,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW;QACzD,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;IAC7C,CAAC;IAEO,oBAAoB,CAAC,OAAe;QAC1C,IAAI,OAAO,KAAK,IAAI,CAAC,KAAK,CAAC,mBAAmB;YAAE,OAAO;QAEvD,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,CAC1C,OAAO,EACP,IAAI,CAAC,KAAK,CAAC,eAAe,EAC1B,IAAI,CAAC,KAAK,CAAC,cAAc,CAC1B,CAAC;QAEF,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,CAAC;YAC1C,MAAM,cAAc,GAAG,IAAI,IAAI,CAC7B,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,mBAAmB,CAC5C,CAAC;YACF,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QACxD,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,EAAE,mBAAmB,EAAE,EAAE,GAAG,EAAE;YAC1C,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC;YACzC,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;YAClC,MAAM,eAAe,GACnB,CAAC,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC;gBAClD,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;YACxB,IAAI,CAAC,cAAc,GAAG,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC;QACtE,CAAC,CAAC,CAAC;IACL,CAAC;IAyCM,YAAY,CAAC,KAAa;QAC/B,MAAM,WAAW,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,8CAA8C;QAC9C,OAAO,oBAAoB,CACzB,WAAW,EACX,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,cAAc,GAAG,EAAE,CAC5C,CAAC;IACJ,CAAC;IAEe,MAAM;QACpB,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACpC,MAAM,EACJ,KAAK,EAAE,YAAY,EACnB,IAAI,EACJ,mBAAmB,EACnB,eAAe,EACf,cAAc,GACf,GAAG,IAAI,CAAC,KAAK,CAAC;QACf,MAAM,MAAM,GAAG;YACb,YAAY,CAAC,SAAS,CAAC,qBAAqB,CAAC;YAC7C,YAAY,CAAC,SAAS,CAAC,sBAAsB,CAAC;YAC9C,YAAY,CAAC,SAAS,CAAC,mBAAmB,CAAC;YAC3C,YAAY,CAAC,SAAS,CAAC,mBAAmB,CAAC;YAC3C,YAAY,CAAC,SAAS,CAAC,iBAAiB,CAAC;YACzC,YAAY,CAAC,SAAS,CAAC,kBAAkB,CAAC;YAC1C,YAAY,CAAC,SAAS,CAAC,kBAAkB,CAAC;YAC1C,YAAY,CAAC,SAAS,CAAC,oBAAoB,CAAC;YAC5C,YAAY,CAAC,SAAS,CAAC,uBAAuB,CAAC;YAC/C,YAAY,CAAC,SAAS,CAAC,qBAAqB,CAAC;YAC7C,YAAY,CAAC,SAAS,CAAC,sBAAsB,CAAC;YAC9C,YAAY,CAAC,SAAS,CAAC,sBAAsB,CAAC;SAC/C,CAAC;QAEF,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CACjC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CACvD,CAAC;QACF,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,CACpC,YAAY,CAAC,UAAU,GAAG,mBAAmB,CAC9C,CAAC;QACF,MAAM,aAAa,GAAG,GACpB,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,CAC7B,KAAK,SAAS,CAAC,OAAO,EAAE,EAAE,CAAC;QAE3B,OAAO,CACL,6BAAK,SAAS,EAAC,wBAAwB;YACrC,oBAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,EAAC,GAAG,EAAC,MAAM,EAAC,SAAS,EAAC,sBAAsB;gBAC/D,oBAAC,UAAU,IACT,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,MAAM,EAAE,IAAI,CAAC,OAAO,EACpB,OAAO,EAAE,IAAI,CAAC,QAAQ,GACtB;gBACF,oBAAC,OAAO,IACN,OAAO,EACL,oBAAC,UAAU,IACT,IAAI,EAAE,SAAS,EACf,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,QAAQ,QACR,UAAU,SACV,EAEJ,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EAChC,eAAe,EAAE,CAAC,YAAY,EAAE,EAAE;wBAChC,IAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC;oBAClC,CAAC,EACD,SAAS,EAAC,KAAK,EACf,UAAU,EAAE;wBACV,MAAM;qBACP;oBAED,oBAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;4BACZ,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;4BAC9C,IAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC;wBAClC,CAAC;wBAEA,aAAa;;wBAAK,aAAa,CACjB,CACT,CACL;YAEP,oBAAC,QAAQ,IACP,UAAU,EAAE,YAAY,CAAC,UAAU,EACnC,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,mBAAmB,EAAE,mBAAmB,EACxC,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GAC/B;YAEF,oBAAC,IAAI,IACH,cAAc,EAAC,UAAU,EACzB,QAAQ,EAAC,MAAM,EACf,GAAG,EAAC,MAAM,EACV,SAAS,EAAC,oBAAoB;gBAE9B,oBAAC,cAAc;oBACb,oBAAC,KAAK,IAAC,OAAO,EAAC,OAAO,qBAAuB,CAC9B;gBACjB,oBAAC,OAAO,IACN,OAAO,EAAE,kBAAkB,CAAC,SAAS,CAAC,qBAAqB,CAAC;oBAE5D,oBAAC,MAAM,IACL,MAAM,QACN,SAAS,EAAC,YAAY,EACtB,YAAY,EAAE;4BACZ,IAAI,EAAE,OAAO;yBACd,EACD,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAC7D,KAAK,EAAE,YAAY,CAAC,QAAQ,EAAE,EAC9B,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;4BACpC,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE;4BACvB,KAAK,EAAE,GAAG,KAAK,GAAG;yBACnB,CAAC,CAAC,GACH,CACM;gBAEV,oBAAC,UAAU,IACT,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,iBAAiB,CAAC,EACtD,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI;oBAEd,oBAAC,OAAO,OAAG,CACA;gBAEb,oBAAC,OAAO,IACN,OAAO,EACL,oBAAC,WAAW,IACV,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,EAC5C,gBAAgB,EAAE,CAAC,KAAK,EAAE,EAAE;4BAC1B,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;4BACjD,IAAI,CAAC,QAAQ,CACX,EAAE,WAAW,EAAE,QAAQ,EAAE,EACzB,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,WAAW,GAAG,QAAQ,CAAC,CACvD,CAAC;wBACJ,CAAC;wBAED,oBAAC,IAAI,IAAC,OAAO,EAAC,OAAO,EAAC,EAAE,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,IACzD,kBAAkB,CAAC,SAAS,CAAC,2BAA2B,CAAC,CACrD;wBACP,oBAAC,YAAY,OAAG;wBAChB,oBAAC,eAAe,IAAC,kBAAkB,EAAC,KAAK,GAAG;wBAC5C,oBAAC,YAAY,IACX,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GACvD,CACU,EAEhB,SAAS,EAAC,KAAK,EACf,UAAU,EAAE;wBACV,MAAM;qBACP;oBAED,oBAAC,UAAU,IACT,SAAS,EAAC,YAAY,iBACV,wBAAwB,EACpC,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,mBAAmB,CAAC,EACxD,OAAO,EAAE,IAAI,CAAC,oBAAoB;wBAElC,oBAAC,WAAW,OAAG,CACJ,CACL,CACL,CACH,CACP,CAAC;IACJ,CAAC;CACF;AAOD,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CACrC,SAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,GAAG;IAChD,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IACvC,MAAM,OAAO,GAAG,SAAS,CAAC,wBAAwB,CAAC,CAAC;IAEpD,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO;QACvB,oBAAC,MAAM,IACL,SAAS,EAAC,YAAY,EACtB,SAAS,EAAE,oBAAC,WAAW,OAAG,iBACd,wBAAwB,EACpC,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG;YAER,8BAAM,SAAS,EAAC,0BAA0B,IAAE,QAAQ,CAAQ,CACrD,CACD,CACX,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Timeline\n */\n\nimport \"./SolarTimeline.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { ColorByName, ColorDef } from \"@itwin/core-common\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { adjustDateToTimezone, UiComponents } from \"@itwin/components-react\";\nimport {\n  Button,\n  ColorBuilder,\n  ColorInputPanel,\n  ColorPalette,\n  ColorPicker,\n  DatePicker,\n  Flex,\n  Icon,\n  IconButton,\n  Label,\n  Popover,\n  Select,\n  Slider,\n  Text,\n  Tooltip,\n  VisuallyHidden,\n} from \"@itwin/itwinui-react\";\nimport {\n  SvgCalendar,\n  SvgLoop,\n  SvgMoon,\n  SvgSettings,\n  SvgSun,\n} from \"@itwin/itwinui-icons-react\";\nimport type { SolarDataProvider } from \"./interfaces.js\";\nimport { UiIModelComponents } from \"../UiIModelComponents.js\";\nimport { PlayButton } from \"./PlayButton.js\";\nimport { useTranslation } from \"../useTranslation.js\";\n\nconst msPerMinute = 1000 * 60;\nconst msPerHour = msPerMinute * 60;\nconst defaultPlaybackDuration = 40 * 1000;\n\nconst offset = 6;\n\n// eslint-disable-next-line deprecation/deprecation\ninterface TimelineProps extends CommonProps {\n  dayStartMs: number;\n  sunRiseOffsetMs: number;\n  sunSetOffsetMs: number;\n  currentTimeOffsetMs: number;\n  isPlaying: boolean;\n  formatTick?: (ms: number) => string;\n  formatTime: (ms: number) => string;\n  onChange?: (values: ReadonlyArray<number>) => void;\n  onUpdate?: (values: ReadonlyArray<number>) => void;\n}\n\nfunction Timeline(props: TimelineProps) {\n  const {\n    formatTick,\n    formatTime,\n    onChange,\n    onUpdate,\n    dayStartMs,\n    sunSetOffsetMs,\n    sunRiseOffsetMs,\n    currentTimeOffsetMs,\n  } = props;\n\n  const tooltipContent = formatTime(dayStartMs + currentTimeOffsetMs);\n\n  const className = classnames(\n    \"solar-timeline\",\n    props.className,\n    formatTick && \"showticks\"\n  );\n  const sunRiseStr = formatTime(dayStartMs + sunRiseOffsetMs);\n  const sunSetStr = formatTime(dayStartMs + sunSetOffsetMs);\n  return (\n    <div className={className}>\n      <VisuallyHidden>Solar timeline</VisuallyHidden>\n      <Slider\n        thumbProps={() => ({ \"aria-labelledby\": \"timeline\" })}\n        step={msPerMinute}\n        min={sunRiseOffsetMs}\n        max={sunSetOffsetMs}\n        minLabel={\n          <Tooltip content={sunRiseStr}>\n            <Icon>\n              <SvgSun />\n            </Icon>\n          </Tooltip>\n        }\n        maxLabel={\n          <Tooltip content={sunSetStr}>\n            <Icon>\n              <SvgMoon />\n            </Icon>\n          </Tooltip>\n        }\n        onUpdate={onUpdate}\n        onChange={onChange}\n        values={[currentTimeOffsetMs]}\n        tooltipProps={() => ({\n          content: tooltipContent,\n        })}\n      />\n    </div>\n  );\n}\n\ninterface SolarTimelineComponentProps {\n  dataProvider: SolarDataProvider; // provides date, sunrise, sunset in ms, also contains timezone offset from UTC, and updates the display style to current time.\n  onPlayPause?: (playing: boolean) => void; // callback triggered when play/pause button is pressed\n  duration?: number; // playback duration in milliseconds\n  speed?: number;\n}\n\ninterface SolarTimelineComponentState {\n  isPlaying: boolean; // timeline is currently playing or paused\n  isDateOpened: boolean; // date picker is opened\n  isSettingsOpened: boolean; // settings popup is opened\n  dayStartMs: number;\n  sunRiseOffsetMs: number;\n  sunSetOffsetMs: number;\n  sunDeltaMs: number;\n  currentTimeOffsetMs: number;\n  speed: number;\n  loop: boolean;\n  shadowColor: ColorDef;\n  duration: number; // playback duration in milliseconds\n  adjustedDuration: number; // playback duration in milliseconds/ speed\n}\n\n/** Solar Timeline\n * @alpha\n */\nexport class SolarTimeline extends React.PureComponent<\n  SolarTimelineComponentProps,\n  SolarTimelineComponentState\n> {\n  private _requestFrame = 0;\n  private _unmounted = false;\n  private _timeLastCycle = 0;\n  private _totalPlayTime = 0;\n\n  private readonly _presetColors = [\n    ColorDef.create(ColorByName.grey),\n    ColorDef.create(ColorByName.lightGrey),\n    ColorDef.create(ColorByName.darkGrey),\n    ColorDef.create(ColorByName.lightBlue),\n    ColorDef.create(ColorByName.lightGreen),\n    ColorDef.create(ColorByName.darkGreen),\n    ColorDef.create(ColorByName.tan),\n    ColorDef.create(ColorByName.darkBrown),\n  ];\n\n  private readonly _speeds = [1, 2, 3, 4, 5, 6];\n\n  constructor(props: SolarTimelineComponentProps) {\n    super(props);\n\n    const dayStartMs = this.props.dataProvider.dayStartMs;\n    const sunRiseOffsetMs =\n      this.props.dataProvider.sunrise.getTime() - dayStartMs;\n    const sunSetOffsetMs =\n      this.props.dataProvider.sunset.getTime() - dayStartMs;\n    const sunDeltaMs = sunSetOffsetMs - sunRiseOffsetMs;\n    const sunOffsetMs =\n      this.props.dataProvider.timeOfDay.getTime() - dayStartMs;\n    const currentTimeOffsetMs = this.ensureRange(\n      sunOffsetMs,\n      sunRiseOffsetMs,\n      sunSetOffsetMs\n    );\n    const shadowColor = this.props.dataProvider.shadowColor;\n    const duration = this.props.duration\n      ? this.props.duration\n      : defaultPlaybackDuration;\n    const speed = this.props.speed ? this.props.speed : 2;\n    const adjustedDuration = duration / speed;\n    this.setPlaybackTimeBySunTime(\n      currentTimeOffsetMs,\n      sunRiseOffsetMs,\n      sunDeltaMs,\n      adjustedDuration\n    );\n\n    this.state = {\n      isDateOpened: false,\n      isSettingsOpened: false,\n      isPlaying: false,\n      dayStartMs,\n      sunRiseOffsetMs,\n      sunSetOffsetMs,\n      sunDeltaMs,\n      currentTimeOffsetMs,\n      speed,\n      loop: false,\n      shadowColor,\n      duration,\n      adjustedDuration,\n    };\n  }\n\n  public override componentWillUnmount() {\n    window.cancelAnimationFrame(this._requestFrame);\n    this._unmounted = true;\n  }\n\n  // recursively update the animation until we hit the end or the pause button is clicked\n  private _updateAnimation = (_timestamp: number) => {\n    if (!this.state.isPlaying || this._unmounted) {\n      window.cancelAnimationFrame(this._requestFrame);\n      return;\n    }\n\n    const currentTime = new Date().getTime();\n    this._totalPlayTime += currentTime - this._timeLastCycle;\n    this._timeLastCycle = currentTime;\n    let percentComplete = this._totalPlayTime / this.state.adjustedDuration;\n    if (percentComplete > 1) percentComplete = 1;\n\n    let newPlayingState = true;\n\n    // calculate the next sun time base on the percentage playback complete - should be int value as that is step amount for slider\n    let nextSunOffset = Math.floor(\n      this.state.sunRiseOffsetMs + percentComplete * this.state.sunDeltaMs\n    );\n\n    if (percentComplete > 0.99) {\n      if (!this.state.loop) {\n        newPlayingState = false;\n        nextSunOffset = this.state.sunSetOffsetMs;\n        window.cancelAnimationFrame(this._requestFrame);\n      } else {\n        nextSunOffset = this.state.sunRiseOffsetMs;\n        this._totalPlayTime = 0;\n      }\n    }\n\n    if (this.props.dataProvider.onTimeChanged) {\n      const currentSunTime = new Date(this.state.dayStartMs + nextSunOffset);\n      this.props.dataProvider.onTimeChanged(currentSunTime);\n    }\n\n    this.setState(\n      { isPlaying: newPlayingState, currentTimeOffsetMs: nextSunOffset },\n      () => {\n        if (newPlayingState)\n          this._requestFrame = window.requestAnimationFrame(\n            this._updateAnimation\n          );\n      }\n    );\n  };\n\n  private _play(sunTimeMs: number) {\n    this._timeLastCycle = new Date().getTime();\n\n    // start playing\n    this.setState({ isPlaying: true, currentTimeOffsetMs: sunTimeMs }, () => {\n      this._requestFrame = window.requestAnimationFrame(this._updateAnimation);\n      if (this.props.onPlayPause) this.props.onPlayPause(true);\n    });\n  }\n\n  // user clicked pause button\n  private _onPause = () => {\n    if (!this.state.isPlaying) return;\n\n    const currentTime = new Date().getTime();\n    this._totalPlayTime += currentTime - this._timeLastCycle;\n\n    // stop requesting frames\n    window.cancelAnimationFrame(this._requestFrame);\n\n    // stop playing\n    this.setState({ isPlaying: false });\n\n    if (this.props.onPlayPause) this.props.onPlayPause(false);\n  };\n\n  // user clicked play button\n  private _onPlay = () => {\n    if (this.state.isPlaying) return;\n\n    if (\n      this.state.currentTimeOffsetMs >= this.state.sunSetOffsetMs ||\n      this.state.currentTimeOffsetMs <= this.state.sunRiseOffsetMs\n    ) {\n      this._totalPlayTime = 0;\n      this._play(this.state.sunRiseOffsetMs);\n    } else {\n      this._play(this.state.currentTimeOffsetMs);\n    }\n  };\n\n  private setPlaybackTimeBySunTime(\n    sunOffsetMs: number,\n    sunRiseOffsetMs: number,\n    sunDeltaMs: number,\n    adjustedDuration?: number\n  ) {\n    this._totalPlayTime =\n      ((sunOffsetMs - sunRiseOffsetMs) / sunDeltaMs) *\n      (adjustedDuration ? adjustedDuration : this.state.adjustedDuration);\n  }\n\n  private _onDateChange = (newDate: Date) => {\n    this.props.dataProvider.setDateAndTime(newDate);\n\n    const dayStartMs = this.props.dataProvider.dayStartMs;\n    const sunRiseOffsetMs =\n      this.props.dataProvider.sunrise.getTime() - dayStartMs;\n    const sunSetOffsetMs =\n      this.props.dataProvider.sunset.getTime() - dayStartMs;\n    const sunDeltaMs = sunSetOffsetMs - sunRiseOffsetMs;\n\n    /** call dataProvider to update display style */\n    // this.props.dataProvider.onTimeChanged?.(this.props.dataProvider.timeOfDay);\n\n    // Update time\n    const newHours = newDate.getHours();\n    const newMinutes = newDate.getMinutes();\n    const newSunTime = newHours * msPerHour + newMinutes * msPerMinute;\n    const dateWithNewTime = new Date(dayStartMs + newSunTime);\n    // this.props.dataProvider.setDateAndTime(dateWithNewTime, true);\n\n    const currentTimeOffsetMs = this.ensureRange(\n      newSunTime,\n      sunRiseOffsetMs,\n      sunSetOffsetMs\n    );\n    this.setPlaybackTimeBySunTime(\n      currentTimeOffsetMs,\n      sunRiseOffsetMs,\n      sunDeltaMs\n    );\n    this._timeLastCycle = new Date().getTime();\n\n    this.props.dataProvider.onTimeChanged?.(dateWithNewTime);\n    this.setState({\n      dayStartMs,\n      sunRiseOffsetMs,\n      sunSetOffsetMs,\n      currentTimeOffsetMs,\n      sunDeltaMs,\n      isDateOpened: false,\n    });\n  };\n\n  private _onCloseSettingsPopup = () => {\n    this.setState({ isSettingsOpened: false });\n  };\n\n  private _onOpenSettingsPopup = () => {\n    this.setState((prevState) => ({\n      isSettingsOpened: !prevState.isSettingsOpened,\n    }));\n  };\n\n  private ensureRange(value: number, min: number, max: number): number {\n    return Math.max(Math.min(value, max), min);\n  }\n\n  private processSunTimeChange(sunTime: number) {\n    if (sunTime === this.state.currentTimeOffsetMs) return;\n\n    const currentTimeOffsetMs = this.ensureRange(\n      sunTime,\n      this.state.sunRiseOffsetMs,\n      this.state.sunSetOffsetMs\n    );\n\n    if (this.props.dataProvider.onTimeChanged) {\n      const currentSunTime = new Date(\n        this.state.dayStartMs + currentTimeOffsetMs\n      );\n      this.props.dataProvider.onTimeChanged(currentSunTime);\n    }\n\n    this.setState({ currentTimeOffsetMs }, () => {\n      const currentTime = new Date().getTime();\n      this._timeLastCycle = currentTime;\n      const percentComplete =\n        (currentTimeOffsetMs - this.state.sunRiseOffsetMs) /\n        this.state.sunDeltaMs;\n      this._totalPlayTime = percentComplete * this.state.adjustedDuration;\n    });\n  }\n\n  private _onUpdate = (values: ReadonlyArray<number>) => {\n    if (!this.state.isPlaying) this.processSunTimeChange(values[0]);\n  };\n\n  private _onChange = (values: ReadonlyArray<number>) => {\n    if (!this.state.isPlaying) this.processSunTimeChange(values[0]);\n  };\n\n  private _onSpeedChange = (value: number) => {\n    const adjustedDuration = this.state.duration / value;\n    this.setState({ speed: value, adjustedDuration });\n  };\n\n  private _onToggleLoop = () => {\n    this.setState((prevState) => ({ loop: !prevState.loop }));\n  };\n\n  private _formatTime = (ms: number) => {\n    const date = new Date(ms);\n    const amLabel = UiComponents.translate(\"time.am\");\n    const pmLabel = UiComponents.translate(\"time.pm\");\n    // convert project date to browser locale date\n    const localTime = adjustDateToTimezone(\n      date,\n      this.props.dataProvider.timeZoneOffset * 60\n    );\n    let hours = localTime.getHours();\n    const minutes = date.getMinutes();\n    const abbrev = hours < 12 ? amLabel : hours === 24 ? amLabel : pmLabel;\n    hours = hours > 12 ? hours - 12 : hours;\n    const hoursStr = hours.toLocaleString(undefined, {\n      minimumIntegerDigits: 2,\n    });\n    const minutesStr = minutes.toLocaleString(undefined, {\n      minimumIntegerDigits: 2,\n    });\n    return `${hoursStr}:${minutesStr} ${abbrev}`;\n  };\n\n  public getLocalTime(ticks: number): Date {\n    const projectTime = new Date(ticks);\n    // convert project date to browser locale date\n    return adjustDateToTimezone(\n      projectTime,\n      this.props.dataProvider.timeZoneOffset * 60\n    );\n  }\n\n  public override render() {\n    const { dataProvider } = this.props;\n    const {\n      speed: currentSpeed,\n      loop,\n      currentTimeOffsetMs,\n      sunRiseOffsetMs,\n      sunSetOffsetMs,\n    } = this.state;\n    const months = [\n      UiComponents.translate(\"month.short.january\"),\n      UiComponents.translate(\"month.short.february\"),\n      UiComponents.translate(\"month.short.march\"),\n      UiComponents.translate(\"month.short.april\"),\n      UiComponents.translate(\"month.short.may\"),\n      UiComponents.translate(\"month.short.june\"),\n      UiComponents.translate(\"month.short.july\"),\n      UiComponents.translate(\"month.short.august\"),\n      UiComponents.translate(\"month.short.september\"),\n      UiComponents.translate(\"month.short.october\"),\n      UiComponents.translate(\"month.short.november\"),\n      UiComponents.translate(\"month.short.december\"),\n    ];\n\n    const localTime = this.getLocalTime(\n      this.state.dayStartMs + this.state.currentTimeOffsetMs\n    );\n    const formattedTime = this._formatTime(\n      dataProvider.dayStartMs + currentTimeOffsetMs\n    );\n    const formattedDate = `${\n      months[localTime.getMonth()]\n    }, ${localTime.getDate()}`;\n\n    return (\n      <div className=\"solar-timeline-wrapper\">\n        <Flex flexWrap=\"wrap\" gap=\"none\" className=\"solar-timeline-start\">\n          <PlayButton\n            isPlaying={this.state.isPlaying}\n            onPlay={this._onPlay}\n            onPause={this._onPause}\n          />\n          <Popover\n            content={\n              <DatePicker\n                date={localTime}\n                onChange={this._onDateChange}\n                showTime\n                use12Hours\n              />\n            }\n            visible={this.state.isDateOpened}\n            onVisibleChange={(isDateOpened) => {\n              this.setState({ isDateOpened });\n            }}\n            placement=\"top\"\n            middleware={{\n              offset,\n            }}\n          >\n            <CalendarButton\n              onClick={() => {\n                const isDateOpened = !this.state.isDateOpened;\n                this.setState({ isDateOpened });\n              }}\n            >\n              {formattedDate} @ {formattedTime}\n            </CalendarButton>\n          </Popover>\n        </Flex>\n\n        <Timeline\n          dayStartMs={dataProvider.dayStartMs}\n          sunSetOffsetMs={sunSetOffsetMs}\n          sunRiseOffsetMs={sunRiseOffsetMs}\n          currentTimeOffsetMs={currentTimeOffsetMs}\n          onChange={this._onChange}\n          onUpdate={this._onUpdate}\n          formatTime={this._formatTime}\n          isPlaying={this.state.isPlaying}\n        />\n\n        <Flex\n          justifyContent=\"flex-end\"\n          flexWrap=\"wrap\"\n          gap=\"none\"\n          className=\"solar-timeline-end\"\n        >\n          <VisuallyHidden>\n            <Label htmlFor=\"speed\">Timeline speed</Label>\n          </VisuallyHidden>\n          <Tooltip\n            content={UiIModelComponents.translate(\"solartimeline.speed\")}\n          >\n            <Select\n              native\n              styleType=\"borderless\"\n              triggerProps={{\n                name: \"speed\",\n              }}\n              onChange={(newValue) => this._onSpeedChange(Number(newValue))}\n              value={currentSpeed.toString()}\n              options={this._speeds.map((speed) => ({\n                value: speed.toString(),\n                label: `${speed}x`,\n              }))}\n            />\n          </Tooltip>\n\n          <IconButton\n            styleType=\"borderless\"\n            label={UiIModelComponents.translate(\"timeline.repeat\")}\n            onClick={this._onToggleLoop}\n            isActive={loop}\n          >\n            <SvgLoop />\n          </IconButton>\n\n          <Popover\n            content={\n              <ColorPicker\n                selectedColor={this.state.shadowColor.colors}\n                onChangeComplete={(color) => {\n                  const colorDef = ColorDef.create(color.toTbgr());\n                  this.setState(\n                    { shadowColor: colorDef },\n                    () => (this.props.dataProvider.shadowColor = colorDef)\n                  );\n                }}\n              >\n                <Text variant=\"title\" as=\"h2\" style={{ textAlign: \"center\" }}>\n                  {UiIModelComponents.translate(\"solarsettings.shadowcolor\")}\n                </Text>\n                <ColorBuilder />\n                <ColorInputPanel defaultColorFormat=\"hsl\" />\n                <ColorPalette\n                  colors={this._presetColors.map((color) => color.colors)}\n                />\n              </ColorPicker>\n            }\n            placement=\"top\"\n            middleware={{\n              offset,\n            }}\n          >\n            <IconButton\n              styleType=\"borderless\"\n              data-testid=\"shadow-settings-button\"\n              label={UiIModelComponents.translate(\"timeline.settings\")}\n              onClick={this._onOpenSettingsPopup}\n            >\n              <SvgSettings />\n            </IconButton>\n          </Popover>\n        </Flex>\n      </div>\n    );\n  }\n}\n\ninterface CalendarButtonProps {\n  children?: React.ReactNode;\n  onClick?: () => void;\n}\n\nconst CalendarButton = React.forwardRef<HTMLButtonElement, CalendarButtonProps>(\n  function CalendarButton({ children, onClick }, ref) {\n    const { translate } = useTranslation();\n    const tooltip = translate(\"solartimeline.dateTime\");\n\n    return (\n      <Tooltip content={tooltip}>\n        <Button\n          styleType=\"borderless\"\n          startIcon={<SvgCalendar />}\n          data-testid=\"solar-date-time-button\"\n          title={tooltip}\n          onClick={onClick}\n          ref={ref}\n        >\n          <span className=\"solar-timeline-date-time\">{children}</span>\n        </Button>\n      </Tooltip>\n    );\n  }\n);\n"]}

package/lib/imodel-components-react/timeline/SolarTimeline.scss

@@ -0,0 +1,43 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.solar-timeline-wrapper {
+  width: 100%;
+  position: relative;
+  display: grid;
+  align-items: center;
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas: "solar-timeline-start solar-timeline solar-timeline-end";
+}
+
+@container solar-timeline (width < 600px) {
+  .solar-timeline-wrapper {
+    grid-template-columns: auto auto;
+    grid-template-areas: "solar-timeline solar-timeline" "solar-timeline-start solar-timeline-end";
+  }
+}
+
+@container solar-timeline (width < 320px) {
+  .solar-timeline-date-time {
+    clip-path: inset(50%) !important;
+    overflow: hidden !important;
+    position: absolute !important;
+    white-space: nowrap !important;
+    block-size: 1px !important;
+    inline-size: 1px !important;
+  }
+}
+
+.solar-timeline {
+  grid-area: solar-timeline;
+  margin-inline: var(--iui-size-2xs);
+}
+
+.solar-timeline-start {
+  grid-area: solar-timeline-start;
+}
+
+.solar-timeline-end {
+  grid-area: solar-timeline-end;
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpeedTimeline.d.ts","sourceRoot":"","sources":["../../../src/imodel-components-react/timeline/SpeedTimeline.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKrD,UAAU,UAAW,SAAQ,WAAW;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,UAAU,qBA0B9C"}

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

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