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

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

@@ -1 +1 @@
-{"version":3,"file":"QuantityFormatPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/QuantityFormatPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module QuantityFormat\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport {\r\n  CustomFormatPropEditorSpec, getQuantityTypeKey, IModelApp, isCheckboxFormatPropEditorSpec, isCustomQuantityTypeDefinition,\r\n  isTextInputFormatPropEditorSpec, isTextSelectFormatPropEditorSpec, QuantityTypeArg,\r\n} from \"@itwin/core-frontend\";\r\nimport { FormatProps, UnitProps, UnitsProvider } from \"@itwin/core-quantity\";\r\nimport { CommonProps, Select } from \"@itwin/core-react\";\r\nimport { Checkbox, Input } from \"@itwin/itwinui-react\";\r\nimport { FormatPanel } from \"./FormatPanel\";\r\nimport { DeepCompare } from \"@itwin/core-geometry\";\r\n\r\nfunction createTextInputFormatPropEditor(key: string, label: string, inProps: FormatProps,\r\n  getString: (props: FormatProps) => string, setString: (props: FormatProps, value: string) => FormatProps, fireFormatChange: (newProps: FormatProps) => void) {\r\n  const value = getString(inProps);\r\n  return (\r\n    <React.Fragment key={`${key}`}>\r\n      <span key={`${key}-label`} className={\"uicore-label\"}>{label}</span>\r\n      <Input data-testid={`${key}-editor`} key={`${key}-editor`}\r\n        value={value}\r\n        size=\"small\"\r\n        onChange={(e) => {\r\n          const newProps = setString(inProps, e.currentTarget.value);\r\n          fireFormatChange(newProps);\r\n        }}\r\n      />\r\n    </React.Fragment>\r\n  );\r\n}\r\n\r\nfunction createSelectFormatPropEditor(key: string, label: string, options: { label: string, value: string }[], inProps: FormatProps,\r\n  getString: (props: FormatProps) => string, setString: (props: FormatProps, value: string) => FormatProps, fireFormatChange: (newProps: FormatProps) => void) {\r\n  const value = getString(inProps);\r\n  return (\r\n    <React.Fragment key={`${key}`}>\r\n      <span key={`${key}-label`} className={\"uicore-label\"}>{label}</span>\r\n      {/* NEEDSWORK - unable to migrate this Select to iTwinUI because no menu items were found */}\r\n      {/* eslint-disable-next-line deprecation/deprecation */}\r\n      <Select data-testid={`${key}-editor`} key={`${key}-editor`}\r\n        value={value}\r\n        options={options}\r\n        onChange={(e) => {\r\n          const newProps = setString(inProps, e.currentTarget.value);\r\n          fireFormatChange(newProps);\r\n        }}\r\n      />\r\n    </React.Fragment>\r\n  );\r\n}\r\n\r\nfunction createCheckboxFormatPropEditor(key: string, label: string, inProps: FormatProps,\r\n  getBool: (props: FormatProps) => boolean, setBool: (props: FormatProps, isChecked: boolean) => FormatProps, fireFormatChange: (newProps: FormatProps) => void) {\r\n  const isChecked = getBool(inProps);\r\n  return (\r\n    <React.Fragment key={`${key}`}>\r\n      <span key={`${key}-label`} className={\"uicore-label\"}>{label}</span>\r\n      <Checkbox data-testid={`${key}-editor`} key={`${key}-editor`}\r\n        checked={isChecked}\r\n        onChange={(e) => {\r\n          const newProps = setBool(inProps, e.target.checked);\r\n          fireFormatChange(newProps);\r\n        }} />\r\n    </React.Fragment>\r\n  );\r\n}\r\n\r\nfunction formatAreEqual(obj1: FormatProps, obj2: FormatProps) {\r\n  const compare = new DeepCompare();\r\n  return compare.compare(obj1, obj2);\r\n}\r\n\r\n/** Properties of [[QuantityFormatPanel]] component.\r\n * @alpha\r\n */\r\nexport interface QuantityFormatPanelProps extends CommonProps {\r\n  quantityType: QuantityTypeArg;\r\n  onFormatChange?: (format: FormatProps) => void;\r\n  /** props below are to be passed on to FormatPanel */\r\n  showSample?: boolean;\r\n  initialMagnitude?: number;\r\n  enableMinimumProperties?: boolean;\r\n}\r\n\r\n/** Component to set properties that control Quantity Formatting.\r\n * @alpha\r\n */\r\nexport function QuantityFormatPanel(props: QuantityFormatPanelProps) {\r\n  const { quantityType, onFormatChange, ...otherProps } = props;\r\n  const [formatProps, setFormatProps] = React.useState<FormatProps>();\r\n  const initialFormatProps = React.useRef<FormatProps>();\r\n\r\n  const [persistenceUnit, setPersistenceUnit] = React.useState(() => {\r\n    const quantityTypeKey = getQuantityTypeKey(quantityType);\r\n    const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);\r\n    // istanbul ignore else\r\n    if (quantityTypeDefinition)\r\n      return quantityTypeDefinition.persistenceUnit;\r\n    else\r\n      throw Error(`Unable to locate a quantity type with type ${quantityType}`);\r\n  });\r\n\r\n  React.useEffect(() => {\r\n    const newFormatProps = IModelApp.quantityFormatter.getFormatPropsByQuantityType(quantityType);\r\n    // istanbul ignore else\r\n    if (!initialFormatProps.current)\r\n      initialFormatProps.current = newFormatProps;\r\n    setFormatProps(newFormatProps);\r\n  }, [quantityType]); // no dependencies defined as we want this to run on every render\r\n\r\n  // handle case where quantityType does not change but the formatProps for that quantity type has (ie after a Set or Clear)\r\n  // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  React.useEffect(() => {\r\n    const newFormatProps = IModelApp.quantityFormatter.getFormatPropsByQuantityType(quantityType);\r\n    // istanbul ignore else\r\n    if (initialFormatProps.current && newFormatProps) {\r\n      if (!formatAreEqual(newFormatProps, initialFormatProps.current)) {\r\n        initialFormatProps.current = newFormatProps;\r\n        setFormatProps(newFormatProps);\r\n      }\r\n    }\r\n  }); // no dependencies defined as we want this to run on every render\r\n\r\n  React.useEffect(() => {\r\n    const quantityTypeKey = getQuantityTypeKey(quantityType);\r\n    const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);\r\n    // istanbul ignore else\r\n    if (quantityTypeDefinition)\r\n      setPersistenceUnit(quantityTypeDefinition.persistenceUnit);\r\n  }, [quantityType]);\r\n\r\n  const handleOnFormatChanged = React.useCallback(async (newProps: FormatProps) => {\r\n    setFormatProps(newProps);\r\n    onFormatChange && onFormatChange(newProps);\r\n  }, [onFormatChange]);\r\n\r\n  const createCustomPropEditors = React.useCallback((specs: CustomFormatPropEditorSpec[], inProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => {\r\n    return specs.map((spec, index) => {\r\n      if (isCheckboxFormatPropEditorSpec(spec))\r\n        return createCheckboxFormatPropEditor(`${spec.editorType}-${index}`, spec.label, inProps, spec.getBool, spec.setBool, fireFormatChange);\r\n      if (isTextSelectFormatPropEditorSpec(spec))\r\n        return createSelectFormatPropEditor(`${spec.editorType}-${index}`, spec.label, spec.selectOptions, inProps, spec.getString, spec.setString, fireFormatChange);\r\n      /* istanbul ignore else */\r\n      if (isTextInputFormatPropEditorSpec(spec))\r\n        return createTextInputFormatPropEditor(`${spec.editorType}-${index}`, spec.label, inProps, spec.getString, spec.setString, fireFormatChange);\r\n      /* istanbul ignore next */\r\n      return <div key={index} />;\r\n    });\r\n  }, []);\r\n\r\n  const providePrimaryChildren = React.useCallback(\r\n    (inProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => {\r\n      const quantityTypeKey = getQuantityTypeKey(quantityType);\r\n      const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);\r\n      if (quantityTypeDefinition && isCustomQuantityTypeDefinition(quantityTypeDefinition) &&\r\n        quantityTypeDefinition.isCompatibleFormatProps(inProps)) {\r\n        // istanbul ignore else\r\n        if (quantityTypeDefinition.primaryPropEditorSpecs)\r\n          return createCustomPropEditors(quantityTypeDefinition.primaryPropEditorSpecs, inProps, fireFormatChange);\r\n      }\r\n      return null;\r\n    }, [createCustomPropEditors, quantityType]);\r\n\r\n  const provideSecondaryChildren = React.useCallback(\r\n    (inProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => {\r\n      const quantityTypeKey = getQuantityTypeKey(quantityType);\r\n      const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);\r\n      if (quantityTypeDefinition && isCustomQuantityTypeDefinition(quantityTypeDefinition) &&\r\n        quantityTypeDefinition.isCompatibleFormatProps(inProps)) {\r\n        // istanbul ignore else\r\n        if (quantityTypeDefinition.secondaryPropEditorSpecs)\r\n          return createCustomPropEditors(quantityTypeDefinition.secondaryPropEditorSpecs, inProps, fireFormatChange);\r\n      }\r\n      return null;\r\n    }, [createCustomPropEditors, quantityType]);\r\n\r\n  const provideFormatSpec = React.useCallback(\r\n    async (inProps: FormatProps, _persistenceUnit: UnitProps, _unitsProvider: UnitsProvider) => {\r\n      return IModelApp.quantityFormatter.generateFormatterSpecByType(quantityType, inProps);\r\n    }, [quantityType]);\r\n\r\n  return (\r\n    <div className=\"components-quantityFormat-quantityPanel\">\r\n      {persistenceUnit && formatProps &&\r\n        <FormatPanel onFormatChange={handleOnFormatChanged} {...otherProps}\r\n          initialFormat={formatProps}\r\n          unitsProvider={IModelApp.quantityFormatter.unitsProvider}\r\n          persistenceUnit={persistenceUnit}\r\n          providePrimaryChildren={providePrimaryChildren}\r\n          provideSecondaryChildren={provideSecondaryChildren}\r\n          provideFormatSpec={provideFormatSpec}\r\n        />}\r\n    </div>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"QuantityFormatPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/QuantityFormatPanel.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;AAEH,6CAA+B;AAC/B,wDAG8B;AAG9B,wDAA+D;AAC/D,+CAA4C;AAC5C,wDAAmD;AAEnD,SAAS,+BAA+B,CAAC,GAAW,EAAE,KAAa,EAAE,OAAoB,EACvF,SAAyC,EAAE,SAA6D,EAAE,gBAAiD;IAC3J,MAAM,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;IACjC,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,GAAG,GAAG,EAAE;QAC3B,8BAAM,GAAG,EAAE,GAAG,GAAG,QAAQ,EAAE,SAAS,EAAE,cAAc,IAAG,KAAK,CAAQ;QACpE,oBAAC,qBAAK,mBAAc,GAAG,GAAG,SAAS,EAAE,GAAG,EAAE,GAAG,GAAG,SAAS,EACvD,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACd,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBAC3D,gBAAgB,CAAC,QAAQ,CAAC,CAAC;YAC7B,CAAC,GACD,CACa,CAClB,CAAC;AACJ,CAAC;AACD,SAAS,4BAA4B,CAAC,GAAW,EAAE,KAAa,EAAE,OAA2C,EAAE,OAAoB,EACjI,SAAyC,EAAE,SAA6D,EAAE,gBAAiD;IAC3J,MAAM,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;IACjC,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,GAAG,GAAG,EAAE;QAC3B,8BAAM,GAAG,EAAE,GAAG,GAAG,QAAQ,EAAE,SAAS,EAAE,cAAc,IAAG,KAAK,CAAQ;QACpE,oBAAC,sBAAM,mBAAc,GAAG,GAAG,SAAS,EAAE,GAAG,EAAE,GAAG,GAAG,SAAS,EACxD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,OAAO,EACb,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;gBACrB,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;gBAC9C,gBAAgB,CAAC,QAAQ,CAAC,CAAC;YAC7B,CAAC,GACD,CACa,CAClB,CAAC;AACJ,CAAC;AAED,SAAS,8BAA8B,CAAC,GAAW,EAAE,KAAa,EAAE,OAAoB,EACtF,OAAwC,EAAE,OAAgE,EAAE,gBAAiD;IAC7J,MAAM,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IACnC,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,GAAG,GAAG,EAAE;QAC3B,8BAAM,GAAG,EAAE,GAAG,GAAG,QAAQ,EAAE,SAAS,EAAE,cAAc,IAAG,KAAK,CAAQ;QACpE,oBAAC,wBAAQ,mBAAc,GAAG,GAAG,SAAS,EAAE,GAAG,EAAE,GAAG,GAAG,SAAS,EAC1D,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACd,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;gBACpD,gBAAgB,CAAC,QAAQ,CAAC,CAAC;YAC7B,CAAC,GAAI,CACQ,CAClB,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,IAAiB,EAAE,IAAiB;IAC1D,MAAM,OAAO,GAAG,IAAI,2BAAW,EAAE,CAAC;IAClC,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AACrC,CAAC;AAcD;;GAEG;AACH,SAAgB,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAC9D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAe,CAAC;IACpE,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,EAAe,CAAC;IAEvD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAa,CAAC;IAE1E,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,cAAc,GAAG,yBAAS,CAAC,iBAAiB,CAAC,4BAA4B,CAAC,YAAY,CAAC,CAAC;QAC9F,uBAAuB;QACvB,IAAI,CAAC,kBAAkB,CAAC,OAAO;YAC7B,kBAAkB,CAAC,OAAO,GAAG,cAAc,CAAC;QAC9C,cAAc,CAAC,cAAc,CAAC,CAAC;QAC/B,MAAM,eAAe,GAAG,IAAA,kCAAkB,EAAC,YAAY,CAAC,CAAC;QACzD,MAAM,sBAAsB,GAAG,yBAAS,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;QACtG,uBAAuB;QACvB,IAAI,sBAAsB;YACxB,kBAAkB,CAAC,sBAAsB,CAAC,eAAe,CAAC,CAAC;;YAE3D,MAAM,KAAK,CAAC,8CAA8C,YAAY,EAAE,CAAC,CAAC;IAC9E,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,iEAAiE;IAErF,0HAA0H;IAC1H,uDAAuD;IACvD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,cAAc,GAAG,yBAAS,CAAC,iBAAiB,CAAC,4BAA4B,CAAC,YAAY,CAAC,CAAC;QAC9F,uBAAuB;QACvB,IAAI,kBAAkB,CAAC,OAAO,IAAI,cAAc,EAAE;YAChD,IAAI,CAAC,cAAc,CAAC,cAAc,EAAE,kBAAkB,CAAC,OAAO,CAAC,EAAE;gBAC/D,kBAAkB,CAAC,OAAO,GAAG,cAAc,CAAC;gBAC5C,cAAc,CAAC,cAAc,CAAC,CAAC;aAChC;SACF;IACH,CAAC,CAAC,CAAC,CAAC,iEAAiE;IAErE,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,QAAqB,EAAE,EAAE;QAC9E,cAAc,CAAC,QAAQ,CAAC,CAAC;QACzB,cAAc,IAAI,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC7C,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,uBAAuB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAmC,EAAE,OAAoB,EAAE,gBAAiD,EAAE,EAAE;QACjK,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC/B,IAAI,IAAA,8CAA8B,EAAC,IAAI,CAAC;gBACtC,OAAO,8BAA8B,CAAC,GAAG,IAAI,CAAC,UAAU,IAAI,KAAK,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;YAC1I,IAAI,IAAA,gDAAgC,EAAC,IAAI,CAAC;gBACxC,OAAO,4BAA4B,CAAC,GAAG,IAAI,CAAC,UAAU,IAAI,KAAK,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC;YAChK,0BAA0B;YAC1B,IAAI,IAAA,+CAA+B,EAAC,IAAI,CAAC;gBACvC,OAAO,+BAA+B,CAAC,GAAG,IAAI,CAAC,UAAU,IAAI,KAAK,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC;YAC/I,0BAA0B;YAC1B,OAAO,6BAAK,GAAG,EAAE,KAAK,GAAI,CAAC;QAC7B,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAC9C,CAAC,OAAoB,EAAE,gBAAiD,EAAE,EAAE;QAC1E,MAAM,eAAe,GAAG,IAAA,kCAAkB,EAAC,YAAY,CAAC,CAAC;QACzD,MAAM,sBAAsB,GAAG,yBAAS,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;QACtG,IAAI,sBAAsB,IAAI,IAAA,8CAA8B,EAAC,sBAAsB,CAAC;YAClF,sBAAsB,CAAC,uBAAuB,CAAC,OAAO,CAAC,EAAE;YACzD,uBAAuB;YACvB,IAAI,sBAAsB,CAAC,sBAAsB;gBAC/C,OAAO,uBAAuB,CAAC,sBAAsB,CAAC,sBAAsB,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC;SAC5G;QACD,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,uBAAuB,EAAE,YAAY,CAAC,CAAC,CAAC;IAE9C,MAAM,wBAAwB,GAAG,KAAK,CAAC,WAAW,CAChD,CAAC,OAAoB,EAAE,gBAAiD,EAAE,EAAE;QAC1E,MAAM,eAAe,GAAG,IAAA,kCAAkB,EAAC,YAAY,CAAC,CAAC;QACzD,MAAM,sBAAsB,GAAG,yBAAS,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;QACtG,IAAI,sBAAsB,IAAI,IAAA,8CAA8B,EAAC,sBAAsB,CAAC;YAClF,sBAAsB,CAAC,uBAAuB,CAAC,OAAO,CAAC,EAAE;YACzD,uBAAuB;YACvB,IAAI,sBAAsB,CAAC,wBAAwB;gBACjD,OAAO,uBAAuB,CAAC,sBAAsB,CAAC,wBAAwB,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC;SAC9G;QACD,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,uBAAuB,EAAE,YAAY,CAAC,CAAC,CAAC;IAE9C,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CACzC,KAAK,EAAE,OAAoB,EAAE,gBAA2B,EAAE,cAA6B,EAAE,EAAE;QACzF,OAAO,yBAAS,CAAC,iBAAiB,CAAC,2BAA2B,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;IACxF,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,6BAAK,SAAS,EAAC,yCAAyC,IACrD,eAAe,IAAI,WAAW;QAC7B,oBAAC,yBAAW,IAAC,cAAc,EAAE,qBAAqB,KAAM,UAAU,EAChE,aAAa,EAAE,WAAW,EAC1B,aAAa,EAAE,yBAAS,CAAC,iBAAiB,CAAC,aAAa,EACxD,eAAe,EAAE,eAAe,EAChC,sBAAsB,EAAE,sBAAsB,EAC9C,wBAAwB,EAAE,wBAAwB,EAClD,iBAAiB,EAAE,iBAAiB,GACpC,CACA,CACP,CAAC;AACJ,CAAC;AAlGD,kDAkGC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module QuantityFormat\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport {\r\n  CustomFormatPropEditorSpec, getQuantityTypeKey, IModelApp, isCheckboxFormatPropEditorSpec, isCustomQuantityTypeDefinition,\r\n  isTextInputFormatPropEditorSpec, isTextSelectFormatPropEditorSpec, QuantityTypeArg,\r\n} from \"@itwin/core-frontend\";\r\nimport { FormatProps, UnitProps, UnitsProvider } from \"@itwin/core-quantity\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { Checkbox, Input, Select } from \"@itwin/itwinui-react\";\r\nimport { FormatPanel } from \"./FormatPanel\";\r\nimport { DeepCompare } from \"@itwin/core-geometry\";\r\n\r\nfunction createTextInputFormatPropEditor(key: string, label: string, inProps: FormatProps,\r\n  getString: (props: FormatProps) => string, setString: (props: FormatProps, value: string) => FormatProps, fireFormatChange: (newProps: FormatProps) => void) {\r\n  const value = getString(inProps);\r\n  return (\r\n    <React.Fragment key={`${key}`}>\r\n      <span key={`${key}-label`} className={\"uicore-label\"}>{label}</span>\r\n      <Input data-testid={`${key}-editor`} key={`${key}-editor`}\r\n        value={value}\r\n        size=\"small\"\r\n        onChange={(e) => {\r\n          const newProps = setString(inProps, e.currentTarget.value);\r\n          fireFormatChange(newProps);\r\n        }}\r\n      />\r\n    </React.Fragment>\r\n  );\r\n}\r\nfunction createSelectFormatPropEditor(key: string, label: string, options: { label: string, value: string }[], inProps: FormatProps,\r\n  getString: (props: FormatProps) => string, setString: (props: FormatProps, value: string) => FormatProps, fireFormatChange: (newProps: FormatProps) => void) {\r\n  const value = getString(inProps);\r\n  return (\r\n    <React.Fragment key={`${key}`}>\r\n      <span key={`${key}-label`} className={\"uicore-label\"}>{label}</span>\r\n      <Select data-testid={`${key}-editor`} key={`${key}-editor`}\r\n        value={value}\r\n        options={options}\r\n        size={\"small\"}\r\n        onChange={(newValue) => {\r\n          const newProps = setString(inProps, newValue);\r\n          fireFormatChange(newProps);\r\n        }}\r\n      />\r\n    </React.Fragment>\r\n  );\r\n}\r\n\r\nfunction createCheckboxFormatPropEditor(key: string, label: string, inProps: FormatProps,\r\n  getBool: (props: FormatProps) => boolean, setBool: (props: FormatProps, isChecked: boolean) => FormatProps, fireFormatChange: (newProps: FormatProps) => void) {\r\n  const isChecked = getBool(inProps);\r\n  return (\r\n    <React.Fragment key={`${key}`}>\r\n      <span key={`${key}-label`} className={\"uicore-label\"}>{label}</span>\r\n      <Checkbox data-testid={`${key}-editor`} key={`${key}-editor`}\r\n        checked={isChecked}\r\n        onChange={(e) => {\r\n          const newProps = setBool(inProps, e.target.checked);\r\n          fireFormatChange(newProps);\r\n        }} />\r\n    </React.Fragment>\r\n  );\r\n}\r\n\r\nfunction formatAreEqual(obj1: FormatProps, obj2: FormatProps) {\r\n  const compare = new DeepCompare();\r\n  return compare.compare(obj1, obj2);\r\n}\r\n\r\n/** Properties of [[QuantityFormatPanel]] component.\r\n * @alpha\r\n */\r\nexport interface QuantityFormatPanelProps extends CommonProps {\r\n  quantityType: QuantityTypeArg;\r\n  onFormatChange?: (format: FormatProps) => void;\r\n  /** props below are to be passed on to FormatPanel */\r\n  showSample?: boolean;\r\n  initialMagnitude?: number;\r\n  enableMinimumProperties?: boolean;\r\n}\r\n\r\n/** Component to set properties that control Quantity Formatting.\r\n * @alpha\r\n */\r\nexport function QuantityFormatPanel(props: QuantityFormatPanelProps) {\r\n  const { quantityType, onFormatChange, ...otherProps } = props;\r\n  const [formatProps, setFormatProps] = React.useState<FormatProps>();\r\n  const initialFormatProps = React.useRef<FormatProps>();\r\n\r\n  const [persistenceUnit, setPersistenceUnit] = React.useState<UnitProps>();\r\n\r\n  React.useEffect(() => {\r\n    const newFormatProps = IModelApp.quantityFormatter.getFormatPropsByQuantityType(quantityType);\r\n    // istanbul ignore else\r\n    if (!initialFormatProps.current)\r\n      initialFormatProps.current = newFormatProps;\r\n    setFormatProps(newFormatProps);\r\n    const quantityTypeKey = getQuantityTypeKey(quantityType);\r\n    const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);\r\n    // istanbul ignore else\r\n    if (quantityTypeDefinition)\r\n      setPersistenceUnit(quantityTypeDefinition.persistenceUnit);\r\n    else\r\n      throw Error(`Unable to locate a quantity type with type ${quantityType}`);\r\n  }, [quantityType]); // no dependencies defined as we want this to run on every render\r\n\r\n  // handle case where quantityType does not change but the formatProps for that quantity type has (ie after a Set or Clear)\r\n  // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  React.useEffect(() => {\r\n    const newFormatProps = IModelApp.quantityFormatter.getFormatPropsByQuantityType(quantityType);\r\n    // istanbul ignore else\r\n    if (initialFormatProps.current && newFormatProps) {\r\n      if (!formatAreEqual(newFormatProps, initialFormatProps.current)) {\r\n        initialFormatProps.current = newFormatProps;\r\n        setFormatProps(newFormatProps);\r\n      }\r\n    }\r\n  }); // no dependencies defined as we want this to run on every render\r\n\r\n  const handleOnFormatChanged = React.useCallback(async (newProps: FormatProps) => {\r\n    setFormatProps(newProps);\r\n    onFormatChange && onFormatChange(newProps);\r\n  }, [onFormatChange]);\r\n\r\n  const createCustomPropEditors = React.useCallback((specs: CustomFormatPropEditorSpec[], inProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => {\r\n    return specs.map((spec, index) => {\r\n      if (isCheckboxFormatPropEditorSpec(spec))\r\n        return createCheckboxFormatPropEditor(`${spec.editorType}-${index}`, spec.label, inProps, spec.getBool, spec.setBool, fireFormatChange);\r\n      if (isTextSelectFormatPropEditorSpec(spec))\r\n        return createSelectFormatPropEditor(`${spec.editorType}-${index}`, spec.label, spec.selectOptions, inProps, spec.getString, spec.setString, fireFormatChange);\r\n      /* istanbul ignore else */\r\n      if (isTextInputFormatPropEditorSpec(spec))\r\n        return createTextInputFormatPropEditor(`${spec.editorType}-${index}`, spec.label, inProps, spec.getString, spec.setString, fireFormatChange);\r\n      /* istanbul ignore next */\r\n      return <div key={index} />;\r\n    });\r\n  }, []);\r\n\r\n  const providePrimaryChildren = React.useCallback(\r\n    (inProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => {\r\n      const quantityTypeKey = getQuantityTypeKey(quantityType);\r\n      const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);\r\n      if (quantityTypeDefinition && isCustomQuantityTypeDefinition(quantityTypeDefinition) &&\r\n        quantityTypeDefinition.isCompatibleFormatProps(inProps)) {\r\n        // istanbul ignore else\r\n        if (quantityTypeDefinition.primaryPropEditorSpecs)\r\n          return createCustomPropEditors(quantityTypeDefinition.primaryPropEditorSpecs, inProps, fireFormatChange);\r\n      }\r\n      return null;\r\n    }, [createCustomPropEditors, quantityType]);\r\n\r\n  const provideSecondaryChildren = React.useCallback(\r\n    (inProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => {\r\n      const quantityTypeKey = getQuantityTypeKey(quantityType);\r\n      const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);\r\n      if (quantityTypeDefinition && isCustomQuantityTypeDefinition(quantityTypeDefinition) &&\r\n        quantityTypeDefinition.isCompatibleFormatProps(inProps)) {\r\n        // istanbul ignore else\r\n        if (quantityTypeDefinition.secondaryPropEditorSpecs)\r\n          return createCustomPropEditors(quantityTypeDefinition.secondaryPropEditorSpecs, inProps, fireFormatChange);\r\n      }\r\n      return null;\r\n    }, [createCustomPropEditors, quantityType]);\r\n\r\n  const provideFormatSpec = React.useCallback(\r\n    async (inProps: FormatProps, _persistenceUnit: UnitProps, _unitsProvider: UnitsProvider) => {\r\n      return IModelApp.quantityFormatter.generateFormatterSpecByType(quantityType, inProps);\r\n    }, [quantityType]);\r\n\r\n  return (\r\n    <div className=\"components-quantityFormat-quantityPanel\">\r\n      {persistenceUnit && formatProps &&\r\n        <FormatPanel onFormatChange={handleOnFormatChanged} {...otherProps}\r\n          initialFormat={formatProps}\r\n          unitsProvider={IModelApp.quantityFormatter.unitsProvider}\r\n          persistenceUnit={persistenceUnit}\r\n          providePrimaryChildren={providePrimaryChildren}\r\n          provideSecondaryChildren={provideSecondaryChildren}\r\n          provideFormatSpec={provideFormatSpec}\r\n        />}\r\n    </div>\r\n  );\r\n}\r\n"]}

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

@@ -5,7 +5,7 @@
 @import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
 
 .inline-edit-input {
-  color: $buic-foreground-body;
+  color: var(--iui-color-text);
   background: inherit;
   border: 1px solid transparent;
   box-sizing: border-box;
@@ -22,6 +22,6 @@
     background: $buic-background-1;
     border: 1px solid $buic-background-5;
     outline: none;
-    color: $buic-foreground-activehover;
+    color: var(--iui-color-text-hover);
   }
 }

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

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

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

@@ -30,7 +30,9 @@ exports.PlayButton = exports.PlayerButton = void 0;
 require("./PlayerButton.scss");
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
+const core_react_1 = require("@itwin/core-react");
 const UiIModelComponents_1 = require("../UiIModelComponents");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 /** Player button used by buttons on timeline control
  * @internal
  */
@@ -46,7 +48,8 @@ class PlayerButton extends React.PureComponent {
     render() {
         const { icon, title } = this.props;
         return (React.createElement("button", { "data-testid": this.props.className, className: (0, classnames_1.default)("player-button", this.props.className), onClick: this._onClick, title: title },
-            React.createElement("span", { className: (0, classnames_1.default)("icon", !!icon) })));
+            React.createElement("span", { className: "icon" },
+                React.createElement(core_react_1.Icon, { iconSpec: icon }))));
     }
 }
 exports.PlayerButton = PlayerButton;
@@ -80,12 +83,13 @@ class PlayButton extends React.Component {
     }
     render() {
         const { tooltip } = this.props;
-        const iconClassName = this.state.isPlaying ? "icon icon-media-controls-pause" : "icon icon-media-controls-play";
+        const iconSpec = this.state.isPlaying ? React.createElement(itwinui_icons_react_1.SvgPause, null) : React.createElement(itwinui_icons_react_1.SvgPlay, null);
         let title = tooltip;
         if (!title)
             title = UiIModelComponents_1.UiIModelComponents.translate(this.state.isPlaying ? "timeline.pause" : "timeline.play");
         return (React.createElement("button", { "data-testid": this.props.className, title: title, className: (0, classnames_1.default)("player-button", this.props.className), onClick: this._onClick },
-            React.createElement("span", { className: iconClassName })));
+            React.createElement("span", { className: "icon", "data-testid": this.state.isPlaying ? "pause" : "play" },
+                React.createElement(core_react_1.Icon, { iconSpec: iconSpec, "data-testid": this.state.isPlaying ? "pause" : "play" }))));
     }
 }
 exports.PlayButton = PlayButton;

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

@@ -1 +1 @@
-{"version":3,"file":"PlayerButton.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/PlayerButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,+BAA6B;AAC7B,4DAAoC;AACpC,6CAA+B;AAE/B,8DAA2D;AAE3D;;GAEG;AACH,MAAa,YAAa,SAAQ,KAAK,CAAC,aAAkB;IAA1D;;QACU,aAAQ,GAAG,GAAG,EAAE;YACtB,uBAAuB;YACvB,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO;gBACpB,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QACzB,CAAC,CAAC;IAUJ,CAAC;IARiB,MAAM;QACpB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACnC,OAAO,CACL,+CAAqB,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK;YAC3I,8BAAM,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,GAAS,CAC7C,CACV,CAAC;IACJ,CAAC;CACF;AAfD,oCAeC;AAgBD;;GAEG;AACH,MAAa,UAAW,SAAQ,KAAK,CAAC,SAA6C;IAEjF,YAAY,KAAwB,EAAE,OAAa;QACjD,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAYhB,aAAQ,GAAG,GAAG,EAAE;YACtB,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;YAEzC,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,CAAC;YAEzC,IAAI,UAAU,EAAE;gBACd,uBAAuB;gBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM;oBACnB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;aACvB;iBAAM;gBACL,uBAAuB;gBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO;oBACpB,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;aACxB;QACH,CAAC,CAAC;QAxBA,IAAI,CAAC,KAAK,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;IACnD,CAAC;IAED,gBAAgB;IACA,kBAAkB;QAChC,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;YACjD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;SAC/D;IACH,CAAC;IAkBe,MAAM;QACpB,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC/B,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,+BAA+B,CAAC;QAChH,IAAI,KAAK,GAAG,OAAO,CAAC;QAEpB,IAAI,CAAC,KAAK;YACR,KAAK,GAAG,uCAAkB,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;QAElG,OAAO,CACL,+CAAqB,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ;YAC3I,8BAAM,SAAS,EAAE,aAAa,GAAS,CAChC,CACV,CAAC;IACJ,CAAC;CACF;AA7CD,gCA6CC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\nimport \"./PlayerButton.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\n\r\n/** Player button used by buttons on timeline control\r\n * @internal\r\n */\r\nexport class PlayerButton extends React.PureComponent<any> {\r\n  private _onClick = () => {\r\n    // istanbul ignore else\r\n    if (this.props.onClick)\r\n      this.props.onClick();\r\n  };\r\n\r\n  public override render() {\r\n    const { icon, title } = this.props;\r\n    return (\r\n      <button data-testid={this.props.className} className={classnames(\"player-button\", this.props.className)} onClick={this._onClick} title={title}>\r\n        <span className={classnames(\"icon\", !!icon)}></span>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n\r\n/** Properties for Play/Pause button used on timeline control\r\n * @internal\r\n */\r\nexport interface PlayerButtonProps extends CommonProps {\r\n  isPlaying: boolean;\r\n  onPlay?: () => void;\r\n  onPause?: () => void;\r\n  tooltip?: string;\r\n}\r\n\r\ninterface PlayButtonState {\r\n  isPlaying: boolean;\r\n}\r\n\r\n/** Play/Pause button used on timeline control\r\n * @internal\r\n */\r\nexport class PlayButton extends React.Component<PlayerButtonProps, PlayButtonState> {\r\n\r\n  constructor(props: PlayerButtonProps, context?: any) {\r\n    super(props, context);\r\n\r\n    this.state = { isPlaying: this.props.isPlaying };\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate() {\r\n    if (this.props.isPlaying !== this.state.isPlaying) {\r\n      this.setState((_, props) => ({ isPlaying: props.isPlaying }));\r\n    }\r\n  }\r\n\r\n  private _onClick = () => {\r\n    const _isPlaying = !this.state.isPlaying;\r\n\r\n    this.setState({ isPlaying: _isPlaying });\r\n\r\n    if (_isPlaying) {\r\n      // istanbul ignore else\r\n      if (this.props.onPlay)\r\n        this.props.onPlay();\r\n    } else {\r\n      // istanbul ignore else\r\n      if (this.props.onPause)\r\n        this.props.onPause();\r\n    }\r\n  };\r\n\r\n  public override render() {\r\n    const { tooltip } = this.props;\r\n    const iconClassName = this.state.isPlaying ? \"icon icon-media-controls-pause\" : \"icon icon-media-controls-play\";\r\n    let title = tooltip;\r\n\r\n    if (!title)\r\n      title = UiIModelComponents.translate(this.state.isPlaying ? \"timeline.pause\" : \"timeline.play\");\r\n\r\n    return (\r\n      <button data-testid={this.props.className} title={title} className={classnames(\"player-button\", this.props.className)} onClick={this._onClick}>\r\n        <span className={iconClassName}></span>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"PlayerButton.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/PlayerButton.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\nimport \"./PlayerButton.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps, Icon } from \"@itwin/core-react\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\nimport { SvgPause, SvgPlay } from \"@itwin/itwinui-icons-react\";\r\n\r\n/** Player button used by buttons on timeline control\r\n * @internal\r\n */\r\nexport class PlayerButton extends React.PureComponent<any> {\r\n  private _onClick = () => {\r\n    // istanbul ignore else\r\n    if (this.props.onClick)\r\n      this.props.onClick();\r\n  };\r\n\r\n  public override render() {\r\n    const { icon, title } = this.props;\r\n    return (\r\n      <button data-testid={this.props.className} className={classnames(\"player-button\", this.props.className)} onClick={this._onClick} title={title}>\r\n        <span className=\"icon\"><Icon iconSpec={icon} /></span>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n\r\n/** Properties for Play/Pause button used on timeline control\r\n * @internal\r\n */\r\nexport interface PlayerButtonProps extends CommonProps {\r\n  isPlaying: boolean;\r\n  onPlay?: () => void;\r\n  onPause?: () => void;\r\n  tooltip?: string;\r\n}\r\n\r\ninterface PlayButtonState {\r\n  isPlaying: boolean;\r\n}\r\n\r\n/** Play/Pause button used on timeline control\r\n * @internal\r\n */\r\nexport class PlayButton extends React.Component<PlayerButtonProps, PlayButtonState> {\r\n\r\n  constructor(props: PlayerButtonProps, context?: any) {\r\n    super(props, context);\r\n\r\n    this.state = { isPlaying: this.props.isPlaying };\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate() {\r\n    if (this.props.isPlaying !== this.state.isPlaying) {\r\n      this.setState((_, props) => ({ isPlaying: props.isPlaying }));\r\n    }\r\n  }\r\n\r\n  private _onClick = () => {\r\n    const _isPlaying = !this.state.isPlaying;\r\n\r\n    this.setState({ isPlaying: _isPlaying });\r\n\r\n    if (_isPlaying) {\r\n      // istanbul ignore else\r\n      if (this.props.onPlay)\r\n        this.props.onPlay();\r\n    } else {\r\n      // istanbul ignore else\r\n      if (this.props.onPause)\r\n        this.props.onPause();\r\n    }\r\n  };\r\n\r\n  public override render() {\r\n    const { tooltip } = this.props;\r\n    const iconSpec = this.state.isPlaying ? <SvgPause /> : <SvgPlay />;\r\n    let title = tooltip;\r\n\r\n    if (!title)\r\n      title = UiIModelComponents.translate(this.state.isPlaying ? \"timeline.pause\" : \"timeline.play\");\r\n\r\n    return (\r\n      <button data-testid={this.props.className} title={title} className={classnames(\"player-button\", this.props.className)} onClick={this._onClick}>\r\n        <span className=\"icon\" data-testid={this.state.isPlaying ? \"pause\" : \"play\"} ><Icon iconSpec={iconSpec} data-testid={this.state.isPlaying ? \"pause\" : \"play\"} /></span>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -2,7 +2,6 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
 
 .player-button {
   width: 38px;
@@ -12,15 +11,18 @@
   justify-content: center;
   font-size: 16px;
   outline: none;
-  border-radius: 3px;
-  border: solid 1px $buic-background-5;
-  // background-image: linear-gradient(to bottom, $buic-background-1, $buic-background-2);
-  background-image: linear-gradient(to bottom, $buic-background-3, $buic-background-3), linear-gradient(to bottom, $buic-background-1, $buic-background-1);
-  color: $buic-foreground-body;
-
+  border-radius: var(--iui-border-radius-1);
+  border: solid 1px var(--iui-color-border-foreground);
+  background-color: var(--iui-color-background);
+  color: var(--iui-color-icon);
   cursor: pointer;
 
   &:hover {
-    color: $buic-foreground-activehover;
+    color: var(--iui-color-icon-hover);
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--iui-color-border-accent);
+    outline-offset: -1px;
   }
-}
+}

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

@@ -2,20 +2,18 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
 @import "~@itwin/core-react/lib/cjs/core-react/z-index";
-
 // the following overrides default iui-slider-thumb settings from  iTwinUI
 div.components-timeline-thumb.iui-slider-thumb {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-image: linear-gradient(to bottom, $buic-background-3, $buic-background-3), linear-gradient(to bottom, $buic-background-1, $buic-background-1);
+  background-color: var(--iui-color-background);
   box-sizing: border-box;
   width: 38px;
   height: 20px;
-  border-radius: 4px;
-  border: 1px solid $buic-background-5;
+  border-radius: var(--iui-border-radius-1);
+  border: 1px solid var(--iui-color-border);
   transform: translateX(-19.2px);
   top: 4px;
 }
@@ -30,12 +28,12 @@ div.components-timeline-thumb.iui-slider-thumb {
     top: -8px;
     display: inline-block;
     transform: translateX(-50px);
-    border-bottom: 1px dotted #222;
+    border-bottom: 1px dotted rgba(0, 0, 0, var(--iui-opacity-3));
     font-size: 14px;
 
     .tooltip-text {
       width: 100px;
-      background-color: #222;
+      background-color: rgba(0, 0, 0, var(--iui-opacity-3));
       color: #fff;
       // opacity: 0.8;
       text-align: center;
@@ -53,7 +51,8 @@ div.components-timeline-thumb.iui-slider-thumb {
         margin-left: -5px;
         border-width: 5px;
         border-style: solid;
-        border-color: #222 transparent transparent transparent;
+        border-color: rgba(0, 0, 0, var(--iui-opacity-3)) transparent
+          transparent transparent;
       }
     }
   }
@@ -64,19 +63,18 @@ div.components-timeline-thumb.iui-slider-thumb {
   position: absolute;
   width: 38px;
   height: 20px;
-  border-radius: 4px;
+  border-radius: var(--iui-border-radius-1);
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   cursor: pointer;
 
-  >div {
+  > div {
     width: 1px;
     height: 10px;
-    opacity: 0.25;
     margin: 0 1px;
-    background-color: $buic-foreground-body;
+    background-color: var(--iui-color-border-subtle);
   }
 }
 
@@ -101,7 +99,7 @@ div.components-timeline-thumb.iui-slider-thumb {
 .date-marker-default {
   height: 12px;
   width: 3px;
-  border-radius: 4px;
+  border-radius: var(--iui-border-radius-1);
   transform: translateY(1px);
-  background-color: $buic-foreground-primary;
-}
+  background-color: var(--iui-color-border);
+}

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

@@ -1 +1 @@
-{"version":3,"file":"SolarTimeline.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/SolarTimeline.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAKH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAe,QAAQ,EAAY,MAAM,oBAAoB,CAAC;AAOrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAsHjD,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,CAAC,2BAA2B,EAAE,2BAA2B,CAAC;IAC9G,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,mBAAmB,CAA6D;IACxF,OAAO,CAAC,UAAU,CAAsD;IACxE,OAAO,CAAC,aAAa,CAA0D;IAC/E,OAAO,CAAC,UAAU,CAAmD;IACrE,OAAO,CAAC,WAAW,CAAuD;IAC1E,OAAO,CAAC,cAAc,CAA0D;IAEhF,OAAO,CAAC,OAAO,CAab;IAEF,OAAO,CAAC,UAAU,CAA6C;IAC/D,OAAO,CAAC,QAAQ,CAAqC;IACrD,OAAO,CAAC,QAAQ,CAAqC;IACrD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAS5B;gBAEU,KAAK,EAAE,2BAA2B;IAgC9B,oBAAoB;IAMpC,OAAO,CAAC,gBAAgB,CAuCtB;IAEF,OAAO,CAAC,KAAK;IAab,OAAO,CAAC,QAAQ,CAiBd;IAGF,OAAO,CAAC,OAAO,CAWb;IAEF,OAAO,CAAC,wBAAwB;IAIhC;qBACiB;IACjB,OAAO,CAAC,WAAW,CAkBjB;IAEF,OAAO,CAAC,cAAc,CAkBpB;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,qBAAqB,CAE3B;IAEF,OAAO,CAAC,oBAAoB,CAE1B;IAEF,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,cAAc,CAGpB;IAEF,OAAO,CAAC,aAAa,CAEnB;IAEF,OAAO,CAAC,WAAW,CASjB;IAEF,OAAO,CAAC,kBAAkB,CAExB;IAEF,OAAO,CAAC,4BAA4B,CAMlC;IAEK,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAMxB,MAAM;CAsFvB"}
+{"version":3,"file":"SolarTimeline.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/SolarTimeline.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAKH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAe,QAAQ,EAAY,MAAM,oBAAoB,CAAC;AAOrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAuHjD,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,CAAC,2BAA2B,EAAE,2BAA2B,CAAC;IAC9G,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,mBAAmB,CAA6D;IACxF,OAAO,CAAC,UAAU,CAAsD;IACxE,OAAO,CAAC,aAAa,CAA0D;IAC/E,OAAO,CAAC,UAAU,CAAmD;IACrE,OAAO,CAAC,WAAW,CAAuD;IAC1E,OAAO,CAAC,cAAc,CAA0D;IAEhF,OAAO,CAAC,OAAO,CAab;IAEF,OAAO,CAAC,UAAU,CAA6C;IAC/D,OAAO,CAAC,QAAQ,CAAqC;IACrD,OAAO,CAAC,QAAQ,CAAqC;IACrD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAS5B;gBAEU,KAAK,EAAE,2BAA2B;IAgC9B,oBAAoB;IAMpC,OAAO,CAAC,gBAAgB,CAuCtB;IAEF,OAAO,CAAC,KAAK;IAab,OAAO,CAAC,QAAQ,CAiBd;IAGF,OAAO,CAAC,OAAO,CAWb;IAEF,OAAO,CAAC,wBAAwB;IAIhC;qBACiB;IACjB,OAAO,CAAC,WAAW,CAkBjB;IAEF,OAAO,CAAC,cAAc,CAkBpB;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,qBAAqB,CAE3B;IAEF,OAAO,CAAC,oBAAoB,CAE1B;IAEF,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,cAAc,CAGpB;IAEF,OAAO,CAAC,aAAa,CAEnB;IAEF,OAAO,CAAC,WAAW,CASjB;IAEF,OAAO,CAAC,kBAAkB,CAExB;IAEF,OAAO,CAAC,4BAA4B,CAMlC;IAEK,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAMxB,MAAM;CAsFvB"}

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

@@ -47,6 +47,7 @@ const PlayerButton_1 = require("./PlayerButton");
 const SpeedTimeline_1 = require("./SpeedTimeline");
 const Scrubber_1 = require("./Scrubber");
 const UiIModelComponents_1 = require("../UiIModelComponents");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 // cSpell:ignore millisec solarsettings showticks shadowcolor solartimeline datepicker millisecs
 const millisecPerMinute = 1000 * 60;
 const millisecPerHour = millisecPerMinute * 60;
@@ -383,12 +384,13 @@ class SolarTimeline extends React.PureComponent {
                     React.createElement("span", null, formattedDate),
                     React.createElement("span", null, "/"),
                     React.createElement("span", null, formattedTime),
-                    React.createElement("span", { className: "icon icon-calendar" })),
+                    React.createElement("span", { className: "icon" },
+                        React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgCalendar, null) }))),
                 React.createElement(core_react_1.Popup, { style: { border: "none" }, offset: 11, target: this._datePicker, isOpen: this.state.isDateOpened, onClose: this._onCloseDayPicker, position: appui_abstract_1.RelativePosition.Top },
                     React.createElement("div", { className: "components-date-picker-calendar-popup-panel", "data-testid": "components-date-picker-calendar-popup-panel" },
                         React.createElement(components_react_1.DatePicker, { selected: localTime, onDateChange: this._onDayClick, showFocusOutline: false }),
                         React.createElement("div", { className: "time-container" },
-                            React.createElement(core_react_1.BodyText, { className: "time-label" }, this._timeLabel),
+                            React.createElement(itwinui_react_1.Text, { variant: "body", className: "time-label" }, this._timeLabel),
                             React.createElement(components_react_1.TimeField, { time: { hours: localTime.getHours(), minutes: localTime.getMinutes(), seconds: 0 }, timeDisplay: appui_abstract_1.TimeDisplay.H12MC, onTimeChange: this._onTimeChanged })))),
                 React.createElement(Timeline, { className: "solar-timeline", dayStartMs: dataProvider.dayStartMs, sunSetOffsetMs: sunSetOffsetMs, sunRiseOffsetMs: sunRiseOffsetMs, currentTimeOffsetMs: currentTimeOffsetMs, onChange: this._onChange, onUpdate: this._onUpdate, formatTime: this._formatTime, isPlaying: this.state.isPlaying }),
                 React.createElement("div", { className: "speed-container" },
@@ -396,9 +398,11 @@ class SolarTimeline extends React.PureComponent {
                         speed,
                         "x"),
                     React.createElement(SpeedTimeline_1.SpeedTimeline, { className: "speed", onChange: this._onSpeedChange, speed: this.state.speed })),
-                React.createElement("span", { title: this._loopLabel, className: (0, classnames_1.default)("icon", "icon-media-controls-loop", !loop && "no-loop-playback", loop && "loop-playback"), onClick: this._onToggleLoop, role: "button", tabIndex: -1 }),
+                React.createElement("span", { title: this._loopLabel, className: (0, classnames_1.default)("icon", !loop && "no-loop-playback", loop && "loop-playback"), onClick: this._onToggleLoop, role: "button", tabIndex: -1 },
+                    React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgLoop, null) })),
                 React.createElement("button", { "data-testid": "shadow-settings-button", title: this._settingLabel, className: "shadow-settings-button", ref: (element) => this._settings = element, onClick: this._onOpenSettingsPopup },
-                    React.createElement("span", { className: "icon icon-settings" })),
+                    React.createElement("span", { className: "icon" },
+                        React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgSettings, null) }))),
                 React.createElement(core_react_1.Popup, { className: "shadow-settings-popup", target: this._settings, offset: 11, isOpen: this.state.isSettingsOpened, onClose: this._onCloseSettingsPopup, position: appui_abstract_1.RelativePosition.Top },
                     React.createElement("div", { className: "shadow-settings-popup-container" },
                         React.createElement("div", { className: "shadow-settings-header" }, this._settingsPopupTitle),

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

@@ -1 +1 @@
-{"version":3,"file":"SolarTimeline.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/SolarTimeline.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Timeline\r\n */\r\n\r\n// component is in alpha state - it may change after usability testing - test coverage not complete\r\n/* istanbul ignore file */\r\n\r\nimport \"./SolarTimeline.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Slider, Tooltip } from \"@itwin/itwinui-react\";\r\n\r\nimport { ColorByName, ColorDef, HSVColor } from \"@itwin/core-common\";\r\nimport { RelativePosition, TimeDisplay } from \"@itwin/appui-abstract\";\r\nimport { BodyText, CommonProps, Popup } from \"@itwin/core-react\";\r\nimport { adjustDateToTimezone, DatePicker, TimeField, TimeSpec, UiComponents } from \"@itwin/components-react\";\r\nimport { HueSlider } from \"../color/HueSlider\";\r\nimport { SaturationPicker } from \"../color/SaturationPicker\";\r\nimport { ColorSwatch } from \"../color/Swatch\";\r\nimport { SolarDataProvider } from \"./interfaces\";\r\nimport { PlayButton } from \"./PlayerButton\";\r\nimport { SpeedTimeline } from \"./SpeedTimeline\";\r\nimport { CustomThumb, getPercentageOfRectangle, RailMarkers, useFocusedThumb } from \"./Scrubber\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\n\r\n// cSpell:ignore millisec solarsettings showticks shadowcolor solartimeline datepicker millisecs\r\n\r\nconst millisecPerMinute = 1000 * 60;\r\nconst millisecPerHour = millisecPerMinute * 60;\r\n// const millisecPerDay = millisecPerHour * 24;\r\nconst defaultPlaybackDuration = 40 * 1000; // 40 seconds\r\nconst addZero = (i: number) => {\r\n  return (i < 10) ? `0${i}` : i;\r\n};\r\n\r\ninterface TimelineProps extends CommonProps {\r\n  dayStartMs: number;\r\n  sunRiseOffsetMs: number;\r\n  sunSetOffsetMs: number;\r\n  currentTimeOffsetMs: number;\r\n  isPlaying: boolean;\r\n  formatTick?: (millisec: number) => string;\r\n  formatTime: (millisec: number) => string;\r\n  onChange?: (values: ReadonlyArray<number>) => void;\r\n  onUpdate?: (values: ReadonlyArray<number>) => void;\r\n}\r\nfunction Timeline(props: TimelineProps) {\r\n  const sliderRef = React.useRef<HTMLDivElement>(null);\r\n  const [sliderContainer, setSliderContainer] = React.useState<HTMLDivElement>();\r\n  const [pointerPercent, setPointerPercent] = React.useState(0);\r\n\r\n  React.useLayoutEffect(() => {\r\n    // istanbul ignore else\r\n    if (sliderRef.current) {\r\n      const container = sliderRef.current.querySelector(\".iui-slider-container\");\r\n      if (container && sliderContainer !== container) {\r\n        setSliderContainer(container as HTMLDivElement);\r\n      }\r\n    }\r\n  }, [sliderContainer]);\r\n\r\n  const thumbProps = () => {\r\n    return {\r\n      className: \"components-timeline-thumb\",\r\n      children: <CustomThumb />,\r\n    };\r\n  };\r\n\r\n  const tooltipProps = React.useCallback(() => {\r\n    return { visible: false };\r\n  }, []);\r\n\r\n  const [showRailTooltip, setShowRailTooltip] = React.useState(false);\r\n\r\n  const handlePointerEnter = React.useCallback(() => {\r\n    setShowRailTooltip(true);\r\n  }, []);\r\n\r\n  const handlePointerLeave = React.useCallback(() => {\r\n    setShowRailTooltip(false);\r\n  }, []);\r\n\r\n  const handlePointerMove = React.useCallback((event: React.PointerEvent) => {\r\n    sliderContainer &&\r\n      setPointerPercent(getPercentageOfRectangle(sliderContainer.getBoundingClientRect(), event.clientX));\r\n  }, [sliderContainer]);\r\n\r\n  const { formatTick, formatTime, onChange, onUpdate, dayStartMs, sunSetOffsetMs, sunRiseOffsetMs, currentTimeOffsetMs, isPlaying } = props;\r\n\r\n  const thumbHasFocus = useFocusedThumb(sliderContainer);\r\n\r\n  const tickLabel = React.useMemo(() => {\r\n    const showTip = isPlaying || showRailTooltip || thumbHasFocus;\r\n    const totalDuration = sunSetOffsetMs - sunRiseOffsetMs;\r\n    const percent = (isPlaying || thumbHasFocus) ? (currentTimeOffsetMs - sunRiseOffsetMs) / totalDuration : pointerPercent;\r\n    const tooltipText = formatTime((isPlaying || thumbHasFocus) ? (dayStartMs + currentTimeOffsetMs) : (dayStartMs + (sunRiseOffsetMs + (pointerPercent * totalDuration))));\r\n    return (<RailMarkers showToolTip={showTip} percent={percent} tooltipText={tooltipText} />);\r\n  }, [isPlaying, showRailTooltip, thumbHasFocus, sunSetOffsetMs, sunRiseOffsetMs, currentTimeOffsetMs, pointerPercent, formatTime, dayStartMs]);\r\n\r\n  const className = classnames(\"solar-slider\", props.className, formatTick && \"showticks\");\r\n  const sunRiseFormat = formatTime(dayStartMs + sunRiseOffsetMs);\r\n  const sunSetFormat = formatTime(dayStartMs + sunSetOffsetMs);\r\n  return (\r\n    <div className={className}>\r\n      <Tooltip content={sunRiseFormat}>\r\n        <span className=\"sunrise\">\r\n          &#x2600;\r\n        </span>\r\n      </Tooltip>\r\n      <Slider ref={sliderRef}\r\n        className={className}\r\n        step={millisecPerMinute}\r\n        min={sunRiseOffsetMs}\r\n        max={sunSetOffsetMs}\r\n        minLabel=\"\"\r\n        maxLabel=\"\"\r\n        onUpdate={onUpdate}\r\n        onChange={onChange}\r\n        values={[currentTimeOffsetMs]}\r\n        tooltipProps={tooltipProps}\r\n        thumbProps={thumbProps}\r\n        tickLabels={tickLabel}\r\n        railContainerProps={{\r\n          onPointerEnter: handlePointerEnter,\r\n          onPointerMove: handlePointerMove,\r\n          onPointerLeave: handlePointerLeave,\r\n        }}\r\n      />\r\n      <Tooltip content={sunSetFormat}>\r\n        <span className=\"sunset\">\r\n          &#x263D;\r\n        </span>\r\n      </Tooltip>\r\n    </div>\r\n  );\r\n}\r\n\r\ninterface SolarTimelineComponentProps {\r\n  dataProvider: SolarDataProvider;  // provides date, sunrise, sunset in millisecs, also contains timezone offset from UTC, and updates the display style to current time.\r\n  onPlayPause?: (playing: boolean) => void; // callback triggered when play/pause button is pressed\r\n  duration?: number;  // playback duration in milliseconds\r\n  speed?: number;\r\n}\r\n\r\ninterface SolarTimelineComponentState {\r\n  isPlaying: boolean;     // timeline is currently playing or paused\r\n  isDateOpened: boolean;  // date picker is opened\r\n  isSettingsOpened: boolean;  // settings popup is opened\r\n  dayStartMs: number;\r\n  sunRiseOffsetMs: number;\r\n  sunSetOffsetMs: number;\r\n  sunDeltaMs: number;\r\n  currentTimeOffsetMs: number;\r\n  speed: number;\r\n  loop: boolean;\r\n  shadowColor: ColorDef;\r\n  duration: number;  // playback duration in milliseconds\r\n  adjustedDuration: number;  // playback duration in milliseconds/ speed\r\n}\r\n\r\n/** Solar Timeline\r\n * @alpha\r\n */\r\nexport class SolarTimeline extends React.PureComponent<SolarTimelineComponentProps, SolarTimelineComponentState> {\r\n  private _datePicker: HTMLElement | null = null;\r\n  private _settings: HTMLElement | null = null;\r\n  private _requestFrame = 0;\r\n  private _unmounted = false;\r\n  private _timeLastCycle = 0;\r\n  private _totalPlayTime = 0;\r\n  private _settingsPopupTitle = UiIModelComponents.translate(\"solarsettings.shadowcolor\");\r\n  private _playLabel = UiIModelComponents.translate(\"solartimeline.play\");\r\n  private _settingLabel = UiIModelComponents.translate(\"solartimeline.settings\");\r\n  private _loopLabel = UiIModelComponents.translate(\"timeline.repeat\");\r\n  private _speedLabel = UiIModelComponents.translate(\"solartimeline.speed\");\r\n  private _dateTimeLabel = UiIModelComponents.translate(\"solartimeline.dateTime\");\r\n\r\n  private _months = [\r\n    UiComponents.translate(\"month.short.january\"),\r\n    UiComponents.translate(\"month.short.february\"),\r\n    UiComponents.translate(\"month.short.march\"),\r\n    UiComponents.translate(\"month.short.april\"),\r\n    UiComponents.translate(\"month.short.may\"),\r\n    UiComponents.translate(\"month.short.june\"),\r\n    UiComponents.translate(\"month.short.july\"),\r\n    UiComponents.translate(\"month.short.august\"),\r\n    UiComponents.translate(\"month.short.september\"),\r\n    UiComponents.translate(\"month.short.october\"),\r\n    UiComponents.translate(\"month.short.november\"),\r\n    UiComponents.translate(\"month.short.december\"),\r\n  ];\r\n\r\n  private _timeLabel = UiComponents.translate(\"datepicker.time\");\r\n  private _amLabel = UiComponents.translate(\"time.am\");\r\n  private _pmLabel = UiComponents.translate(\"time.pm\");\r\n  private readonly _presetColors = [\r\n    ColorDef.create(ColorByName.grey),\r\n    ColorDef.create(ColorByName.lightGrey),\r\n    ColorDef.create(ColorByName.darkGrey),\r\n    ColorDef.create(ColorByName.lightBlue),\r\n    ColorDef.create(ColorByName.lightGreen),\r\n    ColorDef.create(ColorByName.darkGreen),\r\n    ColorDef.create(ColorByName.tan),\r\n    ColorDef.create(ColorByName.darkBrown),\r\n  ];\r\n\r\n  constructor(props: SolarTimelineComponentProps) {\r\n    super(props);\r\n\r\n    const dayStartMs = this.props.dataProvider.dayStartMs;\r\n    const sunRiseOffsetMs = this.props.dataProvider.sunrise.getTime() - dayStartMs;\r\n    const sunSetOffsetMs = this.props.dataProvider.sunset.getTime() - dayStartMs;\r\n    const sunDeltaMs = sunSetOffsetMs - sunRiseOffsetMs;\r\n    const sunOffsetMs = this.props.dataProvider.timeOfDay.getTime() - dayStartMs;\r\n    const currentTimeOffsetMs = this.ensureRange(sunOffsetMs, sunRiseOffsetMs, sunSetOffsetMs);\r\n    const shadowColor = this.props.dataProvider.shadowColor;\r\n    const duration = this.props.duration ? this.props.duration : defaultPlaybackDuration;\r\n    const speed = this.props.speed ? this.props.speed : 2;\r\n    const adjustedDuration = duration / speed;\r\n    this.setPlaybackTimeBySunTime(currentTimeOffsetMs, sunRiseOffsetMs, sunDeltaMs, adjustedDuration);\r\n\r\n    this.state = {\r\n      isDateOpened: false,\r\n      isSettingsOpened: false,\r\n      isPlaying: false,\r\n      dayStartMs,\r\n      sunRiseOffsetMs,\r\n      sunSetOffsetMs,\r\n      sunDeltaMs,\r\n      currentTimeOffsetMs,\r\n      speed,\r\n      loop: false,\r\n      shadowColor,\r\n      duration,\r\n      adjustedDuration,\r\n    };\r\n  }\r\n\r\n  public override componentWillUnmount() {\r\n    window.cancelAnimationFrame(this._requestFrame);\r\n    this._unmounted = true;\r\n  }\r\n\r\n  // recursively update the animation until we hit the end or the pause button is clicked\r\n  private _updateAnimation = (_timestamp: number) => {\r\n    // istanbul ignore else\r\n    if (!this.state.isPlaying || this._unmounted) {\r\n      window.cancelAnimationFrame(this._requestFrame);\r\n      return;\r\n    }\r\n\r\n    const currentTime = new Date().getTime();\r\n    this._totalPlayTime += (currentTime - this._timeLastCycle);\r\n    this._timeLastCycle = currentTime;\r\n    let percentComplete = this._totalPlayTime / this.state.adjustedDuration;\r\n    if (percentComplete > 1)\r\n      percentComplete = 1;\r\n\r\n    let newPlayingState = true;\r\n\r\n    // calculate the next sun time base on the percentage playback complete - should be int value as that is step amount for slider\r\n    let nextSunOffset = Math.floor(this.state.sunRiseOffsetMs + (percentComplete * this.state.sunDeltaMs));\r\n\r\n    if (percentComplete > 0.99) {\r\n      if (!this.state.loop) {\r\n        newPlayingState = false;\r\n        nextSunOffset = this.state.sunSetOffsetMs;\r\n        window.cancelAnimationFrame(this._requestFrame);\r\n      } else {\r\n        nextSunOffset = this.state.sunRiseOffsetMs;\r\n        this._totalPlayTime = 0;\r\n      }\r\n    }\r\n\r\n    if (this.props.dataProvider.onTimeChanged) {\r\n      const currentSunTime = new Date(this.state.dayStartMs + nextSunOffset);\r\n      this.props.dataProvider.onTimeChanged(currentSunTime);\r\n    }\r\n\r\n    this.setState({ isPlaying: newPlayingState, currentTimeOffsetMs: nextSunOffset }, () => {\r\n      if (newPlayingState)\r\n        this._requestFrame = window.requestAnimationFrame(this._updateAnimation);\r\n    });\r\n  };\r\n\r\n  private _play(sunTimeMs: number) {\r\n    this._timeLastCycle = new Date().getTime();\r\n\r\n    // start playing\r\n    this.setState({ isPlaying: true, currentTimeOffsetMs: sunTimeMs }, () => {\r\n      this._requestFrame = window.requestAnimationFrame(this._updateAnimation);\r\n      // istanbul ignore else\r\n      if (this.props.onPlayPause)\r\n        this.props.onPlayPause(true);\r\n    });\r\n  }\r\n\r\n  // user clicked pause button\r\n  private _onPause = () => {\r\n    // istanbul ignore if\r\n    if (!this.state.isPlaying)\r\n      return;\r\n\r\n    const currentTime = new Date().getTime();\r\n    this._totalPlayTime += (currentTime - this._timeLastCycle);\r\n\r\n    // stop requesting frames\r\n    window.cancelAnimationFrame(this._requestFrame);\r\n\r\n    // stop playing\r\n    this.setState({ isPlaying: false });\r\n\r\n    // istanbul ignore else\r\n    if (this.props.onPlayPause)\r\n      this.props.onPlayPause(false);\r\n  };\r\n\r\n  // user clicked play button\r\n  private _onPlay = () => {\r\n    // istanbul ignore if\r\n    if (this.state.isPlaying)\r\n      return;\r\n\r\n    if (this.state.currentTimeOffsetMs >= this.state.sunSetOffsetMs || this.state.currentTimeOffsetMs <= this.state.sunRiseOffsetMs) {\r\n      this._totalPlayTime = 0;\r\n      this._play(this.state.sunRiseOffsetMs);\r\n    } else {\r\n      this._play(this.state.currentTimeOffsetMs);\r\n    }\r\n  };\r\n\r\n  private setPlaybackTimeBySunTime(sunOffsetMs: number, sunRiseOffsetMs: number, sunDeltaMs: number, adjustedDuration?: number) {\r\n    this._totalPlayTime = ((sunOffsetMs - sunRiseOffsetMs) / (sunDeltaMs)) * ((adjustedDuration) ? adjustedDuration : this.state.adjustedDuration);\r\n  }\r\n\r\n  /** note the day passed in is in the time of the current user not in project time because the date picker works in\r\n   * local time  */\r\n  private _onDayClick = (day: Date) => {\r\n    const selectedDate = new Date(day.getTime() + this.state.currentTimeOffsetMs);\r\n    this.props.dataProvider.setDateAndTime(selectedDate);\r\n    const dayStartMs = this.props.dataProvider.dayStartMs;\r\n    const sunRiseOffsetMs = this.props.dataProvider.sunrise.getTime() - dayStartMs;\r\n    const sunSetOffsetMs = this.props.dataProvider.sunset.getTime() - dayStartMs;\r\n    const sunDeltaMs = sunSetOffsetMs - sunRiseOffsetMs;\r\n\r\n    const sunOffsetMs = this.ensureRange(this.state.currentTimeOffsetMs, sunRiseOffsetMs, sunSetOffsetMs);\r\n    this.setPlaybackTimeBySunTime(sunOffsetMs, sunRiseOffsetMs, sunDeltaMs);\r\n\r\n    /** call dataProvider to update display style */\r\n    if (this.props.dataProvider.onTimeChanged)\r\n      this.props.dataProvider.onTimeChanged(this.props.dataProvider.timeOfDay);\r\n\r\n    this.setState({ dayStartMs, sunRiseOffsetMs, sunSetOffsetMs, currentTimeOffsetMs: sunOffsetMs, sunDeltaMs, isDateOpened: false }, () => {\r\n      this._timeLastCycle = new Date().getTime();\r\n    });\r\n  };\r\n\r\n  private _onTimeChanged = (time: TimeSpec) => {\r\n    // compute the current date (with time)\r\n    const dayStartMs = this.props.dataProvider.dayStartMs;\r\n    const sunTime = (time.hours * millisecPerHour) + (time.minutes * millisecPerMinute);\r\n    const dateWithNewTime = new Date(dayStartMs + sunTime);\r\n    this.props.dataProvider.setDateAndTime(dateWithNewTime, true);\r\n\r\n    // notify the provider to update style\r\n    if (this.props.dataProvider.onTimeChanged)\r\n      this.props.dataProvider.onTimeChanged(dateWithNewTime);\r\n\r\n    const currentTimeOffsetMs = this.ensureRange(sunTime, this.state.sunRiseOffsetMs, this.state.sunSetOffsetMs);\r\n\r\n    this.setPlaybackTimeBySunTime(currentTimeOffsetMs, this.state.sunRiseOffsetMs, this.state.sunDeltaMs);\r\n    this._timeLastCycle = new Date().getTime();\r\n\r\n    // update the timeline\r\n    this.setState({ currentTimeOffsetMs });\r\n  };\r\n\r\n  private _onCloseDayPicker = () => {\r\n    this.setState({ isDateOpened: false });\r\n  };\r\n\r\n  private _onOpenDayPicker = () => {\r\n    this.setState((prevState) => ({ isDateOpened: !prevState.isDateOpened }));\r\n  };\r\n\r\n  private _onCloseSettingsPopup = () => {\r\n    this.setState({ isSettingsOpened: false });\r\n  };\r\n\r\n  private _onOpenSettingsPopup = () => {\r\n    this.setState((prevState) => ({ isSettingsOpened: !prevState.isSettingsOpened }));\r\n  };\r\n\r\n  private ensureRange(value: number, min: number, max: number): number {\r\n    return Math.max(Math.min(value, max), min);\r\n  }\r\n\r\n  private processSunTimeChange(sunTime: number) {\r\n    if (sunTime === this.state.currentTimeOffsetMs)\r\n      return;\r\n\r\n    const currentTimeOffsetMs = this.ensureRange(sunTime, this.state.sunRiseOffsetMs, this.state.sunSetOffsetMs);\r\n\r\n    if (this.props.dataProvider.onTimeChanged) {\r\n      const currentSunTime = new Date(this.state.dayStartMs + currentTimeOffsetMs);\r\n      this.props.dataProvider.onTimeChanged(currentSunTime);\r\n    }\r\n\r\n    this.setState({ currentTimeOffsetMs }, () => {\r\n      const currentTime = new Date().getTime();\r\n      this._timeLastCycle = currentTime;\r\n      const percentComplete = (currentTimeOffsetMs - this.state.sunRiseOffsetMs) / this.state.sunDeltaMs;\r\n      this._totalPlayTime = percentComplete * this.state.adjustedDuration;\r\n    });\r\n  }\r\n\r\n  private _onUpdate = (values: ReadonlyArray<number>) => {\r\n    if (!this.state.isPlaying)\r\n      this.processSunTimeChange(values[0]);\r\n  };\r\n\r\n  private _onChange = (values: ReadonlyArray<number>) => {\r\n    if (!this.state.isPlaying)\r\n      this.processSunTimeChange(values[0]);\r\n  };\r\n\r\n  private _onSpeedChange = (value: number) => {\r\n    const adjustedDuration = this.state.duration / value;\r\n    this.setState({ speed: value, adjustedDuration });\r\n  };\r\n\r\n  private _onToggleLoop = () => {\r\n    this.setState((prevState) => ({ loop: !prevState.loop }));\r\n  };\r\n\r\n  private _formatTime = (millisec: number) => {\r\n    const date = new Date(millisec);\r\n    // convert project date to browser locale date\r\n    const localTime = adjustDateToTimezone(date, this.props.dataProvider.timeZoneOffset * 60);\r\n    let hours = localTime.getHours();\r\n    const minutes = addZero(date.getMinutes());\r\n    const abbrev = (hours < 12) ? this._amLabel : (hours === 24) ? this._amLabel : this._pmLabel;\r\n    hours = (hours > 12) ? hours - 12 : hours;\r\n    return `${hours}:${minutes} ${abbrev}`;\r\n  };\r\n\r\n  private _onPresetColorPick = (shadowColor: ColorDef) => {\r\n    this.setState({ shadowColor }, () => this.props.dataProvider.shadowColor = shadowColor);\r\n  };\r\n\r\n  private _handleHueOrSaturationChange = (hueOrSaturation: HSVColor) => {\r\n    if (hueOrSaturation.s === 0)  // for a ColorDef to be created from hsv s can't be 0\r\n      hueOrSaturation = hueOrSaturation.clone(undefined, 0.5);\r\n\r\n    const shadowColor = hueOrSaturation.toColorDef();\r\n    this.setState({ shadowColor }, () => this.props.dataProvider.shadowColor = shadowColor);\r\n  };\r\n\r\n  public getLocalTime(ticks: number): Date {\r\n    const projectTime = new Date(ticks);\r\n    // convert project date to browser locale date\r\n    return adjustDateToTimezone(projectTime, this.props.dataProvider.timeZoneOffset * 60);\r\n  }\r\n\r\n  public override render() {\r\n    const { dataProvider } = this.props;\r\n    const { speed, loop, currentTimeOffsetMs,\r\n      sunRiseOffsetMs, sunSetOffsetMs } = this.state;\r\n    const localTime = this.getLocalTime(this.state.dayStartMs + this.state.currentTimeOffsetMs);\r\n    const formattedTime = this._formatTime(dataProvider.dayStartMs + currentTimeOffsetMs);\r\n    const formattedDate = `${this._months[localTime.getMonth()]}, ${localTime.getDate()}`;\r\n\r\n    const colorSwatchStyle: React.CSSProperties = {\r\n      width: `100%`,\r\n      height: `100%`,\r\n    };\r\n\r\n    return (\r\n      <div className={\"solar-timeline-wrapper\"} >\r\n        <div className=\"header\">\r\n          <PlayButton tooltip={this._playLabel} className=\"play-button\" isPlaying={this.state.isPlaying} onPlay={this._onPlay} onPause={this._onPause} />\r\n          <button data-testid=\"solar-date-time-button\" title={this._dateTimeLabel} className=\"current-date\" ref={(element) => this._datePicker = element} onClick={this._onOpenDayPicker}>\r\n            <span>{formattedDate}</span>\r\n            <span>/</span>\r\n            <span>{formattedTime}</span>\r\n            <span className=\"icon icon-calendar\" />\r\n          </button>\r\n          <Popup style={{ border: \"none\" }} offset={11} target={this._datePicker} isOpen={this.state.isDateOpened} onClose={this._onCloseDayPicker} position={RelativePosition.Top}>\r\n            <div className=\"components-date-picker-calendar-popup-panel\" data-testid=\"components-date-picker-calendar-popup-panel\">\r\n              <DatePicker selected={localTime} onDateChange={this._onDayClick} showFocusOutline={false} />\r\n              <div className=\"time-container\">\r\n                <BodyText className=\"time-label\">{this._timeLabel}</BodyText>\r\n                <TimeField time={{ hours: localTime.getHours(), minutes: localTime.getMinutes(), seconds: 0 }} timeDisplay={TimeDisplay.H12MC} onTimeChange={this._onTimeChanged} />\r\n              </div>\r\n            </div>\r\n          </Popup>\r\n          <Timeline className=\"solar-timeline\"\r\n            dayStartMs={dataProvider.dayStartMs}\r\n            sunSetOffsetMs={sunSetOffsetMs}\r\n            sunRiseOffsetMs={sunRiseOffsetMs}\r\n            currentTimeOffsetMs={currentTimeOffsetMs}\r\n            onChange={this._onChange}\r\n            onUpdate={this._onUpdate}\r\n            formatTime={this._formatTime}\r\n            isPlaying={this.state.isPlaying}\r\n          />\r\n          <div className=\"speed-container\">\r\n            <span title={this._speedLabel}>{speed}x</span>\r\n            <SpeedTimeline className=\"speed\" onChange={this._onSpeedChange} speed={this.state.speed} />\r\n          </div>\r\n          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\r\n          <span title={this._loopLabel}\r\n            className={classnames(\"icon\", \"icon-media-controls-loop\", !loop && \"no-loop-playback\", loop && \"loop-playback\")} onClick={this._onToggleLoop}\r\n            role=\"button\" tabIndex={-1}\r\n          ></span>\r\n          <button data-testid=\"shadow-settings-button\" title={this._settingLabel} className=\"shadow-settings-button\" ref={(element) => this._settings = element} onClick={this._onOpenSettingsPopup}>\r\n            <span className=\"icon icon-settings\" />\r\n          </button>\r\n          <Popup className=\"shadow-settings-popup\" target={this._settings} offset={11} isOpen={this.state.isSettingsOpened} onClose={this._onCloseSettingsPopup} position={RelativePosition.Top}>\r\n            <div className=\"shadow-settings-popup-container\" >\r\n              <div className=\"shadow-settings-header\">{this._settingsPopupTitle}</div>\r\n              <div className=\"shadow-settings-color\">\r\n                <div className=\"shadow-settings-color-top\">\r\n                  <SaturationPicker hsv={this.state.shadowColor.toHSV()} onSaturationChange={this._handleHueOrSaturationChange} />\r\n                </div>\r\n                <div className=\"shadow-settings-color-bottom\">\r\n                  <div className=\"shadow-settings-color-bottom-left\">\r\n                    <HueSlider hsv={this.state.shadowColor.toHSV()} onHueChange={this._handleHueOrSaturationChange} isHorizontal={true} />\r\n                  </div>\r\n                  <div className=\"shadow-settings-color-bottom-right\">\r\n                    <ColorSwatch style={colorSwatchStyle} colorDef={this.state.shadowColor} round={false} />\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div className=\"shadow-settings-color-presets\">\r\n                <ColorSwatch colorDef={this._presetColors[0]} round={false} onColorPick={this._onPresetColorPick} />\r\n                <ColorSwatch colorDef={this._presetColors[1]} round={false} onColorPick={this._onPresetColorPick} />\r\n                <ColorSwatch colorDef={this._presetColors[2]} round={false} onColorPick={this._onPresetColorPick} />\r\n                <ColorSwatch colorDef={this._presetColors[3]} round={false} onColorPick={this._onPresetColorPick} />\r\n                <ColorSwatch colorDef={this._presetColors[4]} round={false} onColorPick={this._onPresetColorPick} />\r\n                <ColorSwatch colorDef={this._presetColors[5]} round={false} onColorPick={this._onPresetColorPick} />\r\n                <ColorSwatch colorDef={this._presetColors[6]} round={false} onColorPick={this._onPresetColorPick} />\r\n                <ColorSwatch colorDef={this._presetColors[7]} round={false} onColorPick={this._onPresetColorPick} />\r\n              </div>\r\n            </div>\r\n          </Popup>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"SolarTimeline.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/SolarTimeline.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,mGAAmG;AACnG,0BAA0B;AAE1B,gCAA8B;AAC9B,4DAAoC;AACpC,6CAA+B;AAC/B,wDAA6D;AAE7D,oDAAqE;AACrE,0DAAsE;AACtE,kDAA6D;AAC7D,8DAA8G;AAC9G,kDAA+C;AAC/C,gEAA6D;AAC7D,4CAA8C;AAE9C,iDAA4C;AAC5C,mDAAgD;AAChD,yCAAiG;AACjG,8DAA2D;AAC3D,oEAA+E;AAE/E,gGAAgG;AAEhG,MAAM,iBAAiB,GAAG,IAAI,GAAG,EAAE,CAAC;AACpC,MAAM,eAAe,GAAG,iBAAiB,GAAG,EAAE,CAAC;AAC/C,+CAA+C;AAC/C,MAAM,uBAAuB,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC,aAAa;AACxD,MAAM,OAAO,GAAG,CAAC,CAAS,EAAE,EAAE;IAC5B,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAChC,CAAC,CAAC;AAaF,SAAS,QAAQ,CAAC,KAAoB;IACpC,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAkB,CAAC;IAC/E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE9D,KAAK,CAAC,eAAe,CAAC,GAAG,EAAE;QACzB,uBAAuB;QACvB,IAAI,SAAS,CAAC,OAAO,EAAE;YACrB,MAAM,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;YAC3E,IAAI,SAAS,IAAI,eAAe,KAAK,SAAS,EAAE;gBAC9C,kBAAkB,CAAC,SAA2B,CAAC,CAAC;aACjD;SACF;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,OAAO;YACL,SAAS,EAAE,2BAA2B;YACtC,QAAQ,EAAE,oBAAC,sBAAW,OAAG;SAC1B,CAAC;IACJ,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,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpE,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAChD,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAChD,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyB,EAAE,EAAE;QACxE,eAAe;YACb,iBAAiB,CAAC,IAAA,mCAAwB,EAAC,eAAe,CAAC,qBAAqB,EAAE,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACxG,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,cAAc,EAAE,eAAe,EAAE,mBAAmB,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAE1I,MAAM,aAAa,GAAG,IAAA,0BAAe,EAAC,eAAe,CAAC,CAAC;IAEvD,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACnC,MAAM,OAAO,GAAG,SAAS,IAAI,eAAe,IAAI,aAAa,CAAC;QAC9D,MAAM,aAAa,GAAG,cAAc,GAAG,eAAe,CAAC;QACvD,MAAM,OAAO,GAAG,CAAC,SAAS,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,mBAAmB,GAAG,eAAe,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,cAAc,CAAC;QACxH,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,SAAS,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,GAAG,CAAC,eAAe,GAAG,CAAC,cAAc,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;QACxK,OAAO,CAAC,oBAAC,sBAAW,IAAC,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,GAAI,CAAC,CAAC;IAC7F,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE,aAAa,EAAE,cAAc,EAAE,eAAe,EAAE,mBAAmB,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC;IAE9I,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,cAAc,EAAE,KAAK,CAAC,SAAS,EAAE,UAAU,IAAI,WAAW,CAAC,CAAC;IACzF,MAAM,aAAa,GAAG,UAAU,CAAC,UAAU,GAAG,eAAe,CAAC,CAAC;IAC/D,MAAM,YAAY,GAAG,UAAU,CAAC,UAAU,GAAG,cAAc,CAAC,CAAC;IAC7D,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS;QACvB,oBAAC,uBAAO,IAAC,OAAO,EAAE,aAAa;YAC7B,8BAAM,SAAS,EAAC,SAAS,aAElB,CACC;QACV,oBAAC,sBAAM,IAAC,GAAG,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,iBAAiB,EACvB,GAAG,EAAE,eAAe,EACpB,GAAG,EAAE,cAAc,EACnB,QAAQ,EAAC,EAAE,EACX,QAAQ,EAAC,EAAE,EACX,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,CAAC,mBAAmB,CAAC,EAC7B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,SAAS,EACrB,kBAAkB,EAAE;gBAClB,cAAc,EAAE,kBAAkB;gBAClC,aAAa,EAAE,iBAAiB;gBAChC,cAAc,EAAE,kBAAkB;aACnC,GACD;QACF,oBAAC,uBAAO,IAAC,OAAO,EAAE,YAAY;YAC5B,8BAAM,SAAS,EAAC,QAAQ,aAEjB,CACC,CACN,CACP,CAAC;AACJ,CAAC;AAyBD;;GAEG;AACH,MAAa,aAAc,SAAQ,KAAK,CAAC,aAAuE;IA2C9G,YAAY,KAAkC;QAC5C,KAAK,CAAC,KAAK,CAAC,CAAC;QA3CP,gBAAW,GAAuB,IAAI,CAAC;QACvC,cAAS,GAAuB,IAAI,CAAC;QACrC,kBAAa,GAAG,CAAC,CAAC;QAClB,eAAU,GAAG,KAAK,CAAC;QACnB,mBAAc,GAAG,CAAC,CAAC;QACnB,mBAAc,GAAG,CAAC,CAAC;QACnB,wBAAmB,GAAG,uCAAkB,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC;QAChF,eAAU,GAAG,uCAAkB,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC;QAChE,kBAAa,GAAG,uCAAkB,CAAC,SAAS,CAAC,wBAAwB,CAAC,CAAC;QACvE,eAAU,GAAG,uCAAkB,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;QAC7D,gBAAW,GAAG,uCAAkB,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC;QAClE,mBAAc,GAAG,uCAAkB,CAAC,SAAS,CAAC,wBAAwB,CAAC,CAAC;QAExE,YAAO,GAAG;YAChB,+BAAY,CAAC,SAAS,CAAC,qBAAqB,CAAC;YAC7C,+BAAY,CAAC,SAAS,CAAC,sBAAsB,CAAC;YAC9C,+BAAY,CAAC,SAAS,CAAC,mBAAmB,CAAC;YAC3C,+BAAY,CAAC,SAAS,CAAC,mBAAmB,CAAC;YAC3C,+BAAY,CAAC,SAAS,CAAC,iBAAiB,CAAC;YACzC,+BAAY,CAAC,SAAS,CAAC,kBAAkB,CAAC;YAC1C,+BAAY,CAAC,SAAS,CAAC,kBAAkB,CAAC;YAC1C,+BAAY,CAAC,SAAS,CAAC,oBAAoB,CAAC;YAC5C,+BAAY,CAAC,SAAS,CAAC,uBAAuB,CAAC;YAC/C,+BAAY,CAAC,SAAS,CAAC,qBAAqB,CAAC;YAC7C,+BAAY,CAAC,SAAS,CAAC,sBAAsB,CAAC;YAC9C,+BAAY,CAAC,SAAS,CAAC,sBAAsB,CAAC;SAC/C,CAAC;QAEM,eAAU,GAAG,+BAAY,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;QACvD,aAAQ,GAAG,+BAAY,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7C,aAAQ,GAAG,+BAAY,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,kBAAa,GAAG;YAC/B,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,IAAI,CAAC;YACjC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,SAAS,CAAC;YACtC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,QAAQ,CAAC;YACrC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,SAAS,CAAC;YACtC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,UAAU,CAAC;YACvC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,SAAS,CAAC;YACtC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,GAAG,CAAC;YAChC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,SAAS,CAAC;SACvC,CAAC;QAuCF,uFAAuF;QAC/E,qBAAgB,GAAG,CAAC,UAAkB,EAAE,EAAE;YAChD,uBAAuB;YACvB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,EAAE;gBAC5C,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;gBAChD,OAAO;aACR;YAED,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC;YACzC,IAAI,CAAC,cAAc,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC;YAC3D,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;gBACrB,eAAe,GAAG,CAAC,CAAC;YAEtB,IAAI,eAAe,GAAG,IAAI,CAAC;YAE3B,+HAA+H;YAC/H,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;YAEvG,IAAI,eAAe,GAAG,IAAI,EAAE;gBAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;oBACpB,eAAe,GAAG,KAAK,CAAC;oBACxB,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC;oBAC1C,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;iBACjD;qBAAM;oBACL,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC;oBAC3C,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;iBACzB;aACF;YAED,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE;gBACzC,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;aACvD;YAED,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,mBAAmB,EAAE,aAAa,EAAE,EAAE,GAAG,EAAE;gBACrF,IAAI,eAAe;oBACjB,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAC7E,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAcF,4BAA4B;QACpB,aAAQ,GAAG,GAAG,EAAE;YACtB,qBAAqB;YACrB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS;gBACvB,OAAO;YAET,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC;YACzC,IAAI,CAAC,cAAc,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC;YAE3D,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,uBAAuB;YACvB,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW;gBACxB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC,CAAC;QAEF,2BAA2B;QACnB,YAAO,GAAG,GAAG,EAAE;YACrB,qBAAqB;YACrB,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS;gBACtB,OAAO;YAET,IAAI,IAAI,CAAC,KAAK,CAAC,mBAAmB,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,mBAAmB,IAAI,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE;gBAC/H,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;gBACxB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;aACxC;iBAAM;gBACL,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;aAC5C;QACH,CAAC,CAAC;QAMF;yBACiB;QACT,gBAAW,GAAG,CAAC,GAAS,EAAE,EAAE;YAClC,MAAM,YAAY,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YAC9E,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;YACrD,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC;YACtD,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,UAAU,CAAC;YAC/E,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,EAAE,GAAG,UAAU,CAAC;YAC7E,MAAM,UAAU,GAAG,cAAc,GAAG,eAAe,CAAC;YAEpD,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,EAAE,cAAc,CAAC,CAAC;YACtG,IAAI,CAAC,wBAAwB,CAAC,WAAW,EAAE,eAAe,EAAE,UAAU,CAAC,CAAC;YAExE,gDAAgD;YAChD,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,aAAa;gBACvC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;YAE3E,IAAI,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,eAAe,EAAE,cAAc,EAAE,mBAAmB,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE;gBACrI,IAAI,CAAC,cAAc,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC;YAC7C,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,mBAAc,GAAG,CAAC,IAAc,EAAE,EAAE;YAC1C,uCAAuC;YACvC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC;YACtD,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,GAAG,iBAAiB,CAAC,CAAC;YACpF,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,CAAC;YACvD,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;YAE9D,sCAAsC;YACtC,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,aAAa;gBACvC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;YAEzD,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;YAE7G,IAAI,CAAC,wBAAwB,CAAC,mBAAmB,EAAE,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YACtG,IAAI,CAAC,cAAc,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC;YAE3C,sBAAsB;YACtB,IAAI,CAAC,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC,CAAC;QACzC,CAAC,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC;QACzC,CAAC,CAAC;QAEM,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;QAC5E,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,EAAE,gBAAgB,EAAE,CAAC,SAAS,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;QACpF,CAAC,CAAC;QAyBM,cAAS,GAAG,CAAC,MAA6B,EAAE,EAAE;YACpD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS;gBACvB,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QACzC,CAAC,CAAC;QAEM,cAAS,GAAG,CAAC,MAA6B,EAAE,EAAE;YACpD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS;gBACvB,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QACzC,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,QAAgB,EAAE,EAAE;YACzC,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;YAChC,8CAA8C;YAC9C,MAAM,SAAS,GAAG,IAAA,uCAAoB,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,cAAc,GAAG,EAAE,CAAC,CAAC;YAC1F,IAAI,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC;YACjC,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;YAC3C,MAAM,MAAM,GAAG,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC7F,KAAK,GAAG,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;YAC1C,OAAO,GAAG,KAAK,IAAI,OAAO,IAAI,MAAM,EAAE,CAAC;QACzC,CAAC,CAAC;QAEM,uBAAkB,GAAG,CAAC,WAAqB,EAAE,EAAE;YACrD,IAAI,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,WAAW,GAAG,WAAW,CAAC,CAAC;QAC1F,CAAC,CAAC;QAEM,iCAA4B,GAAG,CAAC,eAAyB,EAAE,EAAE;YACnE,IAAI,eAAe,CAAC,CAAC,KAAK,CAAC,EAAG,qDAAqD;gBACjF,eAAe,GAAG,eAAe,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;YAE1D,MAAM,WAAW,GAAG,eAAe,CAAC,UAAU,EAAE,CAAC;YACjD,IAAI,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,WAAW,GAAG,WAAW,CAAC,CAAC;QAC1F,CAAC,CAAC;QAvPA,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC;QACtD,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,UAAU,CAAC;QAC/E,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,EAAE,GAAG,UAAU,CAAC;QAC7E,MAAM,UAAU,GAAG,cAAc,GAAG,eAAe,CAAC;QACpD,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,OAAO,EAAE,GAAG,UAAU,CAAC;QAC7E,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,eAAe,EAAE,cAAc,CAAC,CAAC;QAC3F,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC;QACxD,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC;QACrF,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,CAAC,mBAAmB,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,CAAC,CAAC;QAElG,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;IA4CO,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,uBAAuB;YACvB,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW;gBACxB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;IACL,CAAC;IAoCO,wBAAwB,CAAC,WAAmB,EAAE,eAAuB,EAAE,UAAkB,EAAE,gBAAyB;QAC1H,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,WAAW,GAAG,eAAe,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACjJ,CAAC;IA4DO,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;YAC5C,OAAO;QAET,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;QAE7G,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE;YACzC,MAAM,cAAc,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,mBAAmB,CAAC,CAAC;YAC7E,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;SACvD;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,GAAG,CAAC,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;YACnG,IAAI,CAAC,cAAc,GAAG,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC;QACtE,CAAC,CAAC,CAAC;IACL,CAAC;IA4CM,YAAY,CAAC,KAAa;QAC/B,MAAM,WAAW,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,8CAA8C;QAC9C,OAAO,IAAA,uCAAoB,EAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,cAAc,GAAG,EAAE,CAAC,CAAC;IACxF,CAAC;IAEe,MAAM;QACpB,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACpC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,mBAAmB,EACtC,eAAe,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACjD,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;QAC5F,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,UAAU,GAAG,mBAAmB,CAAC,CAAC;QACtF,MAAM,aAAa,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,KAAK,SAAS,CAAC,OAAO,EAAE,EAAE,CAAC;QAEtF,MAAM,gBAAgB,GAAwB;YAC5C,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAE,wBAAwB;YACtC,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,yBAAU,IAAC,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAI;gBAC/I,+CAAoB,wBAAwB,EAAC,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,SAAS,EAAC,cAAc,EAAC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,GAAG,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB;oBAC5K,kCAAO,aAAa,CAAQ;oBAC5B,sCAAc;oBACd,kCAAO,aAAa,CAAQ;oBAC5B,8BAAM,SAAS,EAAC,MAAM;wBAAC,oBAAC,iBAAI,IAAC,QAAQ,EAAE,oBAAC,iCAAW,OAAG,GAAI,CAAO,CAC1D;gBACT,oBAAC,kBAAK,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAE,QAAQ,EAAE,iCAAgB,CAAC,GAAG;oBACtK,6BAAK,SAAS,EAAC,6CAA6C,iBAAa,6CAA6C;wBACpH,oBAAC,6BAAU,IAAC,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,CAAC,WAAW,EAAE,gBAAgB,EAAE,KAAK,GAAI;wBAC5F,6BAAK,SAAS,EAAC,gBAAgB;4BAC7B,oBAAC,oBAAI,IAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAC,YAAY,IAAE,IAAI,CAAC,UAAU,CAAQ;4BACpE,oBAAC,4BAAS,IAAC,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,4BAAW,CAAC,KAAK,EAAE,YAAY,EAAE,IAAI,CAAC,cAAc,GAAI,CAChK,CACF,CACA;gBACR,oBAAC,QAAQ,IAAC,SAAS,EAAC,gBAAgB,EAClC,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;gBACF,6BAAK,SAAS,EAAC,iBAAiB;oBAC9B,8BAAM,KAAK,EAAE,IAAI,CAAC,WAAW;wBAAG,KAAK;4BAAS;oBAC9C,oBAAC,6BAAa,IAAC,SAAS,EAAC,OAAO,EAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI,CACvF;gBAEN,8BAAM,KAAK,EAAE,IAAI,CAAC,UAAU,EAC1B,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,CAAC,IAAI,IAAI,kBAAkB,EAAE,IAAI,IAAI,eAAe,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,EAChH,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC;oBAC3B,oBAAC,iBAAI,IAAC,QAAQ,EAAE,oBAAC,6BAAO,OAAG,GAAI,CAAO;gBACvC,+CAAoB,wBAAwB,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,EAAC,wBAAwB,EAAC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,oBAAoB;oBACvL,8BAAM,SAAS,EAAC,MAAM;wBAAC,oBAAC,iBAAI,IAAC,QAAQ,EAAE,oBAAC,iCAAW,OAAG,GAAI,CAAO,CAC1D;gBACT,oBAAC,kBAAK,IAAC,SAAS,EAAC,uBAAuB,EAAC,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,OAAO,EAAE,IAAI,CAAC,qBAAqB,EAAE,QAAQ,EAAE,iCAAgB,CAAC,GAAG;oBACnL,6BAAK,SAAS,EAAC,iCAAiC;wBAC9C,6BAAK,SAAS,EAAC,wBAAwB,IAAE,IAAI,CAAC,mBAAmB,CAAO;wBACxE,6BAAK,SAAS,EAAC,uBAAuB;4BACpC,6BAAK,SAAS,EAAC,2BAA2B;gCACxC,oBAAC,mCAAgB,IAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,CAAC,4BAA4B,GAAI,CAC5G;4BACN,6BAAK,SAAS,EAAC,8BAA8B;gCAC3C,6BAAK,SAAS,EAAC,mCAAmC;oCAChD,oBAAC,qBAAS,IAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,4BAA4B,EAAE,YAAY,EAAE,IAAI,GAAI,CAClH;gCACN,6BAAK,SAAS,EAAC,oCAAoC;oCACjD,oBAAC,oBAAW,IAAC,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,GAAI,CACpF,CACF,CACF;wBACN,6BAAK,SAAS,EAAC,+BAA+B;4BAC5C,oBAAC,oBAAW,IAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,kBAAkB,GAAI;4BACpG,oBAAC,oBAAW,IAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,kBAAkB,GAAI;4BACpG,oBAAC,oBAAW,IAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,kBAAkB,GAAI;4BACpG,oBAAC,oBAAW,IAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,kBAAkB,GAAI;4BACpG,oBAAC,oBAAW,IAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,kBAAkB,GAAI;4BACpG,oBAAC,oBAAW,IAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,kBAAkB,GAAI;4BACpG,oBAAC,oBAAW,IAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,kBAAkB,GAAI;4BACpG,oBAAC,oBAAW,IAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,kBAAkB,GAAI,CAChG,CACF,CACA,CACJ,CACF,CACP,CAAC;IACJ,CAAC;CACF;AAnYD,sCAmYC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Timeline\r\n */\r\n\r\n// component is in alpha state - it may change after usability testing - test coverage not complete\r\n/* istanbul ignore file */\r\n\r\nimport \"./SolarTimeline.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Slider, Text, Tooltip } from \"@itwin/itwinui-react\";\r\n\r\nimport { ColorByName, ColorDef, HSVColor } from \"@itwin/core-common\";\r\nimport { RelativePosition, TimeDisplay } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, Icon, Popup } from \"@itwin/core-react\";\r\nimport { adjustDateToTimezone, DatePicker, TimeField, TimeSpec, UiComponents } from \"@itwin/components-react\";\r\nimport { HueSlider } from \"../color/HueSlider\";\r\nimport { SaturationPicker } from \"../color/SaturationPicker\";\r\nimport { ColorSwatch } from \"../color/Swatch\";\r\nimport { SolarDataProvider } from \"./interfaces\";\r\nimport { PlayButton } from \"./PlayerButton\";\r\nimport { SpeedTimeline } from \"./SpeedTimeline\";\r\nimport { CustomThumb, getPercentageOfRectangle, RailMarkers, useFocusedThumb } from \"./Scrubber\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\nimport { SvgCalendar, SvgLoop, SvgSettings } from \"@itwin/itwinui-icons-react\";\r\n\r\n// cSpell:ignore millisec solarsettings showticks shadowcolor solartimeline datepicker millisecs\r\n\r\nconst millisecPerMinute = 1000 * 60;\r\nconst millisecPerHour = millisecPerMinute * 60;\r\n// const millisecPerDay = millisecPerHour * 24;\r\nconst defaultPlaybackDuration = 40 * 1000; // 40 seconds\r\nconst addZero = (i: number) => {\r\n  return (i < 10) ? `0${i}` : i;\r\n};\r\n\r\ninterface TimelineProps extends CommonProps {\r\n  dayStartMs: number;\r\n  sunRiseOffsetMs: number;\r\n  sunSetOffsetMs: number;\r\n  currentTimeOffsetMs: number;\r\n  isPlaying: boolean;\r\n  formatTick?: (millisec: number) => string;\r\n  formatTime: (millisec: number) => string;\r\n  onChange?: (values: ReadonlyArray<number>) => void;\r\n  onUpdate?: (values: ReadonlyArray<number>) => void;\r\n}\r\nfunction Timeline(props: TimelineProps) {\r\n  const sliderRef = React.useRef<HTMLDivElement>(null);\r\n  const [sliderContainer, setSliderContainer] = React.useState<HTMLDivElement>();\r\n  const [pointerPercent, setPointerPercent] = React.useState(0);\r\n\r\n  React.useLayoutEffect(() => {\r\n    // istanbul ignore else\r\n    if (sliderRef.current) {\r\n      const container = sliderRef.current.querySelector(\".iui-slider-container\");\r\n      if (container && sliderContainer !== container) {\r\n        setSliderContainer(container as HTMLDivElement);\r\n      }\r\n    }\r\n  }, [sliderContainer]);\r\n\r\n  const thumbProps = () => {\r\n    return {\r\n      className: \"components-timeline-thumb\",\r\n      children: <CustomThumb />,\r\n    };\r\n  };\r\n\r\n  const tooltipProps = React.useCallback(() => {\r\n    return { visible: false };\r\n  }, []);\r\n\r\n  const [showRailTooltip, setShowRailTooltip] = React.useState(false);\r\n\r\n  const handlePointerEnter = React.useCallback(() => {\r\n    setShowRailTooltip(true);\r\n  }, []);\r\n\r\n  const handlePointerLeave = React.useCallback(() => {\r\n    setShowRailTooltip(false);\r\n  }, []);\r\n\r\n  const handlePointerMove = React.useCallback((event: React.PointerEvent) => {\r\n    sliderContainer &&\r\n      setPointerPercent(getPercentageOfRectangle(sliderContainer.getBoundingClientRect(), event.clientX));\r\n  }, [sliderContainer]);\r\n\r\n  const { formatTick, formatTime, onChange, onUpdate, dayStartMs, sunSetOffsetMs, sunRiseOffsetMs, currentTimeOffsetMs, isPlaying } = props;\r\n\r\n  const thumbHasFocus = useFocusedThumb(sliderContainer);\r\n\r\n  const tickLabel = React.useMemo(() => {\r\n    const showTip = isPlaying || showRailTooltip || thumbHasFocus;\r\n    const totalDuration = sunSetOffsetMs - sunRiseOffsetMs;\r\n    const percent = (isPlaying || thumbHasFocus) ? (currentTimeOffsetMs - sunRiseOffsetMs) / totalDuration : pointerPercent;\r\n    const tooltipText = formatTime((isPlaying || thumbHasFocus) ? (dayStartMs + currentTimeOffsetMs) : (dayStartMs + (sunRiseOffsetMs + (pointerPercent * totalDuration))));\r\n    return (<RailMarkers showToolTip={showTip} percent={percent} tooltipText={tooltipText} />);\r\n  }, [isPlaying, showRailTooltip, thumbHasFocus, sunSetOffsetMs, sunRiseOffsetMs, currentTimeOffsetMs, pointerPercent, formatTime, dayStartMs]);\r\n\r\n  const className = classnames(\"solar-slider\", props.className, formatTick && \"showticks\");\r\n  const sunRiseFormat = formatTime(dayStartMs + sunRiseOffsetMs);\r\n  const sunSetFormat = formatTime(dayStartMs + sunSetOffsetMs);\r\n  return (\r\n    <div className={className}>\r\n      <Tooltip content={sunRiseFormat}>\r\n        <span className=\"sunrise\">\r\n          &#x2600;\r\n        </span>\r\n      </Tooltip>\r\n      <Slider ref={sliderRef}\r\n        className={className}\r\n        step={millisecPerMinute}\r\n        min={sunRiseOffsetMs}\r\n        max={sunSetOffsetMs}\r\n        minLabel=\"\"\r\n        maxLabel=\"\"\r\n        onUpdate={onUpdate}\r\n        onChange={onChange}\r\n        values={[currentTimeOffsetMs]}\r\n        tooltipProps={tooltipProps}\r\n        thumbProps={thumbProps}\r\n        tickLabels={tickLabel}\r\n        railContainerProps={{\r\n          onPointerEnter: handlePointerEnter,\r\n          onPointerMove: handlePointerMove,\r\n          onPointerLeave: handlePointerLeave,\r\n        }}\r\n      />\r\n      <Tooltip content={sunSetFormat}>\r\n        <span className=\"sunset\">\r\n          &#x263D;\r\n        </span>\r\n      </Tooltip>\r\n    </div>\r\n  );\r\n}\r\n\r\ninterface SolarTimelineComponentProps {\r\n  dataProvider: SolarDataProvider;  // provides date, sunrise, sunset in millisecs, also contains timezone offset from UTC, and updates the display style to current time.\r\n  onPlayPause?: (playing: boolean) => void; // callback triggered when play/pause button is pressed\r\n  duration?: number;  // playback duration in milliseconds\r\n  speed?: number;\r\n}\r\n\r\ninterface SolarTimelineComponentState {\r\n  isPlaying: boolean;     // timeline is currently playing or paused\r\n  isDateOpened: boolean;  // date picker is opened\r\n  isSettingsOpened: boolean;  // settings popup is opened\r\n  dayStartMs: number;\r\n  sunRiseOffsetMs: number;\r\n  sunSetOffsetMs: number;\r\n  sunDeltaMs: number;\r\n  currentTimeOffsetMs: number;\r\n  speed: number;\r\n  loop: boolean;\r\n  shadowColor: ColorDef;\r\n  duration: number;  // playback duration in milliseconds\r\n  adjustedDuration: number;  // playback duration in milliseconds/ speed\r\n}\r\n\r\n/** Solar Timeline\r\n * @alpha\r\n */\r\nexport class SolarTimeline extends React.PureComponent<SolarTimelineComponentProps, SolarTimelineComponentState> {\r\n  private _datePicker: HTMLElement | null = null;\r\n  private _settings: HTMLElement | null = null;\r\n  private _requestFrame = 0;\r\n  private _unmounted = false;\r\n  private _timeLastCycle = 0;\r\n  private _totalPlayTime = 0;\r\n  private _settingsPopupTitle = UiIModelComponents.translate(\"solarsettings.shadowcolor\");\r\n  private _playLabel = UiIModelComponents.translate(\"solartimeline.play\");\r\n  private _settingLabel = UiIModelComponents.translate(\"solartimeline.settings\");\r\n  private _loopLabel = UiIModelComponents.translate(\"timeline.repeat\");\r\n  private _speedLabel = UiIModelComponents.translate(\"solartimeline.speed\");\r\n  private _dateTimeLabel = UiIModelComponents.translate(\"solartimeline.dateTime\");\r\n\r\n  private _months = [\r\n    UiComponents.translate(\"month.short.january\"),\r\n    UiComponents.translate(\"month.short.february\"),\r\n    UiComponents.translate(\"month.short.march\"),\r\n    UiComponents.translate(\"month.short.april\"),\r\n    UiComponents.translate(\"month.short.may\"),\r\n    UiComponents.translate(\"month.short.june\"),\r\n    UiComponents.translate(\"month.short.july\"),\r\n    UiComponents.translate(\"month.short.august\"),\r\n    UiComponents.translate(\"month.short.september\"),\r\n    UiComponents.translate(\"month.short.october\"),\r\n    UiComponents.translate(\"month.short.november\"),\r\n    UiComponents.translate(\"month.short.december\"),\r\n  ];\r\n\r\n  private _timeLabel = UiComponents.translate(\"datepicker.time\");\r\n  private _amLabel = UiComponents.translate(\"time.am\");\r\n  private _pmLabel = UiComponents.translate(\"time.pm\");\r\n  private readonly _presetColors = [\r\n    ColorDef.create(ColorByName.grey),\r\n    ColorDef.create(ColorByName.lightGrey),\r\n    ColorDef.create(ColorByName.darkGrey),\r\n    ColorDef.create(ColorByName.lightBlue),\r\n    ColorDef.create(ColorByName.lightGreen),\r\n    ColorDef.create(ColorByName.darkGreen),\r\n    ColorDef.create(ColorByName.tan),\r\n    ColorDef.create(ColorByName.darkBrown),\r\n  ];\r\n\r\n  constructor(props: SolarTimelineComponentProps) {\r\n    super(props);\r\n\r\n    const dayStartMs = this.props.dataProvider.dayStartMs;\r\n    const sunRiseOffsetMs = this.props.dataProvider.sunrise.getTime() - dayStartMs;\r\n    const sunSetOffsetMs = this.props.dataProvider.sunset.getTime() - dayStartMs;\r\n    const sunDeltaMs = sunSetOffsetMs - sunRiseOffsetMs;\r\n    const sunOffsetMs = this.props.dataProvider.timeOfDay.getTime() - dayStartMs;\r\n    const currentTimeOffsetMs = this.ensureRange(sunOffsetMs, sunRiseOffsetMs, sunSetOffsetMs);\r\n    const shadowColor = this.props.dataProvider.shadowColor;\r\n    const duration = this.props.duration ? this.props.duration : defaultPlaybackDuration;\r\n    const speed = this.props.speed ? this.props.speed : 2;\r\n    const adjustedDuration = duration / speed;\r\n    this.setPlaybackTimeBySunTime(currentTimeOffsetMs, sunRiseOffsetMs, sunDeltaMs, adjustedDuration);\r\n\r\n    this.state = {\r\n      isDateOpened: false,\r\n      isSettingsOpened: false,\r\n      isPlaying: false,\r\n      dayStartMs,\r\n      sunRiseOffsetMs,\r\n      sunSetOffsetMs,\r\n      sunDeltaMs,\r\n      currentTimeOffsetMs,\r\n      speed,\r\n      loop: false,\r\n      shadowColor,\r\n      duration,\r\n      adjustedDuration,\r\n    };\r\n  }\r\n\r\n  public override componentWillUnmount() {\r\n    window.cancelAnimationFrame(this._requestFrame);\r\n    this._unmounted = true;\r\n  }\r\n\r\n  // recursively update the animation until we hit the end or the pause button is clicked\r\n  private _updateAnimation = (_timestamp: number) => {\r\n    // istanbul ignore else\r\n    if (!this.state.isPlaying || this._unmounted) {\r\n      window.cancelAnimationFrame(this._requestFrame);\r\n      return;\r\n    }\r\n\r\n    const currentTime = new Date().getTime();\r\n    this._totalPlayTime += (currentTime - this._timeLastCycle);\r\n    this._timeLastCycle = currentTime;\r\n    let percentComplete = this._totalPlayTime / this.state.adjustedDuration;\r\n    if (percentComplete > 1)\r\n      percentComplete = 1;\r\n\r\n    let newPlayingState = true;\r\n\r\n    // calculate the next sun time base on the percentage playback complete - should be int value as that is step amount for slider\r\n    let nextSunOffset = Math.floor(this.state.sunRiseOffsetMs + (percentComplete * this.state.sunDeltaMs));\r\n\r\n    if (percentComplete > 0.99) {\r\n      if (!this.state.loop) {\r\n        newPlayingState = false;\r\n        nextSunOffset = this.state.sunSetOffsetMs;\r\n        window.cancelAnimationFrame(this._requestFrame);\r\n      } else {\r\n        nextSunOffset = this.state.sunRiseOffsetMs;\r\n        this._totalPlayTime = 0;\r\n      }\r\n    }\r\n\r\n    if (this.props.dataProvider.onTimeChanged) {\r\n      const currentSunTime = new Date(this.state.dayStartMs + nextSunOffset);\r\n      this.props.dataProvider.onTimeChanged(currentSunTime);\r\n    }\r\n\r\n    this.setState({ isPlaying: newPlayingState, currentTimeOffsetMs: nextSunOffset }, () => {\r\n      if (newPlayingState)\r\n        this._requestFrame = window.requestAnimationFrame(this._updateAnimation);\r\n    });\r\n  };\r\n\r\n  private _play(sunTimeMs: number) {\r\n    this._timeLastCycle = new Date().getTime();\r\n\r\n    // start playing\r\n    this.setState({ isPlaying: true, currentTimeOffsetMs: sunTimeMs }, () => {\r\n      this._requestFrame = window.requestAnimationFrame(this._updateAnimation);\r\n      // istanbul ignore else\r\n      if (this.props.onPlayPause)\r\n        this.props.onPlayPause(true);\r\n    });\r\n  }\r\n\r\n  // user clicked pause button\r\n  private _onPause = () => {\r\n    // istanbul ignore if\r\n    if (!this.state.isPlaying)\r\n      return;\r\n\r\n    const currentTime = new Date().getTime();\r\n    this._totalPlayTime += (currentTime - this._timeLastCycle);\r\n\r\n    // stop requesting frames\r\n    window.cancelAnimationFrame(this._requestFrame);\r\n\r\n    // stop playing\r\n    this.setState({ isPlaying: false });\r\n\r\n    // istanbul ignore else\r\n    if (this.props.onPlayPause)\r\n      this.props.onPlayPause(false);\r\n  };\r\n\r\n  // user clicked play button\r\n  private _onPlay = () => {\r\n    // istanbul ignore if\r\n    if (this.state.isPlaying)\r\n      return;\r\n\r\n    if (this.state.currentTimeOffsetMs >= this.state.sunSetOffsetMs || this.state.currentTimeOffsetMs <= this.state.sunRiseOffsetMs) {\r\n      this._totalPlayTime = 0;\r\n      this._play(this.state.sunRiseOffsetMs);\r\n    } else {\r\n      this._play(this.state.currentTimeOffsetMs);\r\n    }\r\n  };\r\n\r\n  private setPlaybackTimeBySunTime(sunOffsetMs: number, sunRiseOffsetMs: number, sunDeltaMs: number, adjustedDuration?: number) {\r\n    this._totalPlayTime = ((sunOffsetMs - sunRiseOffsetMs) / (sunDeltaMs)) * ((adjustedDuration) ? adjustedDuration : this.state.adjustedDuration);\r\n  }\r\n\r\n  /** note the day passed in is in the time of the current user not in project time because the date picker works in\r\n   * local time  */\r\n  private _onDayClick = (day: Date) => {\r\n    const selectedDate = new Date(day.getTime() + this.state.currentTimeOffsetMs);\r\n    this.props.dataProvider.setDateAndTime(selectedDate);\r\n    const dayStartMs = this.props.dataProvider.dayStartMs;\r\n    const sunRiseOffsetMs = this.props.dataProvider.sunrise.getTime() - dayStartMs;\r\n    const sunSetOffsetMs = this.props.dataProvider.sunset.getTime() - dayStartMs;\r\n    const sunDeltaMs = sunSetOffsetMs - sunRiseOffsetMs;\r\n\r\n    const sunOffsetMs = this.ensureRange(this.state.currentTimeOffsetMs, sunRiseOffsetMs, sunSetOffsetMs);\r\n    this.setPlaybackTimeBySunTime(sunOffsetMs, sunRiseOffsetMs, sunDeltaMs);\r\n\r\n    /** call dataProvider to update display style */\r\n    if (this.props.dataProvider.onTimeChanged)\r\n      this.props.dataProvider.onTimeChanged(this.props.dataProvider.timeOfDay);\r\n\r\n    this.setState({ dayStartMs, sunRiseOffsetMs, sunSetOffsetMs, currentTimeOffsetMs: sunOffsetMs, sunDeltaMs, isDateOpened: false }, () => {\r\n      this._timeLastCycle = new Date().getTime();\r\n    });\r\n  };\r\n\r\n  private _onTimeChanged = (time: TimeSpec) => {\r\n    // compute the current date (with time)\r\n    const dayStartMs = this.props.dataProvider.dayStartMs;\r\n    const sunTime = (time.hours * millisecPerHour) + (time.minutes * millisecPerMinute);\r\n    const dateWithNewTime = new Date(dayStartMs + sunTime);\r\n    this.props.dataProvider.setDateAndTime(dateWithNewTime, true);\r\n\r\n    // notify the provider to update style\r\n    if (this.props.dataProvider.onTimeChanged)\r\n      this.props.dataProvider.onTimeChanged(dateWithNewTime);\r\n\r\n    const currentTimeOffsetMs = this.ensureRange(sunTime, this.state.sunRiseOffsetMs, this.state.sunSetOffsetMs);\r\n\r\n    this.setPlaybackTimeBySunTime(currentTimeOffsetMs, this.state.sunRiseOffsetMs, this.state.sunDeltaMs);\r\n    this._timeLastCycle = new Date().getTime();\r\n\r\n    // update the timeline\r\n    this.setState({ currentTimeOffsetMs });\r\n  };\r\n\r\n  private _onCloseDayPicker = () => {\r\n    this.setState({ isDateOpened: false });\r\n  };\r\n\r\n  private _onOpenDayPicker = () => {\r\n    this.setState((prevState) => ({ isDateOpened: !prevState.isDateOpened }));\r\n  };\r\n\r\n  private _onCloseSettingsPopup = () => {\r\n    this.setState({ isSettingsOpened: false });\r\n  };\r\n\r\n  private _onOpenSettingsPopup = () => {\r\n    this.setState((prevState) => ({ isSettingsOpened: !prevState.isSettingsOpened }));\r\n  };\r\n\r\n  private ensureRange(value: number, min: number, max: number): number {\r\n    return Math.max(Math.min(value, max), min);\r\n  }\r\n\r\n  private processSunTimeChange(sunTime: number) {\r\n    if (sunTime === this.state.currentTimeOffsetMs)\r\n      return;\r\n\r\n    const currentTimeOffsetMs = this.ensureRange(sunTime, this.state.sunRiseOffsetMs, this.state.sunSetOffsetMs);\r\n\r\n    if (this.props.dataProvider.onTimeChanged) {\r\n      const currentSunTime = new Date(this.state.dayStartMs + currentTimeOffsetMs);\r\n      this.props.dataProvider.onTimeChanged(currentSunTime);\r\n    }\r\n\r\n    this.setState({ currentTimeOffsetMs }, () => {\r\n      const currentTime = new Date().getTime();\r\n      this._timeLastCycle = currentTime;\r\n      const percentComplete = (currentTimeOffsetMs - this.state.sunRiseOffsetMs) / this.state.sunDeltaMs;\r\n      this._totalPlayTime = percentComplete * this.state.adjustedDuration;\r\n    });\r\n  }\r\n\r\n  private _onUpdate = (values: ReadonlyArray<number>) => {\r\n    if (!this.state.isPlaying)\r\n      this.processSunTimeChange(values[0]);\r\n  };\r\n\r\n  private _onChange = (values: ReadonlyArray<number>) => {\r\n    if (!this.state.isPlaying)\r\n      this.processSunTimeChange(values[0]);\r\n  };\r\n\r\n  private _onSpeedChange = (value: number) => {\r\n    const adjustedDuration = this.state.duration / value;\r\n    this.setState({ speed: value, adjustedDuration });\r\n  };\r\n\r\n  private _onToggleLoop = () => {\r\n    this.setState((prevState) => ({ loop: !prevState.loop }));\r\n  };\r\n\r\n  private _formatTime = (millisec: number) => {\r\n    const date = new Date(millisec);\r\n    // convert project date to browser locale date\r\n    const localTime = adjustDateToTimezone(date, this.props.dataProvider.timeZoneOffset * 60);\r\n    let hours = localTime.getHours();\r\n    const minutes = addZero(date.getMinutes());\r\n    const abbrev = (hours < 12) ? this._amLabel : (hours === 24) ? this._amLabel : this._pmLabel;\r\n    hours = (hours > 12) ? hours - 12 : hours;\r\n    return `${hours}:${minutes} ${abbrev}`;\r\n  };\r\n\r\n  private _onPresetColorPick = (shadowColor: ColorDef) => {\r\n    this.setState({ shadowColor }, () => this.props.dataProvider.shadowColor = shadowColor);\r\n  };\r\n\r\n  private _handleHueOrSaturationChange = (hueOrSaturation: HSVColor) => {\r\n    if (hueOrSaturation.s === 0)  // for a ColorDef to be created from hsv s can't be 0\r\n      hueOrSaturation = hueOrSaturation.clone(undefined, 0.5);\r\n\r\n    const shadowColor = hueOrSaturation.toColorDef();\r\n    this.setState({ shadowColor }, () => this.props.dataProvider.shadowColor = shadowColor);\r\n  };\r\n\r\n  public getLocalTime(ticks: number): Date {\r\n    const projectTime = new Date(ticks);\r\n    // convert project date to browser locale date\r\n    return adjustDateToTimezone(projectTime, this.props.dataProvider.timeZoneOffset * 60);\r\n  }\r\n\r\n  public override render() {\r\n    const { dataProvider } = this.props;\r\n    const { speed, loop, currentTimeOffsetMs,\r\n      sunRiseOffsetMs, sunSetOffsetMs } = this.state;\r\n    const localTime = this.getLocalTime(this.state.dayStartMs + this.state.currentTimeOffsetMs);\r\n    const formattedTime = this._formatTime(dataProvider.dayStartMs + currentTimeOffsetMs);\r\n    const formattedDate = `${this._months[localTime.getMonth()]}, ${localTime.getDate()}`;\r\n\r\n    const colorSwatchStyle: React.CSSProperties = {\r\n      width: `100%`,\r\n      height: `100%`,\r\n    };\r\n\r\n    return (\r\n      <div className={\"solar-timeline-wrapper\"} >\r\n        <div className=\"header\">\r\n          <PlayButton tooltip={this._playLabel} className=\"play-button\" isPlaying={this.state.isPlaying} onPlay={this._onPlay} onPause={this._onPause} />\r\n          <button data-testid=\"solar-date-time-button\" title={this._dateTimeLabel} className=\"current-date\" ref={(element) => this._datePicker = element} onClick={this._onOpenDayPicker}>\r\n            <span>{formattedDate}</span>\r\n            <span>/</span>\r\n            <span>{formattedTime}</span>\r\n            <span className=\"icon\"><Icon iconSpec={<SvgCalendar />} /></span>\r\n          </button>\r\n          <Popup style={{ border: \"none\" }} offset={11} target={this._datePicker} isOpen={this.state.isDateOpened} onClose={this._onCloseDayPicker} position={RelativePosition.Top}>\r\n            <div className=\"components-date-picker-calendar-popup-panel\" data-testid=\"components-date-picker-calendar-popup-panel\">\r\n              <DatePicker selected={localTime} onDateChange={this._onDayClick} showFocusOutline={false} />\r\n              <div className=\"time-container\">\r\n                <Text variant=\"body\" className=\"time-label\">{this._timeLabel}</Text>\r\n                <TimeField time={{ hours: localTime.getHours(), minutes: localTime.getMinutes(), seconds: 0 }} timeDisplay={TimeDisplay.H12MC} onTimeChange={this._onTimeChanged} />\r\n              </div>\r\n            </div>\r\n          </Popup>\r\n          <Timeline className=\"solar-timeline\"\r\n            dayStartMs={dataProvider.dayStartMs}\r\n            sunSetOffsetMs={sunSetOffsetMs}\r\n            sunRiseOffsetMs={sunRiseOffsetMs}\r\n            currentTimeOffsetMs={currentTimeOffsetMs}\r\n            onChange={this._onChange}\r\n            onUpdate={this._onUpdate}\r\n            formatTime={this._formatTime}\r\n            isPlaying={this.state.isPlaying}\r\n          />\r\n          <div className=\"speed-container\">\r\n            <span title={this._speedLabel}>{speed}x</span>\r\n            <SpeedTimeline className=\"speed\" onChange={this._onSpeedChange} speed={this.state.speed} />\r\n          </div>\r\n          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\r\n          <span title={this._loopLabel}\r\n            className={classnames(\"icon\", !loop && \"no-loop-playback\", loop && \"loop-playback\")} onClick={this._onToggleLoop}\r\n            role=\"button\" tabIndex={-1}\r\n          ><Icon iconSpec={<SvgLoop />} /></span>\r\n          <button data-testid=\"shadow-settings-button\" title={this._settingLabel} className=\"shadow-settings-button\" ref={(element) => this._settings = element} onClick={this._onOpenSettingsPopup}>\r\n            <span className=\"icon\"><Icon iconSpec={<SvgSettings />} /></span>\r\n          </button>\r\n          <Popup className=\"shadow-settings-popup\" target={this._settings} offset={11} isOpen={this.state.isSettingsOpened} onClose={this._onCloseSettingsPopup} position={RelativePosition.Top}>\r\n            <div className=\"shadow-settings-popup-container\" >\r\n              <div className=\"shadow-settings-header\">{this._settingsPopupTitle}</div>\r\n              <div className=\"shadow-settings-color\">\r\n                <div className=\"shadow-settings-color-top\">\r\n                  <SaturationPicker hsv={this.state.shadowColor.toHSV()} onSaturationChange={this._handleHueOrSaturationChange} />\r\n                </div>\r\n                <div className=\"shadow-settings-color-bottom\">\r\n                  <div className=\"shadow-settings-color-bottom-left\">\r\n                    <HueSlider hsv={this.state.shadowColor.toHSV()} onHueChange={this._handleHueOrSaturationChange} isHorizontal={true} />\r\n                  </div>\r\n                  <div className=\"shadow-settings-color-bottom-right\">\r\n                    <ColorSwatch style={colorSwatchStyle} colorDef={this.state.shadowColor} round={false} />\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div className=\"shadow-settings-color-presets\">\r\n                <ColorSwatch colorDef={this._presetColors[0]} round={false} onColorPick={this._onPresetColorPick} />\r\n                <ColorSwatch colorDef={this._presetColors[1]} round={false} onColorPick={this._onPresetColorPick} />\r\n                <ColorSwatch colorDef={this._presetColors[2]} round={false} onColorPick={this._onPresetColorPick} />\r\n                <ColorSwatch colorDef={this._presetColors[3]} round={false} onColorPick={this._onPresetColorPick} />\r\n                <ColorSwatch colorDef={this._presetColors[4]} round={false} onColorPick={this._onPresetColorPick} />\r\n                <ColorSwatch colorDef={this._presetColors[5]} round={false} onColorPick={this._onPresetColorPick} />\r\n                <ColorSwatch colorDef={this._presetColors[6]} round={false} onColorPick={this._onPresetColorPick} />\r\n                <ColorSwatch colorDef={this._presetColors[7]} round={false} onColorPick={this._onPresetColorPick} />\r\n              </div>\r\n            </div>\r\n          </Popup>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}