@esri/calcite-components 1.0.0-next.597 → 1.0.0-next.599

package/dist/collection/components/input/input.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.599
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom";
@@ -28,27 +28,27 @@ export class Input {
     /** Specifies the text alignment of the component's value. */
     this.alignment = "start";
     /**
-     * When true, the component is focused on page load.
+     * When `true`, the component is focused on page load.
      *
      * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
      */
     this.autofocus = false;
     /**
-     * When true, a clear button is displayed when the component has a value. The clear button shows by default for `"search"`, `"time"`, and `"date"` types, and will not display for the `"textarea"` type.
+     * When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `"search"`, `"time"`, and `"date"` types, and will not display for the `"textarea"` type.
      */
     this.clearable = false;
     /**
-     * When true, interaction is prevented and the component is displayed with lower opacity.
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
      *
      * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
      */
     this.disabled = false;
     /**
-     * When true, number values are displayed with the locale's group separator.
+     * When `true`, number values are displayed with a group separator corresponding to the language and country format.
      */
     this.groupSeparator = false;
     /**
-     * When true, the component will not be visible.
+     * When `true`, the component will not be visible.
      *
      * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
      */
@@ -59,12 +59,12 @@ export class Input {
      * @default "Loading"
      */
     this.intlLoading = COMMON_TEXT.loading;
-    /** When true, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+    /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
     this.iconFlipRtl = false;
-    /** When true, a busy indicator is displayed. */
+    /** When `true`, a busy indicator is displayed. */
     this.loading = false;
     /**
-     * When true, uses locale formatting for numbers.
+     * When `true`, uses locale formatting for numbers.
      *
      * @internal
      */
@@ -72,12 +72,12 @@ export class Input {
     /** Specifies the placement of the buttons for `type="number"`. */
     this.numberButtonType = "vertical";
     /**
-     * When true, the component's value can be read, but cannot be modified.
+     * When `true`, the component's value can be read, but cannot be modified.
      *
      * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
      */
     this.readOnly = false;
-    /** When true, the component must have a value in order for the form to submit. */
+    /** When `true`, the component must have a value in order for the form to submit. */
     this.required = false;
     /** Specifies the size of the component. */
     this.scale = "m";
@@ -173,11 +173,11 @@ export class Input {
         return;
       }
       const value = nativeEvent.target.value;
-      numberStringFormatter.setOptions({
+      numberStringFormatter.numberFormatOptions = {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
         useGrouping: this.groupSeparator
-      });
+      };
       const delocalizedValue = numberStringFormatter.delocalize(value);
       if (nativeEvent.inputType === "insertFromPaste") {
         if (!isValidNumber(delocalizedValue)) {
@@ -232,11 +232,11 @@ export class Input {
         }
         return;
       }
-      numberStringFormatter.setOptions({
+      numberStringFormatter.numberFormatOptions = {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
         useGrouping: this.groupSeparator
-      });
+      };
       if (event.key === numberStringFormatter.decimal) {
         if (!this.value && !this.childNumberEl.value) {
           return;
@@ -340,11 +340,11 @@ export class Input {
           : newPreviousValue;
     };
     this.setValue = ({ committing = false, nativeEvent, origin, previousValue, value }) => {
-      numberStringFormatter.setOptions({
+      numberStringFormatter.numberFormatOptions = {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
         useGrouping: this.groupSeparator
-      });
+      };
       if (this.type === "number") {
         const delocalizedValue = (this.numberingSystem && this.numberingSystem !== "latn") ||
           defaultNumberingSystem !== "latn"
@@ -669,7 +669,7 @@ export class Input {
               "name": "mdn",
               "text": "[autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)"
             }],
-          "text": "When true, the component is focused on page load."
+          "text": "When `true`, the component is focused on page load."
         },
         "attribute": "autofocus",
         "reflect": true,
@@ -687,7 +687,7 @@ export class Input {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, a clear button is displayed when the component has a value. The clear button shows by default for `\"search\"`, `\"time\"`, and `\"date\"` types, and will not display for the `\"textarea\"` type."
+          "text": "When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `\"search\"`, `\"time\"`, and `\"date\"` types, and will not display for the `\"textarea\"` type."
         },
         "attribute": "clearable",
         "reflect": true,
@@ -708,7 +708,7 @@ export class Input {
               "name": "mdn",
               "text": "[disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)"
             }],
-          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         "attribute": "disabled",
         "reflect": true,
@@ -726,7 +726,7 @@ export class Input {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, number values are displayed with the locale's group separator."
+          "text": "When `true`, number values are displayed with a group separator corresponding to the language and country format."
         },
         "attribute": "group-separator",
         "reflect": true,
@@ -747,7 +747,7 @@ export class Input {
               "name": "mdn",
               "text": "[hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)"
             }],
-          "text": "When true, the component will not be visible."
+          "text": "When `true`, the component will not be visible."
         },
         "attribute": "hidden",
         "reflect": true,
@@ -765,7 +765,7 @@ export class Input {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon."
+          "text": "When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon."
         },
         "attribute": "icon",
         "reflect": true
@@ -820,7 +820,7 @@ export class Input {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
+          "text": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
         },
         "attribute": "icon-flip-rtl",
         "reflect": true,
@@ -855,7 +855,7 @@ export class Input {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, a busy indicator is displayed."
+          "text": "When `true`, a busy indicator is displayed."
         },
         "attribute": "loading",
         "reflect": true,
@@ -921,7 +921,7 @@ export class Input {
               "name": "internal",
               "text": undefined
             }],
-          "text": "When true, uses locale formatting for numbers."
+          "text": "When `true`, uses locale formatting for numbers."
         },
         "attribute": "locale-format",
         "reflect": false,
@@ -1122,7 +1122,7 @@ export class Input {
               "name": "mdn",
               "text": "[readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)"
             }],
-          "text": "When true, the component's value can be read, but cannot be modified."
+          "text": "When `true`, the component's value can be read, but cannot be modified."
         },
         "attribute": "read-only",
         "reflect": true,
@@ -1140,7 +1140,7 @@ export class Input {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component must have a value in order for the form to submit."
+          "text": "When `true`, the component must have a value in order for the form to submit."
         },
         "attribute": "required",
         "reflect": true,

package/dist/collection/components/input/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.599
  */
 export const CSS = {
   loader: "loader",

package/dist/collection/components/input-date-picker/input-date-picker.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.599
  */
 import { h, Host, Build } from "@stencil/core";
 import { getLocaleData, getValueAsDateRange } from "../date-picker/utils";

package/dist/collection/components/input-date-picker/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.599
  */
 export const CSS = {
   menu: "menu-container",

package/dist/collection/components/input-message/input-message.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.599
  */
 import { Host, h } from "@stencil/core";
 import { getElementProp, setRequestedIcon } from "../../utils/dom";
@@ -16,7 +16,7 @@ export class InputMessage {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** When true, the component is active. */
+    /** When `true`, the component is active. */
     this.active = false;
     /** Specifies the size of the component. */
     this.scale = "m";
@@ -76,7 +76,7 @@ export class InputMessage {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is active."
+          "text": "When `true`, the component is active."
         },
         "attribute": "active",
         "reflect": true,

package/dist/collection/components/input-message/interfaces.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.599
  */
 export var StatusIconDefaults;
 (function (StatusIconDefaults) {

package/dist/collection/components/input-number/input-number.css

@@ -234,6 +234,7 @@
 .icon {
   pointer-events: none;
   position: absolute;
+  z-index: 1;
   display: block;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
@@ -448,26 +449,6 @@
   align-items: center;
 }
 
-.resize-icon-wrapper {
-  inset-block-end: 2px;
-  inset-inline-end: 2px;
-  pointer-events: none;
-  position: absolute;
-  block-size: 0.75rem;
-  inline-size: 0.75rem;
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-3);
-}
-.resize-icon-wrapper calcite-icon {
-  inset-block-end: 0.25rem;
-  inset-inline-end: 0.25rem;
-  transform: rotate(-45deg);
-}
-
-.calcite--rtl .resize-icon-wrapper calcite-icon {
-  transform: rotate(45deg);
-}
-
 :host(.no-bottom-border) input {
   border-block-end-width: 0px;
 }

package/dist/collection/components/input-number/input-number.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.599
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom";
@@ -28,27 +28,27 @@ export class InputNumber {
     /** Specifies the text alignment of the component's value. */
     this.alignment = "start";
     /**
-     * When true, the component is focused on page load.
+     * When `true`, the component is focused on page load.
      *
      * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
      */
     this.autofocus = false;
     /**
-     * When true, a clear button is displayed when the component has a value.
+     * When `true`, a clear button is displayed when the component has a value.
      */
     this.clearable = false;
     /**
-     * When true, interaction is prevented and the component is displayed with lower opacity.
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
      *
      * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
      */
     this.disabled = false;
     /**
-     * When true, number values are displayed with the locale's group separator.
+     * When `true`, number values are displayed with a group separator corresponding to the language and country format.
      */
     this.groupSeparator = false;
     /**
-     * When true, the component will not be visible.
+     * When `true`, the component will not be visible.
      *
      * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
      */
@@ -59,9 +59,9 @@ export class InputNumber {
      * @default "Loading"
      */
     this.intlLoading = COMMON_TEXT.loading;
-    /** When true, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+    /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
     this.iconFlipRtl = false;
-    /** When true, the component is in the loading state and `calcite-progress` is displayed. */
+    /** When `true`, the component is in the loading state and `calcite-progress` is displayed. */
     this.loading = false;
     /**
      * Toggles locale formatting for numbers.
@@ -72,12 +72,12 @@ export class InputNumber {
     /** Specifies the placement of the buttons. */
     this.numberButtonType = "vertical";
     /**
-     * When true, the component's value can be read, but cannot be modified.
+     * When `true`, the component's value can be read, but cannot be modified.
      *
      * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
      */
     this.readOnly = false;
-    /** When true, the component must have a value in order for the form to submit. */
+    /** When `true`, the component must have a value in order for the form to submit. */
     this.required = false;
     /** Specifies the size of the component. */
     this.scale = "m";
@@ -147,11 +147,11 @@ export class InputNumber {
         return;
       }
       const value = nativeEvent.target.value;
-      numberStringFormatter.setOptions({
+      numberStringFormatter.numberFormatOptions = {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
         useGrouping: this.groupSeparator
-      });
+      };
       const delocalizedValue = numberStringFormatter.delocalize(value);
       if (nativeEvent.inputType === "insertFromPaste") {
         if (!isValidNumber(delocalizedValue)) {
@@ -206,11 +206,11 @@ export class InputNumber {
         }
         return;
       }
-      numberStringFormatter.setOptions({
+      numberStringFormatter.numberFormatOptions = {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
         useGrouping: this.groupSeparator
-      });
+      };
       if (event.key === numberStringFormatter.decimal) {
         if (!this.value && !this.childNumberEl.value) {
           return;
@@ -294,11 +294,11 @@ export class InputNumber {
       this.previousValue = isValidNumber(newPreviousValue) ? newPreviousValue : "";
     };
     this.setNumberValue = ({ committing = false, nativeEvent, origin, previousValue, value }) => {
-      numberStringFormatter.setOptions({
+      numberStringFormatter.numberFormatOptions = {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
         useGrouping: this.groupSeparator
-      });
+      };
       const sanitizedValue = sanitizeNumberString((this.numberingSystem && this.numberingSystem !== "latn") || defaultNumberingSystem !== "latn"
         ? numberStringFormatter.delocalize(value)
         : value);
@@ -571,7 +571,7 @@ export class InputNumber {
               "name": "mdn",
               "text": "[autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)"
             }],
-          "text": "When true, the component is focused on page load."
+          "text": "When `true`, the component is focused on page load."
         },
         "attribute": "autofocus",
         "reflect": true,
@@ -589,7 +589,7 @@ export class InputNumber {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, a clear button is displayed when the component has a value."
+          "text": "When `true`, a clear button is displayed when the component has a value."
         },
         "attribute": "clearable",
         "reflect": true,
@@ -610,7 +610,7 @@ export class InputNumber {
               "name": "mdn",
               "text": "[disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)"
             }],
-          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         "attribute": "disabled",
         "reflect": true,
@@ -628,7 +628,7 @@ export class InputNumber {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, number values are displayed with the locale's group separator."
+          "text": "When `true`, number values are displayed with a group separator corresponding to the language and country format."
         },
         "attribute": "group-separator",
         "reflect": true,
@@ -649,7 +649,7 @@ export class InputNumber {
               "name": "mdn",
               "text": "[hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)"
             }],
-          "text": "When true, the component will not be visible."
+          "text": "When `true`, the component will not be visible."
         },
         "attribute": "hidden",
         "reflect": true,
@@ -667,7 +667,7 @@ export class InputNumber {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon."
+          "text": "When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon."
         },
         "attribute": "icon",
         "reflect": true
@@ -722,7 +722,7 @@ export class InputNumber {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
+          "text": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
         },
         "attribute": "icon-flip-rtl",
         "reflect": true,
@@ -757,7 +757,7 @@ export class InputNumber {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is in the loading state and `calcite-progress` is displayed."
+          "text": "When `true`, the component is in the loading state and `calcite-progress` is displayed."
         },
         "attribute": "loading",
         "reflect": true,
@@ -1004,7 +1004,7 @@ export class InputNumber {
               "name": "mdn",
               "text": "[readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)"
             }],
-          "text": "When true, the component's value can be read, but cannot be modified."
+          "text": "When `true`, the component's value can be read, but cannot be modified."
         },
         "attribute": "read-only",
         "reflect": true,
@@ -1022,7 +1022,7 @@ export class InputNumber {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component must have a value in order for the form to submit."
+          "text": "When `true`, the component must have a value in order for the form to submit."
         },
         "attribute": "required",
         "reflect": true,

package/dist/collection/components/input-number/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.599
  */
 export const CSS = {
   loader: "loader",

package/dist/collection/components/input-text/input-text.css

@@ -238,6 +238,7 @@ input:focus {
 .icon {
   pointer-events: none;
   position: absolute;
+  z-index: 1;
   display: block;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
@@ -347,26 +348,6 @@ input[type=text]::-ms-reveal {
   align-items: center;
 }
 
-.resize-icon-wrapper {
-  inset-block-end: 2px;
-  inset-inline-end: 2px;
-  pointer-events: none;
-  position: absolute;
-  block-size: 0.75rem;
-  inline-size: 0.75rem;
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-3);
-}
-.resize-icon-wrapper calcite-icon {
-  inset-block-end: 0.25rem;
-  inset-inline-end: 0.25rem;
-  transform: rotate(-45deg);
-}
-
-.calcite--rtl .resize-icon-wrapper calcite-icon {
-  transform: rotate(45deg);
-}
-
 :host(.no-bottom-border) input {
   border-block-end-width: 0px;
 }