npm - @itwin/imodel-components-react - Versions diffs - 4.0.0-dev.8 → 4.0.0-dev.9 - Mend

@itwin/imodel-components-react 4.0.0-dev.8 → 4.0.0-dev.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (60) hide show

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

@@ -10,11 +10,16 @@ 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-image: linear-gradient(
+      to bottom,
+      $buic-background-3,
+      $buic-background-3
+    ),
+    linear-gradient(to bottom, $buic-background-1, $buic-background-1);
   box-sizing: border-box;
   width: 38px;
   height: 20px;
-  border-radius: 4px;
+  border-radius: var(--iui-border-radius-1);
   border: 1px solid $buic-background-5;
   transform: translateX(-19.2px);
   top: 4px;
@@ -64,14 +69,14 @@ 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;
@@ -101,7 +106,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;
-}
+}

package/lib/cjs/imodel-components-react/timeline/SolarTimeline.scss CHANGED Viewed

@@ -7,7 +7,7 @@
 $top-position: 6px;
 $bottom-position: 4px;
-.solar-slider.solar-timeline>.iui-slider-container {
+.solar-slider.solar-timeline > .iui-slider-container {
   height: 28px;
 }
@@ -22,12 +22,12 @@ $bottom-position: 4px;
   color: $buic-foreground-body;
   font-size: 14px;
-  >.header {
+  > .header {
     display: flex;
     align-items: center;
     position: relative;
-    >.play-button {
+    > .play-button {
       width: 26px;
       height: 26px;
       background: inherit;
@@ -35,7 +35,7 @@ $bottom-position: 4px;
       font-size: 20px;
     }
-    >.shadow-settings-button {
+    > .shadow-settings-button {
       display: flex;
       align-items: center;
       color: $buic-foreground-body;
@@ -56,7 +56,7 @@ $bottom-position: 4px;
       }
     }
-    >.current-date {
+    > .current-date {
       min-width: 175px;
       margin-left: 8px;
       margin-right: 4px;
@@ -69,32 +69,32 @@ $bottom-position: 4px;
       font-size: 14px;
       cursor: pointer;
-      >span:nth-child(2) {
+      > span:nth-child(2) {
         margin: 0 6px;
       }
-      >.icon-calendar {
+      > .icon-calendar {
         flex-grow: 1;
         margin-left: auto;
       }
     }
-    >.speed-container {
+    > .speed-container {
       display: flex;
       align-items: center;
       margin-left: auto;
       cursor: pointer;
-      >.speed {
+      > .speed {
         margin-left: 12px;
         width: 0;
         opacity: 0;
-        transition: all .2s linear;
+        transition: all 0.2s linear;
         margin-right: 10px;
       }
     }
-    >.loop-playback {
+    > .loop-playback {
       color: $buic-foreground-primary;
       font-size: 16px;
       cursor: pointer;
@@ -108,7 +108,7 @@ $bottom-position: 4px;
       }
     }
-    >.no-loop-playback {
+    > .no-loop-playback {
       color: $buic-foreground-body;
       font-size: 16px;
       cursor: pointer;
@@ -172,9 +172,14 @@ $bottom-position: 4px;
       z-index: 4;
       width: 38px;
       height: 20px;
-      border-radius: 3px;
+      border-radius: var(--iui-border-radius-1);
       border: 1px solid $buic-background-5;
-      background-image: linear-gradient(to bottom, $buic-background-3, $buic-background-3), linear-gradient(to bottom, $buic-background-1, $buic-background-1);
+      background-image: linear-gradient(
+          to bottom,
+          $buic-background-3,
+          $buic-background-3
+        ),
+        linear-gradient(to bottom, $buic-background-1, $buic-background-1);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -182,7 +187,7 @@ $bottom-position: 4px;
       transform: translate(-50%, -50%);
       cursor: pointer;
-      >div {
+      > div {
         width: 1px;
         height: 10px;
         opacity: 0.25;
@@ -220,11 +225,10 @@ $bottom-position: 4px;
       color: #ffcf00;
       margin: 0 24px 0 8px;
     }
   }
 }
-.solar-timeline-wrapper>.header>.speed-container:hover>.speed {
+.solar-timeline-wrapper > .header > .speed-container:hover > .speed {
   opacity: 1;
   width: 80px;
 }
@@ -233,7 +237,7 @@ $bottom-position: 4px;
   transform: rotate(180deg);
 }
-.solar-timeline-wrapper.expanded>.header>.current-date {
+.solar-timeline-wrapper.expanded > .header > .current-date {
   margin-left: 70px;
 }
@@ -250,8 +254,6 @@ $bottom-position: 4px;
   height: 100px;
 }
 .shadow-settings-color-top {
   display: inline;
 }
@@ -352,7 +354,3 @@ $bottom-position: 4px;
     border-color: #222 transparent transparent transparent;
   }
 }
-.core-tooltip-tooltip.components-rail-tooltip {
-  pointer-events: none;
-}

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

@@ -14,27 +14,27 @@
   padding: 8px 16px;
   min-width: 275px;
-  >.header {
+  > .header {
     display: flex;
     align-items: center;
     height: 38px;
     position: relative;
-    >.play-backward {
-      border-radius: 3px 0 0 3px;
+    > .play-backward {
+      border-radius: var(--iui-border-radius-1) 0 0 var(--iui-border-radius-1);
     }
-    >.play-button-step {
+    > .play-button-step {
       border-left: none;
       border-right: none;
       border-radius: 0;
     }
-    >.play-forward {
-      border-radius: 0px 3px 3px 0;
+    > .play-forward {
+      border-radius: 0px var(--iui-border-radius-1) var(--iui-border-radius-1) 0;
     }
-    >.current-date {
+    > .current-date {
       font-size: 14px;
       min-width: 180px;
       padding: 8px;
@@ -42,7 +42,7 @@
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      border-radius: 3px;
+      border-radius: var(--iui-border-radius-1);
       border: solid 1px $buic-background-5;
       background-color: $buic-background-1;
       text-align: center;
@@ -57,11 +57,11 @@
     margin-right: 10px;
   }
-  >.timeline-timeline {
+  > .timeline-timeline {
     margin: 8px 0;
   }
-  >.scrubber {
+  > .scrubber {
     min-height: 20px;
     display: flex;
     align-items: center;
@@ -128,11 +128,11 @@
 }
 .timeline-component.has-dates .start-time-container {
-  margin-right: 8px
+  margin-right: 8px;
 }
 .timeline-component.has-dates .end-time-container {
-  margin-left: 8px
+  margin-left: 8px;
 }
 .timeline-component.minimized .header,
@@ -147,11 +147,11 @@
 }
 .separator {
-  padding: .5em 0;
+  padding: 0.5em 0;
   position: relative;
   &:before {
-    content: '';
+    content: "";
     position: absolute;
     top: 50%;
     left: 4px;
@@ -161,4 +161,4 @@
     background: #dce0e3;
     transform: translateY(-50%);
   }
-}
+}

package/lib/cjs/imodel-components-react/timeline/interfaces.d.ts CHANGED Viewed

@@ -15,7 +15,7 @@ export interface MilestoneRange {
 /**
  * A Milestone event that is to be noted in the timeline.
  * @internal
- * @deprecated in 3.0.
+ * @deprecated
  */
 export interface Milestone {
     /** uniqueId of milestone */

package/lib/cjs/imodel-components-react/timeline/interfaces.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/interfaces.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAsCH;;GAEG;AACH,IAAY,aAWX;AAXD,WAAY,aAAa;IACvB,iBAAiB;IACjB,mDAAK,CAAA;IACL,oBAAoB;IACpB,yDAAQ,CAAA;IACR,kBAAkB;IAClB,qDAAM,CAAA;IACN,gBAAgB;IAChB,iDAAI,CAAA;IACJ,iBAAiB;IACjB,mDAAK,CAAA;AACP,CAAC,EAXW,aAAa,GAAb,qBAAa,KAAb,qBAAa,QAWxB;AAED;;GAEG;AACH,IAAY,mBAKX;AALD,WAAY,mBAAmB;IAC7B,qDAAqD;IACrD,yEAAU,CAAA;IACV,sEAAsE;IACtE,2EAAW,CAAA;AACb,CAAC,EALW,mBAAmB,GAAnB,2BAAmB,KAAnB,2BAAmB,QAK9B;AAoCD;;GAEG;AACH,IAAY,uBAIX;AAJD,WAAY,uBAAuB;IACjC,yEAAM,CAAA;IACN,uEAAK,CAAA;IACL,qEAAI,CAAA;AACN,CAAC,EAJW,uBAAuB,GAAvB,+BAAuB,KAAvB,+BAAuB,QAIlC","sourcesContent":["/---------------------------------------------------------------------------------------------\r\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n--------------------------------------------------------------------------------------------/\r\n/** @packageDocumentation\r\n * @module Timeline\r\n /\r\n\r\nimport { ColorDef } from \"@itwin/core-common\";\r\nimport { ScreenViewport } from \"@itwin/core-frontend\";\r\nimport { GenericUiEventArgs } from \"@itwin/appui-abstract\";\r\n\r\n/\r\n A range of time which can be used to focus in on activities scheduled around a milestone.\r\n * @public\r\n /\r\nexport interface MilestoneRange {\r\n start: Date;\r\n end: Date;\r\n}\r\n\r\n/\r\n A Milestone event that is to be noted in the timeline.\r\n * @internal\r\n * @deprecated ~~in 3.0.\~~r\n /\r\nexport interface Milestone {\r\n /* uniqueId of milestone /\r\n id: string;\r\n /* milestone date /\r\n date: Date;\r\n parentId?: string;\r\n /* Milestone label that is display if space allows /\r\n label?: string;\r\n /* Milestone description that is show as tooltip /\r\n description?: string;\r\n /* animation range that includes milestone /\r\n range?: MilestoneRange;\r\n /* Set to true if read only. /\r\n readonly?: boolean;\r\n // eslint-disable-next-line deprecation/deprecation\r\n children?: Milestone[];\r\n}\r\n\r\n/* The timeline scale.\r\n * @public\r\n /\r\nexport enum TimelineScale {\r\n /* Show years /\r\n Years,\r\n /* Show quarters /\r\n Quarters,\r\n /* Show months /\r\n Months,\r\n /* Show days /\r\n Days,\r\n /* Show hours /\r\n Hours,\r\n}\r\n\r\n/* Determines if data displayed to use is the actual date or the amount of time elapsed since project start.\r\n * @public\r\n /\r\nexport enum TimelineDateDisplay {\r\n /* Display time axis using actual start/end dates /\r\n ActualTime,\r\n /* Display time axis using time relative to actual start/end dates /\r\n ProjectTime,\r\n}\r\n\r\n/\r\n Playback Settings.\r\n * @public\r\n /\r\nexport interface PlaybackSettings {\r\n /* time in milliseconds to play animation from start date to end date /\r\n duration?: number;\r\n /* Set to True if animation to restart each time playbackEnd is reached. Defaults to false. /\r\n loop?: boolean;\r\n /* If true a minimal set of data is displayed. /\r\n minimized?: boolean;\r\n /* Playback start. If defined must be within start-end range. If not define 'start' is used. /\r\n playbackStart?: Date;\r\n /* Playback end. If defined must be within start-end range and later than playbackStart. If not define 'end' is used. /\r\n playbackEnd?: Date;\r\n /* Set to True if user should be allowed to insert milestone dates. Defaults to false /\r\n allowMilestoneEdits?: boolean;\r\n /* Define if actual date/times are used or date/times relative to project are used to draw timeline axis. /\r\n dateDisplay?: TimelineDateDisplay;\r\n}\r\n\r\n/\r\n An interface used to notify Handlers of the current pointer position in the timeline playback. Valid range is 0 to 1 and it determines percentage complete.\r\n * @public\r\n /\r\nexport type AnimationFractionChangeHandler = (animationFraction: number) => void;\r\n\r\n/\r\n An interface used to notify Handlers of Playback Settings changes.\r\n * Contains the settings to be used.\r\n * @public\r\n /\r\nexport type PlaybackSettingsChangeHandler = (settingsChange: PlaybackSettings) => void;\r\n\r\n/* Actions for Pause/Play event\r\n * @public\r\n /\r\nexport enum TimelinePausePlayAction {\r\n Toggle,\r\n Pause,\r\n Play,\r\n}\r\n/* Args for event to pause or play the timeline component\r\n * @public\r\n /\r\nexport interface TimelinePausePlayArgs extends GenericUiEventArgs {\r\n timelineAction: TimelinePausePlayAction;\r\n}\r\n/* Interface for a timeline data provider class\r\n * @public\r\n /\r\nexport interface TimelineDataProvider {\r\n /* uniqueId of provider /\r\n id: string;\r\n /* view id when viewport is initially assigned /\r\n viewId: string;\r\n /* returns true if the provider has timeline animation data available /\r\n supportsTimelineAnimation: boolean;\r\n /* Starting date for entire timeline /\r\n start?: Date;\r\n /* End date for entire timeline /\r\n end?: Date;\r\n /* Current animation fraction from 0.0 to 1.0 /\r\n animationFraction?: number;\r\n getSettings(): PlaybackSettings;\r\n /* Called to get the initial scrubber location. This must be a value between 0 and the duration in PlaybackSettings. /\r\n initialDuration: number;\r\n /* Called to get the duration of the Playback. /\r\n duration: number;\r\n /* If true the playback will continuously loop. /\r\n loop: boolean;\r\n /* Called to save the playback settings /\r\n updateSettings(settings: PlaybackSettings): void;\r\n /* Async call to load milestone and settings data /\r\n loadTimelineData(): Promise<boolean>;\r\n /* Called when an internal process has defined the playback settings and the UI needs to be updated /\r\n onPlaybackSettingChanged?: PlaybackSettingsChangeHandler;\r\n /* Called when the an internal process has defined the playback settings and the UI needs to be updated /\r\n onAnimationFractionChanged?: AnimationFractionChangeHandler;\r\n /* viewport to show animation /\r\n viewport?: ScreenViewport;\r\n}\r\n\r\n/\r\n An interface used to notify Handlers of Playback progress.\r\n * Contains the settings to be used.\r\n * @alpha\r\n /\r\nexport type SolarPlaybackProgressHandler = (time: Date) => void;\r\n\r\n/* Data Provider interface for getting and setting solar position\r\n * @alpha\r\n /\r\nexport interface SolarDataProvider {\r\n // View Id used to determine sunrise and sunset\r\n viewId: string;\r\n /* returns true if the provider has timeline animation data available /\r\n supportsTimelineAnimation: boolean;\r\n // set to true is timeline should be shown - return false if view is not set to display shadow.\r\n readonly shouldShowTimeline: boolean;\r\n /* Starting date for entire timeline /\r\n day: Date;\r\n /* Starting time for day in milliseconds /\r\n readonly dayStartMs: number;\r\n /* Time of day for sun /\r\n readonly timeOfDay: Date;\r\n /* Called during playback to update animation /\r\n onTimeChanged?: SolarPlaybackProgressHandler;\r\n /* viewport to show animation /\r\n viewport?: ScreenViewport;\r\n /* Time of Sunrise to nearest minute /\r\n readonly sunrise: Date;\r\n /* time of Sunrise to nearest minute /\r\n readonly sunset: Date;\r\n /* shadow color /\r\n shadowColor: ColorDef;\r\n /* timezone offset for local project time /\r\n readonly timeZoneOffset: number;\r\n /* set date for shadow study. If isProjectDate is false the is assume to be in users\r\n * current time and the value is adjusted to be the same date and time at the project location. */\r\n setDateAndTime: (day: Date, isProjectDate?: boolean) => void;\r\n}\r\n"]}
1	+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/interfaces.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAsCH;;GAEG;AACH,IAAY,aAWX;AAXD,WAAY,aAAa;IACvB,iBAAiB;IACjB,mDAAK,CAAA;IACL,oBAAoB;IACpB,yDAAQ,CAAA;IACR,kBAAkB;IAClB,qDAAM,CAAA;IACN,gBAAgB;IAChB,iDAAI,CAAA;IACJ,iBAAiB;IACjB,mDAAK,CAAA;AACP,CAAC,EAXW,aAAa,GAAb,qBAAa,KAAb,qBAAa,QAWxB;AAED;;GAEG;AACH,IAAY,mBAKX;AALD,WAAY,mBAAmB;IAC7B,qDAAqD;IACrD,yEAAU,CAAA;IACV,sEAAsE;IACtE,2EAAW,CAAA;AACb,CAAC,EALW,mBAAmB,GAAnB,2BAAmB,KAAnB,2BAAmB,QAK9B;AAoCD;;GAEG;AACH,IAAY,uBAIX;AAJD,WAAY,uBAAuB;IACjC,yEAAM,CAAA;IACN,uEAAK,CAAA;IACL,qEAAI,CAAA;AACN,CAAC,EAJW,uBAAuB,GAAvB,+BAAuB,KAAvB,+BAAuB,QAIlC","sourcesContent":["/---------------------------------------------------------------------------------------------\r\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n--------------------------------------------------------------------------------------------/\r\n/** @packageDocumentation\r\n * @module Timeline\r\n /\r\n\r\nimport { ColorDef } from \"@itwin/core-common\";\r\nimport { ScreenViewport } from \"@itwin/core-frontend\";\r\nimport { GenericUiEventArgs } from \"@itwin/appui-abstract\";\r\n\r\n/\r\n A range of time which can be used to focus in on activities scheduled around a milestone.\r\n * @public\r\n /\r\nexport interface MilestoneRange {\r\n start: Date;\r\n end: Date;\r\n}\r\n\r\n/\r\n A Milestone event that is to be noted in the timeline.\r\n * @internal\r\n * @deprecated\r\n /\r\nexport interface Milestone {\r\n /* uniqueId of milestone /\r\n id: string;\r\n /* milestone date /\r\n date: Date;\r\n parentId?: string;\r\n /* Milestone label that is display if space allows /\r\n label?: string;\r\n /* Milestone description that is show as tooltip /\r\n description?: string;\r\n /* animation range that includes milestone /\r\n range?: MilestoneRange;\r\n /* Set to true if read only. /\r\n readonly?: boolean;\r\n // eslint-disable-next-line deprecation/deprecation\r\n children?: Milestone[];\r\n}\r\n\r\n/* The timeline scale.\r\n * @public\r\n /\r\nexport enum TimelineScale {\r\n /* Show years /\r\n Years,\r\n /* Show quarters /\r\n Quarters,\r\n /* Show months /\r\n Months,\r\n /* Show days /\r\n Days,\r\n /* Show hours /\r\n Hours,\r\n}\r\n\r\n/* Determines if data displayed to use is the actual date or the amount of time elapsed since project start.\r\n * @public\r\n /\r\nexport enum TimelineDateDisplay {\r\n /* Display time axis using actual start/end dates /\r\n ActualTime,\r\n /* Display time axis using time relative to actual start/end dates /\r\n ProjectTime,\r\n}\r\n\r\n/\r\n Playback Settings.\r\n * @public\r\n /\r\nexport interface PlaybackSettings {\r\n /* time in milliseconds to play animation from start date to end date /\r\n duration?: number;\r\n /* Set to True if animation to restart each time playbackEnd is reached. Defaults to false. /\r\n loop?: boolean;\r\n /* If true a minimal set of data is displayed. /\r\n minimized?: boolean;\r\n /* Playback start. If defined must be within start-end range. If not define 'start' is used. /\r\n playbackStart?: Date;\r\n /* Playback end. If defined must be within start-end range and later than playbackStart. If not define 'end' is used. /\r\n playbackEnd?: Date;\r\n /* Set to True if user should be allowed to insert milestone dates. Defaults to false /\r\n allowMilestoneEdits?: boolean;\r\n /* Define if actual date/times are used or date/times relative to project are used to draw timeline axis. /\r\n dateDisplay?: TimelineDateDisplay;\r\n}\r\n\r\n/\r\n An interface used to notify Handlers of the current pointer position in the timeline playback. Valid range is 0 to 1 and it determines percentage complete.\r\n * @public\r\n /\r\nexport type AnimationFractionChangeHandler = (animationFraction: number) => void;\r\n\r\n/\r\n An interface used to notify Handlers of Playback Settings changes.\r\n * Contains the settings to be used.\r\n * @public\r\n /\r\nexport type PlaybackSettingsChangeHandler = (settingsChange: PlaybackSettings) => void;\r\n\r\n/* Actions for Pause/Play event\r\n * @public\r\n /\r\nexport enum TimelinePausePlayAction {\r\n Toggle,\r\n Pause,\r\n Play,\r\n}\r\n/* Args for event to pause or play the timeline component\r\n * @public\r\n /\r\nexport interface TimelinePausePlayArgs extends GenericUiEventArgs {\r\n timelineAction: TimelinePausePlayAction;\r\n}\r\n/* Interface for a timeline data provider class\r\n * @public\r\n /\r\nexport interface TimelineDataProvider {\r\n /* uniqueId of provider /\r\n id: string;\r\n /* view id when viewport is initially assigned /\r\n viewId: string;\r\n /* returns true if the provider has timeline animation data available /\r\n supportsTimelineAnimation: boolean;\r\n /* Starting date for entire timeline /\r\n start?: Date;\r\n /* End date for entire timeline /\r\n end?: Date;\r\n /* Current animation fraction from 0.0 to 1.0 /\r\n animationFraction?: number;\r\n getSettings(): PlaybackSettings;\r\n /* Called to get the initial scrubber location. This must be a value between 0 and the duration in PlaybackSettings. /\r\n initialDuration: number;\r\n /* Called to get the duration of the Playback. /\r\n duration: number;\r\n /* If true the playback will continuously loop. /\r\n loop: boolean;\r\n /* Called to save the playback settings /\r\n updateSettings(settings: PlaybackSettings): void;\r\n /* Async call to load milestone and settings data /\r\n loadTimelineData(): Promise<boolean>;\r\n /* Called when an internal process has defined the playback settings and the UI needs to be updated /\r\n onPlaybackSettingChanged?: PlaybackSettingsChangeHandler;\r\n /* Called when the an internal process has defined the playback settings and the UI needs to be updated /\r\n onAnimationFractionChanged?: AnimationFractionChangeHandler;\r\n /* viewport to show animation /\r\n viewport?: ScreenViewport;\r\n}\r\n\r\n/\r\n An interface used to notify Handlers of Playback progress.\r\n * Contains the settings to be used.\r\n * @alpha\r\n /\r\nexport type SolarPlaybackProgressHandler = (time: Date) => void;\r\n\r\n/* Data Provider interface for getting and setting solar position\r\n * @alpha\r\n /\r\nexport interface SolarDataProvider {\r\n // View Id used to determine sunrise and sunset\r\n viewId: string;\r\n /* returns true if the provider has timeline animation data available /\r\n supportsTimelineAnimation: boolean;\r\n // set to true is timeline should be shown - return false if view is not set to display shadow.\r\n readonly shouldShowTimeline: boolean;\r\n /* Starting date for entire timeline /\r\n day: Date;\r\n /* Starting time for day in milliseconds /\r\n readonly dayStartMs: number;\r\n /* Time of day for sun /\r\n readonly timeOfDay: Date;\r\n /* Called during playback to update animation /\r\n onTimeChanged?: SolarPlaybackProgressHandler;\r\n /* viewport to show animation /\r\n viewport?: ScreenViewport;\r\n /* Time of Sunrise to nearest minute /\r\n readonly sunrise: Date;\r\n /* time of Sunrise to nearest minute /\r\n readonly sunset: Date;\r\n /* shadow color /\r\n shadowColor: ColorDef;\r\n /* timezone offset for local project time /\r\n readonly timeZoneOffset: number;\r\n /* set date for shadow study. If isProjectDate is false the is assume to be in users\r\n * current time and the value is adjusted to be the same date and time at the project location. */\r\n setDateAndTime: (day: Date, isProjectDate?: boolean) => void;\r\n}\r\n"]}

package/lib/esm/imodel-components-react/UiIModelComponents.d.ts CHANGED Viewed

@@ -19,7 +19,7 @@ export declare class UiIModelComponents {
     static get localizationNamespace(): string;
     /** @internal */
     static get packageName(): string;
-    /** Calls localization.getLocalizedString with the "UiIModelComponents" namespace. Do NOT include the namespace in the key.
+    /** Calls localization.getLocalizedStringWithNamespace with the "UiIModelComponents" namespace. Do NOT include the namespace in the key.
      * @internal
      */
     static translate(key: string | string[]): string;

package/lib/esm/imodel-components-react/UiIModelComponents.js CHANGED Viewed

@@ -55,7 +55,7 @@ export class UiIModelComponents {
     static get packageName() {
         return "imodel-components-react";
     }
-    /** Calls localization.getLocalizedString with the "UiIModelComponents" namespace. Do NOT include the namespace in the key.
+    /** Calls localization.getLocalizedStringWithNamespace with the "UiIModelComponents" namespace. Do NOT include the namespace in the key.
      * @internal
      */
     static translate(key) {

package/lib/esm/imodel-components-react/UiIModelComponents.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UiIModelComponents.js","sourceRoot":"","sources":["../../../src/imodel-components-react/UiIModelComponents.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;;GAGG;AACH,MAAM,OAAO,kBAAkB;IAG7B;;OAEG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU;;QAC5B,IAAI,kBAAkB,CAAC,YAAY,EAAE;YACnC,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,8CAA8C,CAAC,CAAC;YACtH,OAAO;SACR;QAED,aAAa,EAAE,CAAC;QAChB,MAAM,CAAA,MAAA,SAAS,CAAC,YAAY,0CAAE,iBAAiB,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,CAAA,CAAC;QAE1F,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE;YAC3B,oEAAoE;YACpE,MAAM,YAAY,GAAG,IAAI,iBAAiB,EAAE,CAAC;YAC7C,MAAM,YAAY,CAAC,UAAU,EAAE,CAAC;YAChC,MAAM,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;SAC7C;aAAM;YACL,MAAM,YAAY,CAAC,UAAU,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;SACvD;QAED,kBAAkB,CAAC,YAAY,GAAG,IAAI,CAAC;IACzC,CAAC;IAED,gEAAgE;IACzD,MAAM,CAAC,SAAS;;QACrB,MAAA,SAAS,CAAC,YAAY,0CAAE,mBAAmB,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,CAAC;QACtF,YAAY,CAAC,SAAS,EAAE,CAAC;QACzB,kBAAkB,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1C,CAAC;IAED,4DAA4D;IACrD,MAAM,KAAK,WAAW,KAAc,OAAO,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC;IAEpF,kDAAkD;IAC3C,MAAM,KAAK,qBAAqB;QACrC,OAAO,oBAAoB,CAAC;IAC9B,CAAC;IAED,gBAAgB;IACT,MAAM,KAAK,WAAW;QAC3B,OAAO,yBAAyB,CAAC;IACnC,CAAC;IAED;;OAEG;IACI,MAAM,CAAC,SAAS,CAAC,GAAsB;QAC5C,IAAI,CAAC,kBAAkB,CAAC,WAAW,IAAI,0BAA0B,CAAC,CAAC,SAAS,CAAC,YAAY,EAAE;YACzF,MAAM,CAAC,QAAQ,CAAC,kBAAkB,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,+EAA+E,CAAC,CAAC;YAC1I,OAAO,EAAE,CAAC;SACX;QACD,OAAO,SAAS,CAAC,YAAY,CAAC,kBAAkB,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,kBAAkB,CAAC,qBAAqB,EAAE,CAAC,CAAC;IAC1G,CAAC;IAED,gBAAgB;IACT,MAAM,CAAC,cAAc,CAAC,GAAQ;QACnC,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QACpC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,WAAW,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACrF,OAAO,QAAQ,CAAC;IAClB,CAAC;;AA9Dc,+BAAY,GAAG,KAAK,CAAC","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 Common\r\n /\r\n\r\nimport { enablePatches } from \"immer\";\r\nimport { Logger } from \"@itwin/core-bentley\";\r\nimport { IModelApp } from \"@itwin/core-frontend\";\r\nimport { getClassName } from \"@itwin/appui-abstract\";\r\nimport { UiComponents } from \"@itwin/components-react\";\r\nimport { EmptyLocalization } from \"@itwin/core-common\";\r\n\r\n/\r\n Manages the localization service for the imodel-components-react package.\r\n * @public\r\n /\r\nexport class UiIModelComponents {\r\n private static _initialized = false;\r\n\r\n /\r\n initialize UiIModelComponents.\r\n /\r\n public static async initialize(): Promise<void> {\r\n if (UiIModelComponents._initialized) {\r\n Logger.logInfo(UiIModelComponents.loggerCategory(UiIModelComponents), `UiIModelComponents.initialize already called`);\r\n return;\r\n }\r\n\r\n enablePatches();\r\n await IModelApp.localization?.registerNamespace(UiIModelComponents.localizationNamespace);\r\n\r\n if (!IModelApp.localization) {\r\n // it should only get here in unit test where IModelApp is not setup\r\n const localization = new EmptyLocalization();\r\n await localization.initialize();\r\n await UiComponents.initialize(localization);\r\n } else {\r\n await UiComponents.initialize(IModelApp.localization);\r\n }\r\n\r\n UiIModelComponents._initialized = true;\r\n }\r\n\r\n /* Unregisters the UiIModelComponents localization namespace /\r\n public static terminate() {\r\n IModelApp.localization?.unregisterNamespace(UiIModelComponents.localizationNamespace);\r\n UiComponents.terminate();\r\n UiIModelComponents._initialized = false;\r\n }\r\n\r\n /* Determines if UiIModelComponents has been initialized /\r\n public static get initialized(): boolean { return UiIModelComponents._initialized; }\r\n\r\n /* The internationalization service namespace. /\r\n public static get localizationNamespace(): string {\r\n return \"UiIModelComponents\";\r\n }\r\n\r\n /* @internal /\r\n public static get packageName(): string {\r\n return \"imodel-components-react\";\r\n }\r\n\r\n /* Calls localization.~~getLocalizedString~~ with the \"UiIModelComponents\" namespace. Do NOT include the namespace in the key.\r\n * @internal\r\n /\r\n public static translate(key: string \| string[]): string {\r\n if (!UiIModelComponents.initialized \|\| / istanbul ignore next / !IModelApp.localization) {\r\n Logger.logError(UiIModelComponents.loggerCategory(this), `translate: IModelApp.localization has not been setup. Returning blank string.`);\r\n return \"\";\r\n }\r\n return IModelApp.localization.getLocalizedString(key, { ns: UiIModelComponents.localizationNamespace });\r\n }\r\n\r\n /* @internal */\r\n public static loggerCategory(obj: any): string {\r\n const className = getClassName(obj);\r\n const category = UiIModelComponents.packageName + (className ? `.${className}` : \"\");\r\n return category;\r\n }\r\n\r\n}\r\n"]}
1	+ {"version":3,"file":"UiIModelComponents.js","sourceRoot":"","sources":["../../../src/imodel-components-react/UiIModelComponents.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;;GAGG;AACH,MAAM,OAAO,kBAAkB;IAG7B;;OAEG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU;;QAC5B,IAAI,kBAAkB,CAAC,YAAY,EAAE;YACnC,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,8CAA8C,CAAC,CAAC;YACtH,OAAO;SACR;QAED,aAAa,EAAE,CAAC;QAChB,MAAM,CAAA,MAAA,SAAS,CAAC,YAAY,0CAAE,iBAAiB,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,CAAA,CAAC;QAE1F,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE;YAC3B,oEAAoE;YACpE,MAAM,YAAY,GAAG,IAAI,iBAAiB,EAAE,CAAC;YAC7C,MAAM,YAAY,CAAC,UAAU,EAAE,CAAC;YAChC,MAAM,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;SAC7C;aAAM;YACL,MAAM,YAAY,CAAC,UAAU,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;SACvD;QAED,kBAAkB,CAAC,YAAY,GAAG,IAAI,CAAC;IACzC,CAAC;IAED,gEAAgE;IACzD,MAAM,CAAC,SAAS;;QACrB,MAAA,SAAS,CAAC,YAAY,0CAAE,mBAAmB,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,CAAC;QACtF,YAAY,CAAC,SAAS,EAAE,CAAC;QACzB,kBAAkB,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1C,CAAC;IAED,4DAA4D;IACrD,MAAM,KAAK,WAAW,KAAc,OAAO,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC;IAEpF,kDAAkD;IAC3C,MAAM,KAAK,qBAAqB;QACrC,OAAO,oBAAoB,CAAC;IAC9B,CAAC;IAED,gBAAgB;IACT,MAAM,KAAK,WAAW;QAC3B,OAAO,yBAAyB,CAAC;IACnC,CAAC;IAED;;OAEG;IACI,MAAM,CAAC,SAAS,CAAC,GAAsB;QAC5C,IAAI,CAAC,kBAAkB,CAAC,WAAW,IAAI,0BAA0B,CAAC,CAAC,SAAS,CAAC,YAAY,EAAE;YACzF,MAAM,CAAC,QAAQ,CAAC,kBAAkB,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,+EAA+E,CAAC,CAAC;YAC1I,OAAO,EAAE,CAAC;SACX;QACD,OAAO,SAAS,CAAC,YAAY,CAAC,kBAAkB,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,kBAAkB,CAAC,qBAAqB,EAAE,CAAC,CAAC;IAC1G,CAAC;IAED,gBAAgB;IACT,MAAM,CAAC,cAAc,CAAC,GAAQ;QACnC,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QACpC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,WAAW,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACrF,OAAO,QAAQ,CAAC;IAClB,CAAC;;AA9Dc,+BAAY,GAAG,KAAK,CAAC","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 Common\r\n /\r\n\r\nimport { enablePatches } from \"immer\";\r\nimport { Logger } from \"@itwin/core-bentley\";\r\nimport { IModelApp } from \"@itwin/core-frontend\";\r\nimport { getClassName } from \"@itwin/appui-abstract\";\r\nimport { UiComponents } from \"@itwin/components-react\";\r\nimport { EmptyLocalization } from \"@itwin/core-common\";\r\n\r\n/\r\n Manages the localization service for the imodel-components-react package.\r\n * @public\r\n /\r\nexport class UiIModelComponents {\r\n private static _initialized = false;\r\n\r\n /\r\n initialize UiIModelComponents.\r\n /\r\n public static async initialize(): Promise<void> {\r\n if (UiIModelComponents._initialized) {\r\n Logger.logInfo(UiIModelComponents.loggerCategory(UiIModelComponents), `UiIModelComponents.initialize already called`);\r\n return;\r\n }\r\n\r\n enablePatches();\r\n await IModelApp.localization?.registerNamespace(UiIModelComponents.localizationNamespace);\r\n\r\n if (!IModelApp.localization) {\r\n // it should only get here in unit test where IModelApp is not setup\r\n const localization = new EmptyLocalization();\r\n await localization.initialize();\r\n await UiComponents.initialize(localization);\r\n } else {\r\n await UiComponents.initialize(IModelApp.localization);\r\n }\r\n\r\n UiIModelComponents._initialized = true;\r\n }\r\n\r\n /* Unregisters the UiIModelComponents localization namespace /\r\n public static terminate() {\r\n IModelApp.localization?.unregisterNamespace(UiIModelComponents.localizationNamespace);\r\n UiComponents.terminate();\r\n UiIModelComponents._initialized = false;\r\n }\r\n\r\n /* Determines if UiIModelComponents has been initialized /\r\n public static get initialized(): boolean { return UiIModelComponents._initialized; }\r\n\r\n /* The internationalization service namespace. /\r\n public static get localizationNamespace(): string {\r\n return \"UiIModelComponents\";\r\n }\r\n\r\n /* @internal /\r\n public static get packageName(): string {\r\n return \"imodel-components-react\";\r\n }\r\n\r\n /* Calls localization.getLocalizedStringWithNamespace with the \"UiIModelComponents\" namespace. Do NOT include the namespace in the key.\r\n * @internal\r\n /\r\n public static translate(key: string \| string[]): string {\r\n if (!UiIModelComponents.initialized \|\| / istanbul ignore next / !IModelApp.localization) {\r\n Logger.logError(UiIModelComponents.loggerCategory(this), `translate: IModelApp.localization has not been setup. Returning blank string.`);\r\n return \"\";\r\n }\r\n return IModelApp.localization.getLocalizedString(key, { ns: UiIModelComponents.localizationNamespace });\r\n }\r\n\r\n /* @internal */\r\n public static loggerCategory(obj: any): string {\r\n const className = getClassName(obj);\r\n const category = UiIModelComponents.packageName + (className ? `.${className}` : \"\");\r\n return category;\r\n }\r\n\r\n}\r\n"]}

package/lib/esm/imodel-components-react/color/ColorPickerButton.scss CHANGED Viewed

@@ -3,35 +3,34 @@
 * 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/itwinui-css/scss/style/typography";
 button.components-colorpicker-button {
-  font-family: $iui-font-family;
-  font-size: $iui-font-size;
+  font-family: var(--iui-font-sans);
+  font-size: var(--iui-font-size-1);
   color: $buic-foreground-body;
   box-sizing: border-box;
   border: 1px solid transparent;
-  border-radius: 3px;
+  border-radius: var(--iui-border-radius-1);
   background-color: transparent;
   border: none;
   padding: 0;
-  >.components-colorpicker-button-container {
+  > .components-colorpicker-button-container {
     display: flex;
     flex-direction: row;
     align-items: center;
-    border-radius: 3px;
+    border-radius: var(--iui-border-radius-1);
-    >.components-colorpicker-button-color-swatch {
+    > .components-colorpicker-button-color-swatch {
       border: 1px solid $buic-inputs-border;
-      border-radius: 3px;
+      border-radius: var(--iui-border-radius-1);
       width: 1.25em;
       height: 1.25em;
     }
-    >.components-caret {
-      margin-left: .25em;
-      margin-right: .25em;
+    > .components-caret {
+      margin-left: 0.25em;
+      margin-right: 0.25em;
     }
   }
@@ -42,8 +41,8 @@ button.components-colorpicker-button {
   &:disabled {
     pointer-events: none;
-    >.components-colorpicker-button-container {
-      >.components-caret {
+    > .components-colorpicker-button-container {
+      > .components-caret {
         color: $buic-icon-color-disabled;
       }
     }
@@ -59,7 +58,6 @@ button.components-colorpicker-button {
       border-radius: 50%;
     }
   }
 }
 .components-colorpicker-popup {
@@ -71,12 +69,12 @@ button.components-colorpicker-button {
     background: $buic-background-control;
     border-radius: 6px;
-    >.components-colorpicker-popup-colors {
+    > .components-colorpicker-popup-colors {
       display: grid;
       grid-gap: 8px;
       padding: 8px;
-      >.components-colorpicker-swatch {
+      > .components-colorpicker-swatch {
         height: 1.5em;
         width: 1.5em;
         transition: scale 0.2s ease;
@@ -89,4 +87,4 @@ button.components-colorpicker-button {
       }
     }
   }
-}
+}

package/lib/esm/imodel-components-react/color/ColorPickerPanel.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@
 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
+ * @public @deprecated use `ColorPicker` for itwinui-react
  */
 export interface ColorPickerPanelProps {
     activeColor: ColorDef;
@@ -16,7 +16,7 @@ export interface ColorPickerPanelProps {
 }
 /**
  * Color Picker Dialog to use as modal dialog.
- * @public @deprecated in 3.0. Use `ColorPicker` for itwinui-react
+ * @public @deprecated use `ColorPicker` for itwinui-react
  */
 export declare function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps): JSX.Element;
 //# sourceMappingURL=ColorPickerPanel.d.ts.map

package/lib/esm/imodel-components-react/color/ColorPickerPanel.js CHANGED Viewed

@@ -15,7 +15,7 @@ import "./ColorPickerPanel.scss";
 import { NumberInput } from "@itwin/core-react";
 /**
  * Color Picker Dialog to use as modal dialog.
- * @public @deprecated in 3.0. Use `ColorPicker` for itwinui-react
+ * @public @deprecated use `ColorPicker` for itwinui-react
  */
 // istanbul ignore next
 export function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }) {

package/lib/esm/imodel-components-react/color/ColorPickerPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"]}
1	+ {"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 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 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"]}

package/lib/esm/imodel-components-react/color/ColorPickerPopup.scss CHANGED Viewed

@@ -3,15 +3,14 @@
 * 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/itwinui-css/scss/style/typography";
 button.components-colorpicker-popup-button {
-  font-family: $iui-font-family;
-  font-size: $iui-font-size;
+  font-family: var(--iui-font-sans);
+  font-size: var(--iui-font-size-1);
   color: $buic-foreground-body;
   background-color: transparent;
   box-sizing: border-box;
-  border-radius: 3px;
+  border-radius: var(--iui-border-radius-1);
   border: none;
   padding: 0;
@@ -19,29 +18,29 @@ button.components-colorpicker-popup-button {
     cursor: pointer;
   }
-  >.components-colorpicker-button-container {
+  > .components-colorpicker-button-container {
     display: flex;
     flex-direction: row;
     align-items: center;
-    >.components-colorpicker-button-color-swatch {
+    > .components-colorpicker-button-color-swatch {
       border: 1px solid $buic-inputs-border;
-      border-radius: 3px;
+      border-radius: var(--iui-border-radius-1);
       width: 1.25em;
       height: 1.25em;
     }
-    >.components-caret {
-      margin-left: .25em;
-      margin-right: .25em;
+    > .components-caret {
+      margin-left: 0.25em;
+      margin-right: 0.25em;
     }
   }
   &:disabled {
     pointer-events: none;
-    >.components-colorpicker-button-container {
-      >.components-caret {
+    > .components-colorpicker-button-container {
+      > .components-caret {
         color: $buic-icon-color-disabled;
       }
     }

package/lib/esm/imodel-components-react/color/Swatch.scss CHANGED Viewed

@@ -3,14 +3,13 @@
 * 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/itwinui-css/scss/style/typography";
 .components-color-swatch {
-  font-size: $iui-font-size;
+  font-size: var(--iui-font-size-1);
   height: 1em * 1.2;
   width: 1em * 1.2;
   border-width: 1px;
-  border-radius: 3px;
+  border-radius: var(--iui-border-radius-1);
   border-style: solid;
   border-color: $buic-inputs-border;
@@ -19,6 +18,6 @@
   }
   &[disabled] {
-    opacity: .2;
+    opacity: 0.2;
   }
-}
+}