@itwin/core-react 4.0.0-dev.17 → 4.0.0-dev.19

package/lib/esm/core-react/inputs/iconinput/IconInput.scss

@@ -1,35 +1,35 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../../base/base";
-@import "../variables";
-
-.core-iconInput-container {
-  position: relative;
-  padding:  0;
-  margin:   0;
-
-  .iui-input {
-    margin:       0;
-    padding-left: 30px;
-  }
-
-  .core-iconInput-icon {
-    position: absolute;
-    top:      0;
-    left:     0;
-    width:    30px;
-    height:   100%;
-    @include uicore-centered;
-
-    .icon {
-      width:  16px;
-      height: 16px;
-
-      margin-top: 2px;
-      @include uicore-centered;
-    }
-  }
-
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../../base/base";
+@import "../variables";
+
+.core-iconInput-container {
+  position: relative;
+  padding:  0;
+  margin:   0;
+
+  .iui-input {
+    margin:       0;
+    padding-left: 30px;
+  }
+
+  .core-iconInput-icon {
+    position: absolute;
+    top:      0;
+    left:     0;
+    width:    30px;
+    height:   100%;
+    @include uicore-centered;
+
+    .icon {
+      width:  16px;
+      height: 16px;
+
+      margin-top: 2px;
+      @include uicore-centered;
+    }
+  }
+
+}

package/lib/esm/core-react/inputs/index.scss

@@ -1,9 +1,9 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../style/index";
-
-@import "./variables";
-@import "./input";
-@import "./input-label";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/index";
+
+@import "./variables";
+@import "./input";
+@import "./input-label";

package/lib/esm/core-react/inputs/input-label.scss

@@ -1,90 +1,90 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../style/index";
-
-@mixin uicore-inputs-labeled-input {
-  display: block;
-  padding: 0;
-  margin: 0 0 $uicore-unbordered-padding;
-  text-align: left;
-  font-size: var(--iui-font-size-1);
-  font-weight: var(--iui-font-weight-normal);
-  cursor: pointer;
-
-  > .uicore-label {
-    padding: 0;
-    margin: 0;
-    border: 0 none transparent;
-    display: block;
-    font-size: var(--iui-font-size-1);
-    font-weight: var(--iui-font-weight-semibold);
-    line-height: var(--iui-size-l);
-    text-align: left;
-    color: var(--iui-color-text);
-  }
-
-  > .input {
-    position: relative;
-    /// Needed to vertically align the icon:
-    display: inline-block;
-    width: 100%;
-
-    &.with-icon {
-      > input,
-      > .bwx-inputs-input {
-        padding-right: calc(#{$uicore-bordered-padding} + var(--iui-size-l));
-        margin-right: calc(#{$uicore-bordered-padding} + var(--iui-size-l));
-      }
-    }
-
-    > .icon {
-      display: flex;
-      align-items: center;
-      position: absolute;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      padding: $uicore-bordered-padding;
-
-      font-size: var(--iui-font-size-1);
-      font-weight: normal;
-    }
-  }
-
-  > .uicore-message {
-    display: block;
-    font-size: var(--iui-font-size-0);
-    line-height: var(--iui-size-l);
-    color: var(--iui-color-text-muted);
-  }
-
-  /// Status colors ----------------------------------------------------------
-
-  $status-colors: (
-    success: $buic-foreground-positive-rgb,
-    warning: $buic-foreground-warning-rgb,
-    error: $buic-foreground-negative-rgb,
-  );
-
-  @each $status, $color in $status-colors {
-    &.#{$status},
-    &.#{$status} > .uicore-message {
-      color: rgb($color);
-    }
-
-    &.#{$status} > .input {
-      > input,
-      > .uicore-inputs-input {
-        border-color: rgb($color);
-        box-shadow: $buic-inputs-boxshadow 0px 1px 1px inset;
-
-        &:focus {
-          border-color: rgb($color);
-          box-shadow: rgba($color, $uicore-opacity-boxshadow) 0px 0px 0px 2px;
-        }
-      }
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/index";
+
+@mixin uicore-inputs-labeled-input {
+  display: block;
+  padding: 0;
+  margin: 0 0 $uicore-unbordered-padding;
+  text-align: left;
+  font-size: var(--iui-font-size-1);
+  font-weight: var(--iui-font-weight-normal);
+  cursor: pointer;
+
+  > .uicore-label {
+    padding: 0;
+    margin: 0;
+    border: 0 none transparent;
+    display: block;
+    font-size: var(--iui-font-size-1);
+    font-weight: var(--iui-font-weight-semibold);
+    line-height: var(--iui-size-l);
+    text-align: left;
+    color: var(--iui-color-text);
+  }
+
+  > .input {
+    position: relative;
+    /// Needed to vertically align the icon:
+    display: inline-block;
+    width: 100%;
+
+    &.with-icon {
+      > input,
+      > .bwx-inputs-input {
+        padding-right: calc(#{$uicore-bordered-padding} + var(--iui-size-l));
+        margin-right: calc(#{$uicore-bordered-padding} + var(--iui-size-l));
+      }
+    }
+
+    > .icon {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      padding: $uicore-bordered-padding;
+
+      font-size: var(--iui-font-size-1);
+      font-weight: normal;
+    }
+  }
+
+  > .uicore-message {
+    display: block;
+    font-size: var(--iui-font-size-0);
+    line-height: var(--iui-size-l);
+    color: var(--iui-color-text-muted);
+  }
+
+  /// Status colors ----------------------------------------------------------
+
+  $status-colors: (
+    success: $buic-foreground-positive-rgb,
+    warning: $buic-foreground-warning-rgb,
+    error: $buic-foreground-negative-rgb,
+  );
+
+  @each $status, $color in $status-colors {
+    &.#{$status},
+    &.#{$status} > .uicore-message {
+      color: rgb($color);
+    }
+
+    &.#{$status} > .input {
+      > input,
+      > .uicore-inputs-input {
+        border-color: rgb($color);
+        box-shadow: $buic-inputs-boxshadow 0px 1px 1px inset;
+
+        &:focus {
+          border-color: rgb($color);
+          box-shadow: rgba($color, $uicore-opacity-boxshadow) 0px 0px 0px 2px;
+        }
+      }
+    }
+  }
+}

package/lib/esm/core-react/inputs/input.scss

@@ -1,58 +1,58 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../style/index";
-@import "./variables";
-
-@mixin uicore-inputs-input {
-  display: block;
-  width: 100%;
-  padding: $uicore-inputs-padding-bordered $uicore-bordered-padding;
-  margin: $uicore-inputs-margin 0;
-  font-family: var(--iui-font-sans);
-  font-size: var(--iui-font-size-1);
-  line-height: normal;
-  color: var(--iui-color-text);
-  background-color: $buic-background-control;
-  background-image: none;
-  border: 1px solid var(--iui-color-border-foreground);
-  border-radius: var(--iui-border-radius-1);
-  box-shadow: $buic-inputs-boxshadow 0px 1px 1px inset;
-  box-sizing: border-box;
-  transition: border-color var(--iui-duration-1) ease-in-out,
-    box-shadow var(--iui-duration-1) ease-in-out;
-
-  &:-ms-input-placeholder {
-    color: var(--iui-color-text-disabled);
-  }
-  &::-webkit-input-placeholder {
-    color: var(--iui-color-text-disabled);
-  }
-  &::placeholder {
-    color: var(--iui-color-text-disabled);
-  }
-
-  &[disabled] {
-    background-color: $buic-background-control-disabled;
-    border-color: $buic-foreground-disabled;
-    color: var(--iui-color-text-disabled);
-    cursor: not-allowed;
-    opacity: $uicore-opacity-disabled;
-  }
-
-  &[readonly] {
-    color: var(--iui-color-text-muted);
-    cursor: default;
-  }
-
-  &:focus {
-    outline: 0px;
-    border-color: $buic-foreground-focus-border;
-    box-shadow: $uicore-inputs-focus-boxshadow;
-  }
-
-  &.iui-input {
-    padding: $uicore-iui-input-padding;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/index";
+@import "./variables";
+
+@mixin uicore-inputs-input {
+  display: block;
+  width: 100%;
+  padding: $uicore-inputs-padding-bordered $uicore-bordered-padding;
+  margin: $uicore-inputs-margin 0;
+  font-family: var(--iui-font-sans);
+  font-size: var(--iui-font-size-1);
+  line-height: normal;
+  color: var(--iui-color-text);
+  background-color: $buic-background-control;
+  background-image: none;
+  border: 1px solid var(--iui-color-border-foreground);
+  border-radius: var(--iui-border-radius-1);
+  box-shadow: $buic-inputs-boxshadow 0px 1px 1px inset;
+  box-sizing: border-box;
+  transition: border-color var(--iui-duration-1) ease-in-out,
+    box-shadow var(--iui-duration-1) ease-in-out;
+
+  &:-ms-input-placeholder {
+    color: var(--iui-color-text-disabled);
+  }
+  &::-webkit-input-placeholder {
+    color: var(--iui-color-text-disabled);
+  }
+  &::placeholder {
+    color: var(--iui-color-text-disabled);
+  }
+
+  &[disabled] {
+    background-color: $buic-background-control-disabled;
+    border-color: $buic-foreground-disabled;
+    color: var(--iui-color-text-disabled);
+    cursor: not-allowed;
+    opacity: $uicore-opacity-disabled;
+  }
+
+  &[readonly] {
+    color: var(--iui-color-text-muted);
+    cursor: default;
+  }
+
+  &:focus {
+    outline: 0px;
+    border-color: $buic-foreground-focus-border;
+    box-shadow: $uicore-inputs-focus-boxshadow;
+  }
+
+  &.iui-input {
+    padding: $uicore-iui-input-padding;
+  }
+}

package/lib/esm/core-react/inputs/numberinput/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../../../src/core-react/inputs/numberinput/NumberInput.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAc,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AA4C1G,MAAM,qBAAqB,GAAG,KAAK,CAAC,UAAU,CAC5C,SAAS,qBAAqB,CAAC,KAAK,EAAE,GAAG;IACvC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EACnE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IACnH,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAE5C;;;;;;KAMC;IACD,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAS,EAAE,EAAE;QACpD,IAAI,CAA4B,CAAC;QAEjC,IAAI,KAAK;YACP,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QACf,IAAI,SAAS,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,EAAE;YACjC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;YAClB,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;gBAC5B,CAAC,GAAG,CAAC,CAAC;aACP;SACF;QAED,MAAM,cAAc,GAAG,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QAChE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,cAAc,CAAC,CAAC;QACvC,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;QACnE,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;QACnE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC;QAC9C,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QAE1B,OAAO,CAAC,CAAC;IACX,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;IAEjC;;;KAGC;IACD,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,GAA8B,EAAE,EAAE;QAC1E,MAAM,cAAc,GAAG,SAAS,KAAK,SAAS,IAAI,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QACrF,MAAM,GAAG,GAAG,SAAS,KAAK,GAAG,IAAI,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAEjF,IAAI,MAAM;YACR,OAAO,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QAE1B,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;IAExB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;IAExF,qEAAqE;IACrE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;QAChC,MAAM,qBAAqB,GAAG,cAAc,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QACtE,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC,CAAC;IAE5B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAA0C,EAAE,EAAE;QACpF,MAAM,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;QACzC,iBAAiB,CAAC,MAAM,CAAC,CAAC;QAC1B,YAAY,IAAI,QAAQ,IAAI,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAE5C,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,MAAc,EAAE,EAAE;QACvD,MAAM,eAAe,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;QAC/C,QAAQ,IAAI,QAAQ,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;QAC9C,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC;IAE/B,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAE,EAAE;QACnE,MAAM,MAAM,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;QACvC,WAAW,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC;IAEjC,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyC,EAAE,EAAE;QACjF,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACjD,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;QACxB,WAAW,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,aAAa,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAEzC,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,SAAkB,EAAE,EAAE;QACjE,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE;YAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YAChD,OAAO,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;SAC9B;QAED,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1B,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX;;KAEC;IACD,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,SAAkB,EAAE,EAAE;QACzD,MAAM,cAAc,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;QAEpD,IAAI,GAAG,GAAG,aAAa,CAAC,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;QACzF,IAAI,IAAI,EAAE;YACR,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,cAAc,CAAC,GAAG,cAAc,CAAC;SACzD;QAED,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;QACnE,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;QACnE,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC;QAElD,WAAW,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC,EAAE,CAAC,cAAc,EAAE,iBAAiB,EAAE,GAAG,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IAEpF,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAA4C,EAAE,EAAE;QACvF,uBAAuB;QACvB,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,KAAK,EAAE;YAClC,qBAAqB,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACjD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,MAAM,EAAE;YAC1C,iBAAiB,CAAC,cAAc,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;YAC3D,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,SAAS,EAAE;YAC7C,SAAS,CAAC,KAAK,CAAC,CAAC;YACjB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,OAAO,EAAE;YAC3C,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;QACD,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,qBAAqB,EAAE,SAAS,CAAC,CAAC,CAAC;IAElE,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAmD,EAAE,EAAE;QAChG,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAmD,EAAE,EAAE;QAC9F,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyC,EAAE,EAAE;QAClF,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC;IACzC,MAAM,gBAAgB,GAAG,UAAU,CAAC,6BAA6B,EAC/D,kBAAkB,EAClB,gBAAgB,IAAI,+BAA+B,EACnD,UAAU,IAAI,4BAA4B,CAC3C,CAAC;IAEF,MAAM,OAAO,GAAG,gBAAgB,CAAC,CAAC,CAAC,oBAAC,UAAU,OAAG,CAAC,CAAC,CAAC,oBAAC,eAAe,OAAG,CAAC;IACxE,MAAM,SAAS,GAAG,gBAAgB,CAAC,CAAC,CAAC,oBAAC,YAAY,OAAG,CAAC,CAAC,CAAC,oBAAC,iBAAiB,OAAG,CAAC;IAE9E,OAAO,CACL,6BAAK,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,cAAc;QACrD,oBAAC,KAAK,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAC,OAAO,KAAK,UAAU,GAAI;QACnK,6BAAK,SAAS,EAAE,UAAU,CAAC,qCAAqC,EAAE,gBAAgB,IAAI,+BAA+B,CAAC;YAEpH,6BAAK,SAAS,EAAC,sDAAsD,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAC,cAAc;gBAC7H,oBAAC,IAAI,IAAC,QAAQ,EAAE,OAAO,GAAI,CACvB;YAEN,6BAAK,SAAS,EAAC,wDAAwD,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,EAAC,cAAc;gBACjI,oBAAC,IAAI,IAAC,QAAQ,EAAE,SAAS,GAAI,CACzB,CACF,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAoD,qBAAqB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Inputs\n */\n\nimport \"./NumberInput.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Input, InputProps } from \"@itwin/itwinui-react\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport { Icon } from \"../../icons/IconComponent\";\nimport { SvgCaretDown, SvgCaretDownSmall, SvgCaretUp, SvgCaretUpSmall } from \"@itwin/itwinui-icons-react\";\n\n/** Step function prototype for [[NumberInput]] component\n * @public\n */\nexport type StepFunctionProp = number | ((direction: string) => number | undefined);\n\n/** Properties for the [[NumberInput]] component\n * @public\n */\nexport interface NumberInputProps extends Omit<InputProps, \"min\" | \"max\" | \"step\" | \"onChange\"> {\n  /** Numeric value, set to `undefined` to show placeholder text */\n  value?: number;\n  /** CSS class name for the NumberInput component container div */\n  containerClassName?: string;\n  /** Style for component container div. */\n  containerStyle?: React.CSSProperties;\n  /** number or function\tNumber.MIN_SAFE_INTEGER */\n  min?: number;\n  /** number or function\tdefaults to Number.MAX_SAFE_INTEGER */\n  max?: number;\n  /** increment step value used while incrementing or decrementing (up/down buttons or arrow keys) defaults to 1. */\n  step?: StepFunctionProp;\n  /** number of decimal places, defaults to 0 */\n  precision?: number;\n  /** function parseFloat */\n  parse?: ((value: string) => number | null | undefined);\n  /** function optional formatting function that takes the number value and the internal formatted value in case function just adds prefix or suffix. */\n  format?: (num: number | null | undefined, formattedValue: string) => string;\n  /** Set to true to \"snap\" to the closest step value while incrementing or decrementing (up/down buttons or arrow keys). */\n  snap?: boolean;\n  /** Function to call when value is changed. */\n  onChange?: (value: number | undefined, stringValue: string) => void;\n  /** if true up/down buttons are shown larger and side by side */\n  showTouchButtons?: boolean;\n  /** Provides ability to return reference to HTMLInputElement */\n  ref?: React.Ref<HTMLInputElement>;\n  /**\n   * Makes this component behave as controlled component.\n   * @internal\n   */\n  isControlled?: boolean;\n}\n\nconst ForwardRefNumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  function ForwardRefNumberInput(props, ref) {\n    const { containerClassName, value, min, max, precision, format, parse,\n      onChange, onBlur, onKeyDown, step, snap, showTouchButtons, containerStyle, isControlled, ...otherProps } = props;\n    const currentValueRef = React.useRef(value);\n\n    /**\n   * Used internally to parse the argument x to it's numeric representation.\n   * If the argument cannot be converted to finite number returns 0; If a\n   * \"precision\" prop is specified uses it round the number with that\n   * precision (no fixed precision here because the return value is float, not\n   * string).\n   */\n    const parseInternal = React.useCallback((x: string) => {\n      let n: number | undefined | null;\n\n      if (parse)\n        n = parse(x);\n      if (undefined === n || null === n) {\n        n = parseFloat(x);\n        if (isNaN(n) || !isFinite(n)) {\n          n = 0;\n        }\n      }\n\n      const localPrecision = undefined === precision ? 10 : precision;\n      const q = Math.pow(10, localPrecision);\n      const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\n      const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\n      n = Math.min(Math.max(n, localMin), localMax);\n      n = Math.round(n * q) / q;\n\n      return n;\n    }, [parse, precision, min, max]);\n\n    /**\n   * This is used internally to format a number to its display representation.\n   * It will invoke the format function if one is provided.\n   */\n    const formatInternal = React.useCallback((num: number | undefined | null) => {\n      const localPrecision = undefined === precision || null === precision ? 0 : precision;\n      const str = undefined === num || null === num ? \"\" : num.toFixed(localPrecision);\n\n      if (format)\n        return format(num, str);\n\n      return str;\n    }, [format, precision]);\n\n    const [formattedValue, setFormattedValue] = React.useState(() => formatInternal(value));\n\n    // See if new initialValue props have changed since component mounted\n    React.useEffect(() => {\n      currentValueRef.current = value;\n      const currentFormattedValue = formatInternal(currentValueRef.current);\n      setFormattedValue(currentFormattedValue);\n    }, [formatInternal, value]);\n\n    const handleChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n      const newVal = event.currentTarget.value;\n      setFormattedValue(newVal);\n      isControlled && onChange && onChange(parseInternal(newVal), newVal);\n    }, [isControlled, onChange, parseInternal]);\n\n    const updateValue = React.useCallback((newVal: number) => {\n      const newFormattedVal = formatInternal(newVal);\n      onChange && onChange(newVal, newFormattedVal);\n      setFormattedValue(newFormattedVal);\n    }, [onChange, formatInternal]);\n\n    const updateValueFromString = React.useCallback((strValue: string) => {\n      const newVal = parseInternal(strValue);\n      updateValue(newVal);\n    }, [parseInternal, updateValue]);\n\n    const handleBlur = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\n      const newVal = parseInternal(event.target.value);\n      onBlur && onBlur(event);\n      updateValue(newVal);\n    }, [parseInternal, updateValue, onBlur]);\n\n    const getIncrementValue = React.useCallback((increment: boolean) => {\n      if (typeof step === \"function\") {\n        const stepVal = step(increment ? \"up\" : \"down\");\n        return stepVal ? stepVal : 1;\n      }\n\n      return !step ? 1 : step;\n    }, [step]);\n\n    /**\n   * The internal method that actually sets the new value on the input\n   */\n    const applyStep = React.useCallback((increment: boolean) => {\n      const incrementValue = getIncrementValue(increment);\n\n      let num = parseInternal(formattedValue) + (increment ? incrementValue : -incrementValue);\n      if (snap) {\n        num = Math.round(num / incrementValue) * incrementValue;\n      }\n\n      const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\n      const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\n      num = Math.min(Math.max(num, localMin), localMax);\n\n      updateValue(num);\n    }, [formattedValue, getIncrementValue, max, min, parseInternal, snap, updateValue]);\n\n    const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n      // istanbul ignore else\n      if (event.key === SpecialKey.Enter) {\n        updateValueFromString(event.currentTarget.value);\n        event.preventDefault();\n        event.stopPropagation();\n      } else if (event.key === SpecialKey.Escape) {\n        setFormattedValue(formatInternal(currentValueRef.current));\n        event.preventDefault();\n      } else if (event.key === SpecialKey.ArrowDown) {\n        applyStep(false);\n        event.preventDefault();\n        event.stopPropagation();\n      } else if (event.key === SpecialKey.ArrowUp) {\n        applyStep(true);\n        event.preventDefault();\n        event.stopPropagation();\n      }\n      onKeyDown && onKeyDown(event);\n    }, [applyStep, formatInternal, updateValueFromString, onKeyDown]);\n\n    const handleDownClick = React.useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n      applyStep(false);\n      event.preventDefault();\n    }, [applyStep]);\n\n    const handleUpClick = React.useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n      applyStep(true);\n      event.preventDefault();\n    }, [applyStep]);\n\n    const handleFocus = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\n      event.currentTarget.select();\n    }, []);\n\n    const isDisabled = !!otherProps.disabled;\n    const containerClasses = classnames(\"core-number-input-container\",\n      containerClassName,\n      showTouchButtons && \"core-number-buttons-for-touch\",\n      isDisabled && \"core-number-input-disabled\",\n    );\n\n    const caretUp = showTouchButtons ? <SvgCaretUp /> : <SvgCaretUpSmall />;\n    const caretDown = showTouchButtons ? <SvgCaretDown /> : <SvgCaretDownSmall />;\n\n    return (\n      <div className={containerClasses} style={containerStyle} >\n        <Input ref={ref} value={formattedValue} onChange={handleChange} onKeyDown={handleKeyDown} onFocus={handleFocus} onBlur={handleBlur} size=\"small\" {...otherProps} />\n        <div className={classnames(\"core-number-input-buttons-container\", showTouchButtons && \"core-number-buttons-for-touch\")}>\n          { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div className=\"core-number-input-button core-number-input-button-up\" tabIndex={-1} onClick={handleUpClick} role=\"presentation\" >\n            <Icon iconSpec={caretUp} />\n          </div>\n          { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div className=\"core-number-input-button core-number-input-button-down\" tabIndex={-1} onClick={handleDownClick} role=\"presentation\" >\n            <Icon iconSpec={caretDown} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\n/** Input component for numbers with up and down buttons to increment and decrement the value.\n * @public\n */\nexport const NumberInput: (props: NumberInputProps) => JSX.Element | null = ForwardRefNumberInput;\n"]}
+{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../../../src/core-react/inputs/numberinput/NumberInput.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 Inputs\r\n */\r\n\r\nimport \"./NumberInput.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Input, InputProps } from \"@itwin/itwinui-react\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { Icon } from \"../../icons/IconComponent\";\r\nimport { SvgCaretDown, SvgCaretDownSmall, SvgCaretUp, SvgCaretUpSmall } from \"@itwin/itwinui-icons-react\";\r\n\r\n/** Step function prototype for [[NumberInput]] component\r\n * @public\r\n */\r\nexport type StepFunctionProp = number | ((direction: string) => number | undefined);\r\n\r\n/** Properties for the [[NumberInput]] component\r\n * @public\r\n */\r\nexport interface NumberInputProps extends Omit<InputProps, \"min\" | \"max\" | \"step\" | \"onChange\"> {\r\n  /** Numeric value, set to `undefined` to show placeholder text */\r\n  value?: number;\r\n  /** CSS class name for the NumberInput component container div */\r\n  containerClassName?: string;\r\n  /** Style for component container div. */\r\n  containerStyle?: React.CSSProperties;\r\n  /** number or function\tNumber.MIN_SAFE_INTEGER */\r\n  min?: number;\r\n  /** number or function\tdefaults to Number.MAX_SAFE_INTEGER */\r\n  max?: number;\r\n  /** increment step value used while incrementing or decrementing (up/down buttons or arrow keys) defaults to 1. */\r\n  step?: StepFunctionProp;\r\n  /** number of decimal places, defaults to 0 */\r\n  precision?: number;\r\n  /** function parseFloat */\r\n  parse?: ((value: string) => number | null | undefined);\r\n  /** function optional formatting function that takes the number value and the internal formatted value in case function just adds prefix or suffix. */\r\n  format?: (num: number | null | undefined, formattedValue: string) => string;\r\n  /** Set to true to \"snap\" to the closest step value while incrementing or decrementing (up/down buttons or arrow keys). */\r\n  snap?: boolean;\r\n  /** Function to call when value is changed. */\r\n  onChange?: (value: number | undefined, stringValue: string) => void;\r\n  /** if true up/down buttons are shown larger and side by side */\r\n  showTouchButtons?: boolean;\r\n  /** Provides ability to return reference to HTMLInputElement */\r\n  ref?: React.Ref<HTMLInputElement>;\r\n  /**\r\n   * Makes this component behave as controlled component.\r\n   * @internal\r\n   */\r\n  isControlled?: boolean;\r\n}\r\n\r\nconst ForwardRefNumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\r\n  function ForwardRefNumberInput(props, ref) {\r\n    const { containerClassName, value, min, max, precision, format, parse,\r\n      onChange, onBlur, onKeyDown, step, snap, showTouchButtons, containerStyle, isControlled, ...otherProps } = props;\r\n    const currentValueRef = React.useRef(value);\r\n\r\n    /**\r\n   * Used internally to parse the argument x to it's numeric representation.\r\n   * If the argument cannot be converted to finite number returns 0; If a\r\n   * \"precision\" prop is specified uses it round the number with that\r\n   * precision (no fixed precision here because the return value is float, not\r\n   * string).\r\n   */\r\n    const parseInternal = React.useCallback((x: string) => {\r\n      let n: number | undefined | null;\r\n\r\n      if (parse)\r\n        n = parse(x);\r\n      if (undefined === n || null === n) {\r\n        n = parseFloat(x);\r\n        if (isNaN(n) || !isFinite(n)) {\r\n          n = 0;\r\n        }\r\n      }\r\n\r\n      const localPrecision = undefined === precision ? 10 : precision;\r\n      const q = Math.pow(10, localPrecision);\r\n      const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\r\n      const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\r\n      n = Math.min(Math.max(n, localMin), localMax);\r\n      n = Math.round(n * q) / q;\r\n\r\n      return n;\r\n    }, [parse, precision, min, max]);\r\n\r\n    /**\r\n   * This is used internally to format a number to its display representation.\r\n   * It will invoke the format function if one is provided.\r\n   */\r\n    const formatInternal = React.useCallback((num: number | undefined | null) => {\r\n      const localPrecision = undefined === precision || null === precision ? 0 : precision;\r\n      const str = undefined === num || null === num ? \"\" : num.toFixed(localPrecision);\r\n\r\n      if (format)\r\n        return format(num, str);\r\n\r\n      return str;\r\n    }, [format, precision]);\r\n\r\n    const [formattedValue, setFormattedValue] = React.useState(() => formatInternal(value));\r\n\r\n    // See if new initialValue props have changed since component mounted\r\n    React.useEffect(() => {\r\n      currentValueRef.current = value;\r\n      const currentFormattedValue = formatInternal(currentValueRef.current);\r\n      setFormattedValue(currentFormattedValue);\r\n    }, [formatInternal, value]);\r\n\r\n    const handleChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\r\n      const newVal = event.currentTarget.value;\r\n      setFormattedValue(newVal);\r\n      isControlled && onChange && onChange(parseInternal(newVal), newVal);\r\n    }, [isControlled, onChange, parseInternal]);\r\n\r\n    const updateValue = React.useCallback((newVal: number) => {\r\n      const newFormattedVal = formatInternal(newVal);\r\n      onChange && onChange(newVal, newFormattedVal);\r\n      setFormattedValue(newFormattedVal);\r\n    }, [onChange, formatInternal]);\r\n\r\n    const updateValueFromString = React.useCallback((strValue: string) => {\r\n      const newVal = parseInternal(strValue);\r\n      updateValue(newVal);\r\n    }, [parseInternal, updateValue]);\r\n\r\n    const handleBlur = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n      const newVal = parseInternal(event.target.value);\r\n      onBlur && onBlur(event);\r\n      updateValue(newVal);\r\n    }, [parseInternal, updateValue, onBlur]);\r\n\r\n    const getIncrementValue = React.useCallback((increment: boolean) => {\r\n      if (typeof step === \"function\") {\r\n        const stepVal = step(increment ? \"up\" : \"down\");\r\n        return stepVal ? stepVal : 1;\r\n      }\r\n\r\n      return !step ? 1 : step;\r\n    }, [step]);\r\n\r\n    /**\r\n   * The internal method that actually sets the new value on the input\r\n   */\r\n    const applyStep = React.useCallback((increment: boolean) => {\r\n      const incrementValue = getIncrementValue(increment);\r\n\r\n      let num = parseInternal(formattedValue) + (increment ? incrementValue : -incrementValue);\r\n      if (snap) {\r\n        num = Math.round(num / incrementValue) * incrementValue;\r\n      }\r\n\r\n      const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\r\n      const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\r\n      num = Math.min(Math.max(num, localMin), localMax);\r\n\r\n      updateValue(num);\r\n    }, [formattedValue, getIncrementValue, max, min, parseInternal, snap, updateValue]);\r\n\r\n    const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\r\n      // istanbul ignore else\r\n      if (event.key === SpecialKey.Enter) {\r\n        updateValueFromString(event.currentTarget.value);\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n      } else if (event.key === SpecialKey.Escape) {\r\n        setFormattedValue(formatInternal(currentValueRef.current));\r\n        event.preventDefault();\r\n      } else if (event.key === SpecialKey.ArrowDown) {\r\n        applyStep(false);\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n      } else if (event.key === SpecialKey.ArrowUp) {\r\n        applyStep(true);\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n      }\r\n      onKeyDown && onKeyDown(event);\r\n    }, [applyStep, formatInternal, updateValueFromString, onKeyDown]);\r\n\r\n    const handleDownClick = React.useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\r\n      applyStep(false);\r\n      event.preventDefault();\r\n    }, [applyStep]);\r\n\r\n    const handleUpClick = React.useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\r\n      applyStep(true);\r\n      event.preventDefault();\r\n    }, [applyStep]);\r\n\r\n    const handleFocus = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n      event.currentTarget.select();\r\n    }, []);\r\n\r\n    const isDisabled = !!otherProps.disabled;\r\n    const containerClasses = classnames(\"core-number-input-container\",\r\n      containerClassName,\r\n      showTouchButtons && \"core-number-buttons-for-touch\",\r\n      isDisabled && \"core-number-input-disabled\",\r\n    );\r\n\r\n    const caretUp = showTouchButtons ? <SvgCaretUp /> : <SvgCaretUpSmall />;\r\n    const caretDown = showTouchButtons ? <SvgCaretDown /> : <SvgCaretDownSmall />;\r\n\r\n    return (\r\n      <div className={containerClasses} style={containerStyle} >\r\n        <Input ref={ref} value={formattedValue} onChange={handleChange} onKeyDown={handleKeyDown} onFocus={handleFocus} onBlur={handleBlur} size=\"small\" {...otherProps} />\r\n        <div className={classnames(\"core-number-input-buttons-container\", showTouchButtons && \"core-number-buttons-for-touch\")}>\r\n          { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\r\n          <div className=\"core-number-input-button core-number-input-button-up\" tabIndex={-1} onClick={handleUpClick} role=\"presentation\" >\r\n            <Icon iconSpec={caretUp} />\r\n          </div>\r\n          { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\r\n          <div className=\"core-number-input-button core-number-input-button-down\" tabIndex={-1} onClick={handleDownClick} role=\"presentation\" >\r\n            <Icon iconSpec={caretDown} />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\n/** Input component for numbers with up and down buttons to increment and decrement the value.\r\n * @public\r\n */\r\nexport const NumberInput: (props: NumberInputProps) => JSX.Element | null = ForwardRefNumberInput;\r\n"]}

package/lib/esm/core-react/inputs/numberinput/NumberInput.scss

@@ -1,88 +1,88 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../../base/base";
-@import "../variables";
-
-.core-number-input-container {
-  position: relative;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-
-  input {
-    margin: 0;
-    padding-right: 1.5em;
-
-    &.iui-input {
-      padding: $uicore-iui-input-padding;
-    }
-  }
-
-  &.core-number-buttons-for-touch {
-    input {
-      padding-right: 3.5em;
-    }
-  }
-
-  .core-number-input-buttons-container {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 20px;
-    height: 100%;
-    @include uicore-centered;
-    flex-direction: column;
-
-    .core-number-input-button {
-      font-size: 8px;
-      outline: none;
-      height: 100%;
-      width: 100%;
-      @include uicore-centered;
-      &:hover {
-        color: var(--iui-color-text-accent-hover);
-        transition-duration: 150ms;
-      }
-      &.core-number-input-button-up {
-        padding-top: 1px;
-      }
-      &.core-number-input-button-down {
-        padding-top: 1px;
-      }
-    }
-
-    &.core-number-buttons-for-touch {
-      width: 3.5em;
-      flex-direction: row-reverse;
-
-      .core-number-input-button {
-        font-size: 1em;
-
-        &:hover {
-          color: unset;
-          transition-duration: unset;
-        }
-
-        &.core-number-input-button-up {
-          padding-top: 2px;
-        }
-        &.core-number-input-button-down {
-          padding-top: 2px;
-        }
-      }
-    }
-  }
-  &.core-number-input-disabled {
-    .core-number-input-button-up {
-      pointer-events: none;
-      color: var(--iui-color-text-disabled);
-    }
-
-    .core-number-input-button-down {
-      pointer-events: none;
-      color: var(--iui-color-text-disabled);
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../../base/base";
+@import "../variables";
+
+.core-number-input-container {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+
+  input {
+    margin: 0;
+    padding-right: 1.5em;
+
+    &.iui-input {
+      padding: $uicore-iui-input-padding;
+    }
+  }
+
+  &.core-number-buttons-for-touch {
+    input {
+      padding-right: 3.5em;
+    }
+  }
+
+  .core-number-input-buttons-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20px;
+    height: 100%;
+    @include uicore-centered;
+    flex-direction: column;
+
+    .core-number-input-button {
+      font-size: 8px;
+      outline: none;
+      height: 100%;
+      width: 100%;
+      @include uicore-centered;
+      &:hover {
+        color: var(--iui-color-text-accent-hover);
+        transition-duration: 150ms;
+      }
+      &.core-number-input-button-up {
+        padding-top: 1px;
+      }
+      &.core-number-input-button-down {
+        padding-top: 1px;
+      }
+    }
+
+    &.core-number-buttons-for-touch {
+      width: 3.5em;
+      flex-direction: row-reverse;
+
+      .core-number-input-button {
+        font-size: 1em;
+
+        &:hover {
+          color: unset;
+          transition-duration: unset;
+        }
+
+        &.core-number-input-button-up {
+          padding-top: 2px;
+        }
+        &.core-number-input-button-down {
+          padding-top: 2px;
+        }
+      }
+    }
+  }
+  &.core-number-input-disabled {
+    .core-number-input-button-up {
+      pointer-events: none;
+      color: var(--iui-color-text-disabled);
+    }
+
+    .core-number-input-button-down {
+      pointer-events: none;
+      color: var(--iui-color-text-disabled);
+    }
+  }
+}