@itwin/core-react 3.6.0-dev.34 → 3.6.0-dev.36

package/lib/cjs/core-react/inputs/labeled-input.scss

@@ -1,103 +1,103 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "~@itwin/itwinui-css/scss/style/typography";
-
-@mixin uicore-inputs-labeled-input {
-
-  display:                    block;
-  padding:                    0;
-  margin:                     0 0 $uicore-unbordered-padding;
-  text-align:                 left;
-  font-size:                  $iui-font-size;
-  font-weight:                $iui-font-weight-normal;
-  cursor:                     pointer;
-
-  > .uicore-label {
-
-    padding:                0;
-    margin:                 0;
-    border:                 0 none transparent;
-    display:                block;
-    font-size:              $iui-font-size;
-    font-weight:            $iui-font-weight-semibold;
-    line-height:            $uicore-line-height;
-    text-align:             left;
-    color:                  $buic-text-color;
-  }
-
-  > .input {
-
-    position:               relative;
-    /// Needed to vertically align the icon:
-    display:                inline-block;
-    width:                  100%;
-
-    &.with-icon {
-
-      > input,
-      > .bwx-inputs-input {
-
-        padding-right:  $uicore-bordered-padding + $uicore-line-height;
-        margin-right: $uicore-bordered-padding + $uicore-line-height;
-      }
-    }
-
-    > .icon {
-
-      display:            flex;
-      align-items:        center;
-      position:           absolute;
-      right:              0;
-      top:                0;
-      bottom:             0;
-      padding:            $uicore-bordered-padding;
-
-      font-size:          $iui-font-size;
-      font-weight:        normal;
-    }
-  }
-
-  > .uicore-message {
-
-    display:                block;
-    font-size:              $iui-font-size-small;
-    line-height:            $uicore-line-height;
-    color:                  $buic-text-color-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";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+@mixin uicore-inputs-labeled-input {
+
+  display:                    block;
+  padding:                    0;
+  margin:                     0 0 $uicore-unbordered-padding;
+  text-align:                 left;
+  font-size:                  $iui-font-size;
+  font-weight:                $iui-font-weight-normal;
+  cursor:                     pointer;
+
+  > .uicore-label {
+
+    padding:                0;
+    margin:                 0;
+    border:                 0 none transparent;
+    display:                block;
+    font-size:              $iui-font-size;
+    font-weight:            $iui-font-weight-semibold;
+    line-height:            $uicore-line-height;
+    text-align:             left;
+    color:                  $buic-text-color;
+  }
+
+  > .input {
+
+    position:               relative;
+    /// Needed to vertically align the icon:
+    display:                inline-block;
+    width:                  100%;
+
+    &.with-icon {
+
+      > input,
+      > .bwx-inputs-input {
+
+        padding-right:  $uicore-bordered-padding + $uicore-line-height;
+        margin-right: $uicore-bordered-padding + $uicore-line-height;
+      }
+    }
+
+    > .icon {
+
+      display:            flex;
+      align-items:        center;
+      position:           absolute;
+      right:              0;
+      top:                0;
+      bottom:             0;
+      padding:            $uicore-bordered-padding;
+
+      font-size:          $iui-font-size;
+      font-weight:        normal;
+    }
+  }
+
+  > .uicore-message {
+
+    display:                block;
+    font-size:              $iui-font-size-small;
+    line-height:            $uicore-line-height;
+    color:                  $buic-text-color-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/cjs/core-react/inputs/labeled-textarea.scss

@@ -1,77 +1,77 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "~@itwin/itwinui-css/scss/style/typography";
-
-@mixin uicore-inputs-labeled-textarea {
-
-  display:                    block;
-  padding:                    0;
-  margin:                     0 0 $uicore-unbordered-padding;
-  line-height:                0;  /// A trick to remove extra padding-bottom in Chrome and FF
-  text-align:                 left;
-  cursor:                     pointer;
-  font-weight:                normal;
-
-  > .uicore-label {
-
-    padding:                0;
-    margin:                 0;
-    border:                 0 none transparent;
-    display:                block;
-    font-size:              $iui-font-size;
-    font-weight:            $iui-font-weight-semibold;
-    line-height:            $uicore-line-height;
-    text-align:             left;
-    color:                  $buic-text-color;
-  }
-
-  > .uicore-inputs-textarea {
-
-    display:                inline-block;
-    width:                  100%;
-  }
-
-  > .uicore-message {
-
-    display:                block;
-    font-size:              $iui-font-size-small;
-    line-height:            $uicore-line-height;
-    color:                  $buic-text-color-muted; // $uicore-gray;
-  }
-
-
-  /// 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} {
-      > textarea,
-      > .uicore-inputs-textarea {
-
-        border-color:       rgb($color);
-        box-shadow:         $buic-inputs-border 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";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+@mixin uicore-inputs-labeled-textarea {
+
+  display:                    block;
+  padding:                    0;
+  margin:                     0 0 $uicore-unbordered-padding;
+  line-height:                0;  /// A trick to remove extra padding-bottom in Chrome and FF
+  text-align:                 left;
+  cursor:                     pointer;
+  font-weight:                normal;
+
+  > .uicore-label {
+
+    padding:                0;
+    margin:                 0;
+    border:                 0 none transparent;
+    display:                block;
+    font-size:              $iui-font-size;
+    font-weight:            $iui-font-weight-semibold;
+    line-height:            $uicore-line-height;
+    text-align:             left;
+    color:                  $buic-text-color;
+  }
+
+  > .uicore-inputs-textarea {
+
+    display:                inline-block;
+    width:                  100%;
+  }
+
+  > .uicore-message {
+
+    display:                block;
+    font-size:              $iui-font-size-small;
+    line-height:            $uicore-line-height;
+    color:                  $buic-text-color-muted; // $uicore-gray;
+  }
+
+
+  /// 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} {
+      > textarea,
+      > .uicore-inputs-textarea {
+
+        border-color:       rgb($color);
+        box-shadow:         $buic-inputs-border 0px 1px 1px inset;
+
+        &:focus {
+
+          border-color:     rgb($color);
+          box-shadow:       rgba( $color, $uicore-opacity-boxshadow ) 0px 0px 0px 2px;
+        }
+      }
+    }
+  }
+}

package/lib/cjs/core-react/inputs/numberinput/NumberInput.d.ts

@@ -1,46 +1,46 @@
-/** @packageDocumentation
- * @module Inputs
- */
-import "./NumberInput.scss";
-import * as React from "react";
-import { InputProps } from "@itwin/itwinui-react";
-/** Step function prototype for [[NumberInput]] component
- * @public
- */
-export declare type StepFunctionProp = number | ((direction: string) => number | undefined);
-/** Properties for the [[NumberInput]] component
- * @public
- */
-export interface NumberInputProps extends Omit<InputProps, "min" | "max" | "step" | "onChange"> {
-    /** Numeric value, set to `undefined` to show placeholder text */
-    value?: number;
-    /** CSS class name for the NumberInput component container div */
-    containerClassName?: string;
-    /** Style for component container div. */
-    containerStyle?: React.CSSProperties;
-    /** number or function	Number.MIN_SAFE_INTEGER */
-    min?: number;
-    /** number or function	defaults to Number.MAX_SAFE_INTEGER */
-    max?: number;
-    /** increment step value used while incrementing or decrementing (up/down buttons or arrow keys) defaults to 1. */
-    step?: StepFunctionProp;
-    /** number of decimal places, defaults to 0 */
-    precision?: number;
-    /** function parseFloat */
-    parse?: ((value: string) => number | null | undefined);
-    /** function optional formatting function that takes the number value and the internal formatted value in case function just adds prefix or suffix. */
-    format?: (num: number | null | undefined, formattedValue: string) => string;
-    /** Set to true to "snap" to the closest step value while incrementing or decrementing (up/down buttons or arrow keys). */
-    snap?: boolean;
-    /** Function to call when value is changed. */
-    onChange?: (value: number | undefined, stringValue: string) => void;
-    /** if true up/down buttons are shown larger and side by side */
-    showTouchButtons?: boolean;
-    /** Provides ability to return reference to HTMLInputElement */
-    ref?: React.Ref<HTMLInputElement>;
-}
-/** Input component for numbers with up and down buttons to increment and decrement the value.
- * @public
- */
-export declare const NumberInput: (props: NumberInputProps) => JSX.Element | null;
+/** @packageDocumentation
+ * @module Inputs
+ */
+import "./NumberInput.scss";
+import * as React from "react";
+import { InputProps } from "@itwin/itwinui-react";
+/** Step function prototype for [[NumberInput]] component
+ * @public
+ */
+export declare type StepFunctionProp = number | ((direction: string) => number | undefined);
+/** Properties for the [[NumberInput]] component
+ * @public
+ */
+export interface NumberInputProps extends Omit<InputProps, "min" | "max" | "step" | "onChange"> {
+    /** Numeric value, set to `undefined` to show placeholder text */
+    value?: number;
+    /** CSS class name for the NumberInput component container div */
+    containerClassName?: string;
+    /** Style for component container div. */
+    containerStyle?: React.CSSProperties;
+    /** number or function	Number.MIN_SAFE_INTEGER */
+    min?: number;
+    /** number or function	defaults to Number.MAX_SAFE_INTEGER */
+    max?: number;
+    /** increment step value used while incrementing or decrementing (up/down buttons or arrow keys) defaults to 1. */
+    step?: StepFunctionProp;
+    /** number of decimal places, defaults to 0 */
+    precision?: number;
+    /** function parseFloat */
+    parse?: ((value: string) => number | null | undefined);
+    /** function optional formatting function that takes the number value and the internal formatted value in case function just adds prefix or suffix. */
+    format?: (num: number | null | undefined, formattedValue: string) => string;
+    /** Set to true to "snap" to the closest step value while incrementing or decrementing (up/down buttons or arrow keys). */
+    snap?: boolean;
+    /** Function to call when value is changed. */
+    onChange?: (value: number | undefined, stringValue: string) => void;
+    /** if true up/down buttons are shown larger and side by side */
+    showTouchButtons?: boolean;
+    /** Provides ability to return reference to HTMLInputElement */
+    ref?: React.Ref<HTMLInputElement>;
+}
+/** Input component for numbers with up and down buttons to increment and decrement the value.
+ * @public
+ */
+export declare const NumberInput: (props: NumberInputProps) => JSX.Element | null;
 //# sourceMappingURL=NumberInput.d.ts.map