@itwin/imodel-components-react 4.0.0-dev.15 → 4.0.0-dev.16

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

@@ -1 +1 @@
-{"version":3,"file":"imodel-components-react.js","sourceRoot":"","sources":["../../src/imodel-components-react.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAE/F,qEAAqE;AAErE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAElF,cAAc,6CAA6C,CAAC;AAC5D,cAAc,mDAAmD,CAAC;AAClE,cAAc,mDAAmD,CAAC;AAClE,cAAc,kDAAkD,CAAC;AACjE,cAAc,kDAAkD,CAAC;AACjE,cAAc,oDAAoD,CAAC;AACnE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,kDAAkD,CAAC;AACjE,cAAc,wCAAwC,CAAC;AAEvD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,gDAAgD,CAAC;AAE/D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sDAAsD,CAAC;AAErE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yDAAyD,CAAC;AAExE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,4DAA4D,CAAC;AAC3E,cAAc,+DAA+D,CAAC;AAE9E,cAAc,sDAAsD,CAAC;AACrE,cAAc,0DAA0D,CAAC;AACzE,cAAc,uDAAuD,CAAC;AACtE,cAAc,qDAAqD,CAAC;AACpE,cAAc,0DAA0D,CAAC;AACzE,cAAc,sDAAsD,CAAC;AACrE,cAAc,4DAA4D,CAAC;AAC3E,cAAc,8DAA8D,CAAC;AAE7E,cAAc,+CAA+C,CAAC;AAC9D,cAAc,6DAA6D,CAAC;AAC5E,cAAc,+CAA+C,CAAC;AAC9D,cAAc,iDAAiD,CAAC;AAChE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,sDAAsD,CAAC;AACrE,cAAc,kDAAkD,CAAC;AACjE,cAAc,0DAA0D,CAAC;AAEzE,cAAc,sDAAsD,CAAC;AACrE,cAAc,4DAA4D,CAAC;AAE3E;;;;GAIG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG","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\r\n// cSpell:ignore iconpicker lineweight hocs datepicker quantityformat\r\n\r\nexport { UiIModelComponents } from \"./imodel-components-react/UiIModelComponents\";\r\n\r\nexport * from \"./imodel-components-react/color/AlphaSlider\";\r\nexport * from \"./imodel-components-react/color/ColorPickerButton\";\r\nexport * from \"./imodel-components-react/color/ColorPickerDialog\";\r\nexport * from \"./imodel-components-react/color/ColorPickerPanel\";\r\nexport * from \"./imodel-components-react/color/ColorPickerPopup\";\r\nexport * from \"./imodel-components-react/color/getCSSColorFromDef\";\r\nexport * from \"./imodel-components-react/color/HueSlider\";\r\nexport * from \"./imodel-components-react/color/SaturationPicker\";\r\nexport * from \"./imodel-components-react/color/Swatch\";\r\n\r\nexport * from \"./imodel-components-react/editors/ColorEditor\";\r\nexport * from \"./imodel-components-react/editors/WeightEditor\";\r\n\r\nexport * from \"./imodel-components-react/inputs/QuantityInput\";\r\nexport * from \"./imodel-components-react/inputs/QuantityNumberInput\";\r\n\r\nexport * from \"./imodel-components-react/lineweight/Swatch\";\r\nexport * from \"./imodel-components-react/lineweight/WeightPickerButton\";\r\n\r\nexport * from \"./imodel-components-react/navigationaids/Cube\";\r\nexport * from \"./imodel-components-react/navigationaids/CubeNavigationAid\";\r\nexport * from \"./imodel-components-react/navigationaids/DrawingNavigationAid\";\r\n\r\nexport * from \"./imodel-components-react/quantityformat/FormatPanel\";\r\nexport * from \"./imodel-components-react/quantityformat/FormatPrecision\";\r\nexport * from \"./imodel-components-react/quantityformat/FormatSample\";\r\nexport * from \"./imodel-components-react/quantityformat/FormatType\";\r\nexport * from \"./imodel-components-react/quantityformat/FormatUnitLabel\";\r\nexport * from \"./imodel-components-react/quantityformat/FormatUnits\";\r\nexport * from \"./imodel-components-react/quantityformat/MiscFormatOptions\";\r\nexport * from \"./imodel-components-react/quantityformat/QuantityFormatPanel\";\r\n\r\nexport * from \"./imodel-components-react/timeline/interfaces\";\r\nexport * from \"./imodel-components-react/timeline/BaseTimelineDataProvider\";\r\nexport * from \"./imodel-components-react/timeline/InlineEdit\";\r\nexport * from \"./imodel-components-react/timeline/PlayerButton\";\r\nexport * from \"./imodel-components-react/timeline/Scrubber\";\r\nexport * from \"./imodel-components-react/timeline/TimelineComponent\";\r\nexport * from \"./imodel-components-react/timeline/SolarTimeline\";\r\nexport * from \"./imodel-components-react/timeline/BaseSolarDataProvider\";\r\n\r\nexport * from \"./imodel-components-react/viewport/ViewportComponent\";\r\nexport * from \"./imodel-components-react/viewport/ViewportComponentEvents\";\r\n\r\n/** @docs-package-description\r\n * The imodel-components-react package contains React components that depend on the core-frontend, core-common or core-quantity packages.\r\n * The components pertain to Color, Cube, LineWeight, Navigation Aids, Quantity Inputs, Timeline and Viewport.\r\n * For more information, see [learning about imodel-components-react]($docs/learning/ui/imodel-components/index.md).\r\n */\r\n/**\r\n * @docs-group-description Color\r\n * Classes and components for working with and picking a Color.\r\n */\r\n/**\r\n * @docs-group-description Common\r\n * Common classes used across various UI components.\r\n */\r\n/**\r\n * @docs-group-description Cube\r\n * Component for 3D Cube.\r\n */\r\n/**\r\n * @docs-group-description Inputs\r\n * Input Components that format and parse input for IModelApps.\r\n */\r\n/**\r\n * @docs-group-description LineWeight\r\n * Classes and components for working with and picking a Line Weight.\r\n */\r\n/**\r\n * @docs-group-description NavigationAids\r\n * Classes and components for working with Navigation Aids.\r\n */\r\n/**\r\n * @docs-group-description PropertyEditors\r\n * Classes and components for working with Property Editors.\r\n */\r\n/**\r\n * @docs-group-description QuantityFormat\r\n * Classes and components for working with a Quantity Formats.\r\n */\r\n/**\r\n * @docs-group-description Timeline\r\n * Classes and components that provide a timeline\r\n */\r\n/**\r\n * @docs-group-description Viewport\r\n * Classes and components for working with a Viewport.\r\n */\r\n"]}
+{"version":3,"file":"imodel-components-react.js","sourceRoot":"","sources":["../../src/imodel-components-react.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAE/F,qEAAqE;AAErE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAElF,cAAc,6CAA6C,CAAC;AAC5D,cAAc,mDAAmD,CAAC;AAClE,cAAc,mDAAmD,CAAC;AAClE,cAAc,kDAAkD,CAAC;AACjE,cAAc,oDAAoD,CAAC;AACnE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,kDAAkD,CAAC;AACjE,cAAc,wCAAwC,CAAC;AAEvD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,gDAAgD,CAAC;AAE/D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sDAAsD,CAAC;AAErE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yDAAyD,CAAC;AAExE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,4DAA4D,CAAC;AAC3E,cAAc,+DAA+D,CAAC;AAE9E,cAAc,sDAAsD,CAAC;AACrE,cAAc,0DAA0D,CAAC;AACzE,cAAc,uDAAuD,CAAC;AACtE,cAAc,qDAAqD,CAAC;AACpE,cAAc,0DAA0D,CAAC;AACzE,cAAc,sDAAsD,CAAC;AACrE,cAAc,4DAA4D,CAAC;AAC3E,cAAc,8DAA8D,CAAC;AAE7E,cAAc,+CAA+C,CAAC;AAC9D,cAAc,6DAA6D,CAAC;AAC5E,cAAc,+CAA+C,CAAC;AAC9D,cAAc,iDAAiD,CAAC;AAChE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,sDAAsD,CAAC;AACrE,cAAc,kDAAkD,CAAC;AACjE,cAAc,0DAA0D,CAAC;AAEzE,cAAc,sDAAsD,CAAC;AACrE,cAAc,4DAA4D,CAAC;AAE3E;;;;GAIG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\n// cSpell:ignore iconpicker lineweight hocs datepicker quantityformat\n\nexport { UiIModelComponents } from \"./imodel-components-react/UiIModelComponents\";\n\nexport * from \"./imodel-components-react/color/AlphaSlider\";\nexport * from \"./imodel-components-react/color/ColorPickerButton\";\nexport * from \"./imodel-components-react/color/ColorPickerDialog\";\nexport * from \"./imodel-components-react/color/ColorPickerPopup\";\nexport * from \"./imodel-components-react/color/getCSSColorFromDef\";\nexport * from \"./imodel-components-react/color/HueSlider\";\nexport * from \"./imodel-components-react/color/SaturationPicker\";\nexport * from \"./imodel-components-react/color/Swatch\";\n\nexport * from \"./imodel-components-react/editors/ColorEditor\";\nexport * from \"./imodel-components-react/editors/WeightEditor\";\n\nexport * from \"./imodel-components-react/inputs/QuantityInput\";\nexport * from \"./imodel-components-react/inputs/QuantityNumberInput\";\n\nexport * from \"./imodel-components-react/lineweight/Swatch\";\nexport * from \"./imodel-components-react/lineweight/WeightPickerButton\";\n\nexport * from \"./imodel-components-react/navigationaids/Cube\";\nexport * from \"./imodel-components-react/navigationaids/CubeNavigationAid\";\nexport * from \"./imodel-components-react/navigationaids/DrawingNavigationAid\";\n\nexport * from \"./imodel-components-react/quantityformat/FormatPanel\";\nexport * from \"./imodel-components-react/quantityformat/FormatPrecision\";\nexport * from \"./imodel-components-react/quantityformat/FormatSample\";\nexport * from \"./imodel-components-react/quantityformat/FormatType\";\nexport * from \"./imodel-components-react/quantityformat/FormatUnitLabel\";\nexport * from \"./imodel-components-react/quantityformat/FormatUnits\";\nexport * from \"./imodel-components-react/quantityformat/MiscFormatOptions\";\nexport * from \"./imodel-components-react/quantityformat/QuantityFormatPanel\";\n\nexport * from \"./imodel-components-react/timeline/interfaces\";\nexport * from \"./imodel-components-react/timeline/BaseTimelineDataProvider\";\nexport * from \"./imodel-components-react/timeline/InlineEdit\";\nexport * from \"./imodel-components-react/timeline/PlayerButton\";\nexport * from \"./imodel-components-react/timeline/Scrubber\";\nexport * from \"./imodel-components-react/timeline/TimelineComponent\";\nexport * from \"./imodel-components-react/timeline/SolarTimeline\";\nexport * from \"./imodel-components-react/timeline/BaseSolarDataProvider\";\n\nexport * from \"./imodel-components-react/viewport/ViewportComponent\";\nexport * from \"./imodel-components-react/viewport/ViewportComponentEvents\";\n\n/** @docs-package-description\n * The imodel-components-react package contains React components that depend on the core-frontend, core-common or core-quantity packages.\n * The components pertain to Color, Cube, LineWeight, Navigation Aids, Quantity Inputs, Timeline and Viewport.\n * For more information, see [learning about imodel-components-react]($docs/learning/ui/imodel-components/index.md).\n */\n/**\n * @docs-group-description Color\n * Classes and components for working with and picking a Color.\n */\n/**\n * @docs-group-description Common\n * Common classes used across various UI components.\n */\n/**\n * @docs-group-description Cube\n * Component for 3D Cube.\n */\n/**\n * @docs-group-description Inputs\n * Input Components that format and parse input for IModelApps.\n */\n/**\n * @docs-group-description LineWeight\n * Classes and components for working with and picking a Line Weight.\n */\n/**\n * @docs-group-description NavigationAids\n * Classes and components for working with Navigation Aids.\n */\n/**\n * @docs-group-description PropertyEditors\n * Classes and components for working with Property Editors.\n */\n/**\n * @docs-group-description QuantityFormat\n * Classes and components for working with a Quantity Formats.\n */\n/**\n * @docs-group-description Timeline\n * Classes and components that provide a timeline\n */\n/**\n * @docs-group-description Viewport\n * Classes and components for working with a Viewport.\n */\n"]}

package/lib/public/locales/en/UiIModelComponents.json

@@ -1,139 +1,139 @@
-{
-  "timeline": {
-    "expand": "Expand",
-    "minimize": "Minimize",
-    "repeat": "Repeat",
-    "slow": "Speed: slow",
-    "medium": "Speed: medium",
-    "fast": "Speed: fast",
-    "play": "Play",
-    "pause": "Pause",
-    "backward": "Backward",
-    "forward": "Forward",
-    "step": "Step"
-  },
-  "solartimeline": {
-    "play": "Play",
-    "settings": "Settings",
-    "speed": "Speed",
-    "dateTime": "Set Date/Time"
-  },
-  "solarsettings": {
-    "shadowcolor": "Shadow Color"
-  },
-  "errors": {
-    "unable-to-parse-quantity": "Unable to parse string into quantity"
-  },
-  "cube": {
-    "front": "Front",
-    "back": "Back",
-    "top": "Top",
-    "bottom": "Bottom",
-    "left": "Left",
-    "right": "Right"
-  },
-  "drawing": {
-    "unrotate": "Un-Rotate",
-    "rotateStyle": "Toggle background-rotate"
-  },
-  "color": {
-    "close": "Close",
-    "hue": "Hue",
-    "saturation": "Saturation",
-    "toggleColorPopup": "Toggle Color Picker Popup",
-    "transparency": "Transparency"
-  },
-  "QuantityInput": {
-    "ParseError": "Parse Error, status=",
-    "NoParserDefined": "No Parser Defined!"
-  },
-  "QuantityFormat": {
-    "none": "None",
-    "dash": "Dash",
-    "space": "Space",
-    "decimal": "Decimal",
-    "scientific": "Scientific",
-    "station": "Station",
-    "fractional": "Fractional",
-    "labels": {
-      "compositeSpacer": "Composite Spacer",
-      "formatted": "Formatted",
-      "precision": "Precision",
-      "type": "Type",
-      "appendUnitLabel": "Append Unit Label",
-      "labelSeparator": "Label Separator",
-      "signOptionLabel": "Sign Option",
-      "stationOffsetLabel": "Station Offset",
-      "stationSeparatorLabel": "Station Separator",
-      "decimalSeparatorLabel": "Decimal Separator",
-      "showTrailZerosLabel": "Show Trail Zeros",
-      "keepSingleZeroLabel": "Keep Single Zero",
-      "zeroEmptyLabel": "Zero Empty",
-      "moreLabel": "More",
-      "lessLabel": "Less",
-      "keepDecimalPointLabel": "Keep Decimal Point",
-      "fractionDashLabel": "Fraction Dash",
-      "scientificTypeLabel": "Scientific Type",
-      "useThousandSeparatorLabel": "Use Thousand Separator",
-      "thousandSeparatorLabel": "Thousand Separator",
-      "value": "Value"
-    },
-    "fraction_precision": {
-      "whole": "Whole",
-      "half": "1/2",
-      "quarter": "1/4",
-      "eighth": "1/8",
-      "sixteenth": "1/16",
-      "over32": "1/32",
-      "over64": "1/64",
-      "over128": "1/128",
-      "over256": "1/256"
-    },
-    "station_size": {
-      "two": "0+00",
-      "three": "0+000"
-    },
-    "station_separator": {
-      "plus": "+",
-      "minus": "-",
-      "blank": "Blank",
-      "caret": "^"
-    },
-    "decimal_precision": {
-      "zero": "1",
-      "one": "0.1",
-      "two": "0.01",
-      "three": "0.001",
-      "four": "0.0001",
-      "five": "0.00001",
-      "six": "0.0000001",
-      "seven": "0.0000001",
-      "eight": "0.00000001",
-      "nine": "0.000000001",
-      "ten": "0.0000000001",
-      "eleven": "0.00000000001",
-      "twelve": "0.000000000001"
-    },
-    "sign_option": {
-      "noSign": "No Sign",
-      "onlyNegative": "Only Negative",
-      "signAlways": "Always",
-      "negativeParentheses": "Negative Parentheses"
-    },
-    "thousand_separator": {
-      "comma": "Comma",
-      "point": "Point"
-    },
-    "decimal_separator": {
-      "comma": "Comma",
-      "point": "Point"
-    },
-    "scientific-type": {
-      "normalized": "Normalized",
-      "zero-normalized": "Zero Normalized"
-    },
-    "popupButton": {
-      "setFormat": "Set Format"
-    }
-  }
-}
+{
+  "timeline": {
+    "expand": "Expand",
+    "minimize": "Minimize",
+    "repeat": "Repeat",
+    "slow": "Speed: slow",
+    "medium": "Speed: medium",
+    "fast": "Speed: fast",
+    "play": "Play",
+    "pause": "Pause",
+    "backward": "Backward",
+    "forward": "Forward",
+    "step": "Step"
+  },
+  "solartimeline": {
+    "play": "Play",
+    "settings": "Settings",
+    "speed": "Speed",
+    "dateTime": "Set Date/Time"
+  },
+  "solarsettings": {
+    "shadowcolor": "Shadow Color"
+  },
+  "errors": {
+    "unable-to-parse-quantity": "Unable to parse string into quantity"
+  },
+  "cube": {
+    "front": "Front",
+    "back": "Back",
+    "top": "Top",
+    "bottom": "Bottom",
+    "left": "Left",
+    "right": "Right"
+  },
+  "drawing": {
+    "unrotate": "Un-Rotate",
+    "rotateStyle": "Toggle background-rotate"
+  },
+  "color": {
+    "close": "Close",
+    "hue": "Hue",
+    "saturation": "Saturation",
+    "toggleColorPopup": "Toggle Color Picker Popup",
+    "transparency": "Transparency"
+  },
+  "QuantityInput": {
+    "ParseError": "Parse Error, status=",
+    "NoParserDefined": "No Parser Defined!"
+  },
+  "QuantityFormat": {
+    "none": "None",
+    "dash": "Dash",
+    "space": "Space",
+    "decimal": "Decimal",
+    "scientific": "Scientific",
+    "station": "Station",
+    "fractional": "Fractional",
+    "labels": {
+      "compositeSpacer": "Composite Spacer",
+      "formatted": "Formatted",
+      "precision": "Precision",
+      "type": "Type",
+      "appendUnitLabel": "Append Unit Label",
+      "labelSeparator": "Label Separator",
+      "signOptionLabel": "Sign Option",
+      "stationOffsetLabel": "Station Offset",
+      "stationSeparatorLabel": "Station Separator",
+      "decimalSeparatorLabel": "Decimal Separator",
+      "showTrailZerosLabel": "Show Trail Zeros",
+      "keepSingleZeroLabel": "Keep Single Zero",
+      "zeroEmptyLabel": "Zero Empty",
+      "moreLabel": "More",
+      "lessLabel": "Less",
+      "keepDecimalPointLabel": "Keep Decimal Point",
+      "fractionDashLabel": "Fraction Dash",
+      "scientificTypeLabel": "Scientific Type",
+      "useThousandSeparatorLabel": "Use Thousand Separator",
+      "thousandSeparatorLabel": "Thousand Separator",
+      "value": "Value"
+    },
+    "fraction_precision": {
+      "whole": "Whole",
+      "half": "1/2",
+      "quarter": "1/4",
+      "eighth": "1/8",
+      "sixteenth": "1/16",
+      "over32": "1/32",
+      "over64": "1/64",
+      "over128": "1/128",
+      "over256": "1/256"
+    },
+    "station_size": {
+      "two": "0+00",
+      "three": "0+000"
+    },
+    "station_separator": {
+      "plus": "+",
+      "minus": "-",
+      "blank": "Blank",
+      "caret": "^"
+    },
+    "decimal_precision": {
+      "zero": "1",
+      "one": "0.1",
+      "two": "0.01",
+      "three": "0.001",
+      "four": "0.0001",
+      "five": "0.00001",
+      "six": "0.0000001",
+      "seven": "0.0000001",
+      "eight": "0.00000001",
+      "nine": "0.000000001",
+      "ten": "0.0000000001",
+      "eleven": "0.00000000001",
+      "twelve": "0.000000000001"
+    },
+    "sign_option": {
+      "noSign": "No Sign",
+      "onlyNegative": "Only Negative",
+      "signAlways": "Always",
+      "negativeParentheses": "Negative Parentheses"
+    },
+    "thousand_separator": {
+      "comma": "Comma",
+      "point": "Point"
+    },
+    "decimal_separator": {
+      "comma": "Comma",
+      "point": "Point"
+    },
+    "scientific-type": {
+      "normalized": "Normalized",
+      "zero-normalized": "Zero Normalized"
+    },
+    "popupButton": {
+      "setFormat": "Set Format"
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/imodel-components-react",
-  "version": "4.0.0-dev.15",
+  "version": "4.0.0-dev.16",
   "description": "iTwin.js UI IModel Components",
   "main": "lib/cjs/imodel-components-react.js",
   "module": "lib/esm/imodel-components-react.js",
@@ -23,13 +23,13 @@
   },
   "peerDependencies": {
     "@itwin/appui-abstract": ">=3.7.0",
-    "@itwin/components-react": "^4.0.0-dev.15",
+    "@itwin/components-react": "^4.0.0-dev.16",
     "@itwin/core-bentley": ">=3.7.0",
     "@itwin/core-common": ">=3.7.0",
     "@itwin/core-frontend": ">=3.7.0",
     "@itwin/core-geometry": ">=3.7.0",
     "@itwin/core-quantity": ">=3.7.0",
-    "@itwin/core-react": "^4.0.0-dev.15",
+    "@itwin/core-react": "^4.0.0-dev.16",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
@@ -40,14 +40,14 @@
   "devDependencies": {
     "@itwin/appui-abstract": "^3.7.0",
     "@itwin/build-tools": "^3.7.0",
-    "@itwin/components-react": "4.0.0-dev.15",
+    "@itwin/components-react": "4.0.0-dev.16",
     "@itwin/core-bentley": "^3.7.0",
     "@itwin/core-common": "^3.7.0",
     "@itwin/core-frontend": "^3.7.0",
     "@itwin/core-geometry": "^3.7.0",
     "@itwin/core-orbitgt": "^3.7.0",
     "@itwin/core-quantity": "^3.7.0",
-    "@itwin/core-react": "4.0.0-dev.15",
+    "@itwin/core-react": "4.0.0-dev.16",
     "@itwin/eslint-plugin": "^3.7.0",
     "@itwin/webgl-compatibility": "^3.7.0",
     "@testing-library/dom": "^8.11.2",

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

@@ -1,22 +0,0 @@
-/** @packageDocumentation
- * @module Color
- */
-/// <reference types="react" />
-import { ColorDef } from "@itwin/core-common";
-import "./ColorPickerPanel.scss";
-/** Properties for the [[ColorPickerPanel]] React component
- * @public @deprecated in 3.0. Use `ColorPicker` for itwinui-react
- */
-export interface ColorPickerPanelProps {
-    activeColor: ColorDef;
-    onColorChange: (selectedColor: ColorDef) => void;
-    colorPresets?: ColorDef[];
-    /** If set show either HSL or RGB input values. If undefined no input value is shown */
-    colorInputType?: "HSL" | "RGB";
-}
-/**
- * Color Picker Dialog to use as modal dialog.
- * @public @deprecated in 3.0. Use `ColorPicker` for itwinui-react
- */
-export declare function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps): JSX.Element;
-//# sourceMappingURL=ColorPickerPanel.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerPanel.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAKH,OAAO,EAAE,QAAQ,EAAY,MAAM,oBAAoB,CAAC;AAIxD,OAAO,yBAAyB,CAAC;AAGjC;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,QAAQ,CAAC;IACtB,aAAa,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;IACjD,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,uFAAuF;IACvF,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CAChC;AAED;;;GAGG;AAEH,wBAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,qBAAqB,eAsInH"}

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

@@ -1,150 +0,0 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Color
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPickerPanel = void 0;
-// cSpell:ignore colorpicker
-const React = __importStar(require("react"));
-const core_common_1 = require("@itwin/core-common");
-const Swatch_1 = require("./Swatch");
-const HueSlider_1 = require("./HueSlider");
-const SaturationPicker_1 = require("./SaturationPicker");
-require("./ColorPickerPanel.scss");
-const core_react_1 = require("@itwin/core-react");
-/**
- * Color Picker Dialog to use as modal dialog.
- * @public @deprecated in 3.0. Use `ColorPicker` for itwinui-react
- */
-// istanbul ignore next
-function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }) {
-    const handlePresetColorPick = React.useCallback((newColor, e) => {
-        e.preventDefault();
-        if (onColorChange) {
-            onColorChange(newColor);
-        }
-    }, [onColorChange]);
-    const handleHueChange = React.useCallback((newHsvColor) => {
-        // for a ColorDef to be created from hsv s can't be 0
-        if (newHsvColor.s === 0) {
-            newHsvColor = newHsvColor.clone(undefined, 0.5);
-        }
-        const newColorDef = newHsvColor.toColorDef();
-        if (onColorChange) {
-            onColorChange(newColorDef);
-        }
-    }, [onColorChange]);
-    const handleSaturationChange = React.useCallback((newHsvColor) => {
-        const newColorDef = newHsvColor.toColorDef();
-        if (onColorChange) {
-            onColorChange(newColorDef);
-        }
-    }, [onColorChange]);
-    const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);
-    const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);
-    const color = React.useMemo(() => activeColor.colors, [activeColor]);
-    const handleLightnessValueChange = React.useCallback((value, _stringValue) => {
-        const newHsl = currentHsl.clone(undefined, undefined, (value ?? 0) / 100);
-        if (onColorChange) {
-            const newColorDef = newHsl.toColorDef();
-            onColorChange(newColorDef);
-        }
-    }, [currentHsl, onColorChange]);
-    const handleHueValueChange = React.useCallback((value, _stringValue) => {
-        const newHsl = currentHsl.clone((value ?? 0) / 360, undefined, undefined);
-        if (onColorChange) {
-            const newColorDef = newHsl.toColorDef();
-            onColorChange(newColorDef);
-        }
-    }, [currentHsl, onColorChange]);
-    const handleSaturationValueChange = React.useCallback((value, _stringValue) => {
-        const newHsl = currentHsl.clone(undefined, (value ?? 0) / 100, undefined);
-        if (onColorChange) {
-            const newColorDef = newHsl.toColorDef();
-            onColorChange(newColorDef);
-        }
-    }, [currentHsl, onColorChange]);
-    const handleRedChange = React.useCallback((value, _stringValue) => {
-        if (undefined !== value) {
-            const newColorDef = core_common_1.ColorDef.from(value, color.g, color.b);
-            if (onColorChange) {
-                onColorChange(newColorDef);
-            }
-        }
-    }, [color, onColorChange]);
-    const handleGreenChange = React.useCallback((value, _stringValue) => {
-        if (undefined !== value) {
-            const newColorDef = core_common_1.ColorDef.from(color.r, value, color.b);
-            if (onColorChange) {
-                onColorChange(newColorDef);
-            }
-        }
-    }, [color, onColorChange]);
-    const handleBlueChange = React.useCallback((value, _stringValue) => {
-        if (undefined !== value) {
-            const newColorDef = core_common_1.ColorDef.from(color.r, color.g, value);
-            if (onColorChange) {
-                onColorChange(newColorDef);
-            }
-        }
-    }, [color, onColorChange]);
-    return (React.createElement("div", { "data-testid": "components-colorpicker-panel", className: "components-colorpicker-panel" },
-        React.createElement("div", { className: "components-colorpicker-panel-color" },
-            React.createElement("div", { className: "components-colorpicker-saturation" },
-                React.createElement(SaturationPicker_1.SaturationPicker, { hsv: currentHsv, onSaturationChange: handleSaturationChange })),
-            React.createElement("div", { className: "components-colorpicker-hue" },
-                React.createElement(HueSlider_1.HueSlider, { hsv: currentHsv, onHueChange: handleHueChange, isHorizontal: false }))),
-        (colorInputType === "RGB") &&
-            React.createElement("div", { "data-testid": "components-colorpicker-input-panel", className: "components-colorpicker-input-panel" },
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "R"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-red", value: color.r, onChange: handleRedChange, min: 0, max: 255 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "G"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-green", value: color.g, onChange: handleGreenChange, min: 0, max: 255 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "B"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-blue", value: color.b, onChange: handleBlueChange, min: 0, max: 255 }))),
-        (colorInputType === "HSL") &&
-            React.createElement("div", { "data-testid": "components-colorpicker-input-panel", className: "components-colorpicker-input-panel" },
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "H"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-hue", value: Math.round(currentHsl.h * 360), onChange: handleHueValueChange, min: 0, max: 360 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "S"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-saturation", value: Math.round(currentHsl.s * 100), onChange: handleSaturationValueChange, min: 0, max: 100 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "L"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-lightness", value: Math.round(currentHsl.l * 100), onChange: handleLightnessValueChange, min: 0, max: 100 }))),
-        colorPresets && colorPresets.length &&
-            React.createElement("div", { className: "components-colorpicker-panel-presets" }, colorPresets.map((preset, index) => React.createElement(Swatch_1.ColorSwatch, { className: "components-colorpicker-panel-swatch", key: index, colorDef: preset, round: false, onColorPick: handlePresetColorPick })))));
-}
-exports.ColorPickerPanel = ColorPickerPanel;
-//# sourceMappingURL=ColorPickerPanel.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.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 Color\r\n */\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nimport * as React from \"react\";\r\nimport { ColorDef, HSVColor } from \"@itwin/core-common\";\r\nimport { ColorSwatch } from \"./Swatch\";\r\nimport { HueSlider } from \"./HueSlider\";\r\nimport { SaturationPicker } from \"./SaturationPicker\";\r\nimport \"./ColorPickerPanel.scss\";\r\nimport { NumberInput } from \"@itwin/core-react\";\r\n\r\n/** Properties for the [[ColorPickerPanel]] React component\r\n * @public @deprecated in 3.0. Use `ColorPicker` for itwinui-react\r\n */\r\nexport interface ColorPickerPanelProps {\r\n  activeColor: ColorDef;\r\n  onColorChange: (selectedColor: ColorDef) => void;\r\n  colorPresets?: ColorDef[];\r\n  /** If set show either HSL or RGB input values. If undefined no input value is shown */\r\n  colorInputType?: \"HSL\" | \"RGB\";\r\n}\r\n\r\n/**\r\n * Color Picker Dialog to use as modal dialog.\r\n * @public @deprecated in 3.0. Use `ColorPicker` for itwinui-react\r\n */\r\n// istanbul ignore next\r\nexport function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps) { // eslint-disable-line deprecation/deprecation\r\n  const handlePresetColorPick = React.useCallback((newColor: ColorDef, e: React.MouseEvent<Element, MouseEvent>) => {\r\n    e.preventDefault();\r\n    if (onColorChange) {\r\n      onColorChange(newColor);\r\n    }\r\n  }, [onColorChange]);\r\n\r\n  const handleHueChange = React.useCallback((newHsvColor: HSVColor) => {\r\n    // for a ColorDef to be created from hsv s can't be 0\r\n    if (newHsvColor.s === 0) {\r\n      newHsvColor = newHsvColor.clone(undefined, 0.5);\r\n    }\r\n\r\n    const newColorDef = newHsvColor.toColorDef();\r\n    if (onColorChange) {\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [onColorChange]);\r\n\r\n  const handleSaturationChange = React.useCallback((newHsvColor: HSVColor) => {\r\n    const newColorDef = newHsvColor.toColorDef();\r\n    if (onColorChange) {\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [onColorChange]);\r\n\r\n  const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);\r\n  const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);\r\n  const color = React.useMemo(() => activeColor.colors, [activeColor]);\r\n\r\n  const handleLightnessValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    const newHsl = currentHsl.clone(undefined, undefined, (value ?? 0) / 100);\r\n\r\n    if (onColorChange) {\r\n      const newColorDef = newHsl.toColorDef();\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [currentHsl, onColorChange]);\r\n\r\n  const handleHueValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    const newHsl = currentHsl.clone((value ?? 0) / 360, undefined, undefined);\r\n\r\n    if (onColorChange) {\r\n      const newColorDef = newHsl.toColorDef();\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [currentHsl, onColorChange]);\r\n\r\n  const handleSaturationValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    const newHsl = currentHsl.clone(undefined, (value ?? 0) / 100, undefined);\r\n\r\n    if (onColorChange) {\r\n      const newColorDef = newHsl.toColorDef();\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [currentHsl, onColorChange]);\r\n\r\n  const handleRedChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    if (undefined !== value) {\r\n      const newColorDef = ColorDef.from(value, color.g, color.b);\r\n      if (onColorChange) {\r\n        onColorChange(newColorDef);\r\n      }\r\n    }\r\n  }, [color, onColorChange]);\r\n\r\n  const handleGreenChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    if (undefined !== value) {\r\n      const newColorDef = ColorDef.from(color.r, value, color.b);\r\n      if (onColorChange) {\r\n        onColorChange(newColorDef);\r\n      }\r\n    }\r\n  }, [color, onColorChange]);\r\n\r\n  const handleBlueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    if (undefined !== value) {\r\n      const newColorDef = ColorDef.from(color.r, color.g, value);\r\n      if (onColorChange) {\r\n        onColorChange(newColorDef);\r\n      }\r\n    }\r\n  }, [color, onColorChange]);\r\n\r\n  return (\r\n    <div data-testid=\"components-colorpicker-panel\" className=\"components-colorpicker-panel\">\r\n      <div className=\"components-colorpicker-panel-color\">\r\n        <div className=\"components-colorpicker-saturation\">\r\n          <SaturationPicker hsv={currentHsv} onSaturationChange={handleSaturationChange} />\r\n        </div>\r\n        <div className=\"components-colorpicker-hue\">\r\n          <HueSlider hsv={currentHsv} onHueChange={handleHueChange} isHorizontal={false} />\r\n        </div>\r\n      </div>\r\n      {(colorInputType === \"RGB\") &&\r\n        <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">R</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-red\" value={color.r} onChange={handleRedChange} min={0} max={255} />\r\n          </div>\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">G</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-green\" value={color.g} onChange={handleGreenChange} min={0} max={255} />\r\n          </div>\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">B</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-blue\" value={color.b} onChange={handleBlueChange} min={0} max={255} />\r\n          </div>\r\n        </div>}\r\n      {(colorInputType === \"HSL\") &&\r\n        <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">H</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-hue\" value={Math.round(currentHsl.h * 360)} onChange={handleHueValueChange} min={0} max={360} />\r\n          </div>\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">S</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-saturation\" value={Math.round(currentHsl.s * 100)} onChange={handleSaturationValueChange} min={0} max={100} />\r\n          </div>\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">L</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-lightness\" value={Math.round(currentHsl.l * 100)} onChange={handleLightnessValueChange} min={0} max={100} />\r\n          </div>\r\n        </div>}\r\n\r\n      {\r\n        colorPresets && colorPresets.length &&\r\n        <div className=\"components-colorpicker-panel-presets\">\r\n          {colorPresets.map((preset, index) => <ColorSwatch className=\"components-colorpicker-panel-swatch\" key={index} colorDef={preset} round={false} onColorPick={handlePresetColorPick} />)}\r\n        </div>\r\n      }\r\n    </div>\r\n  );\r\n}\r\n"]}