@esri/calcite-components 1.5.0-next.8 → 1.5.0

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

@@ -1,20 +1,20 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.8
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0
  */
-import { h, Host } from "@stencil/core";
-import { getElementDir, getSlotted, isPrimaryPointerButton, setRequestedIcon } from "../../utils/dom";
-import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
-import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
+import { h, Host, } from "@stencil/core";
+import { getElementDir, getSlotted, isPrimaryPointerButton, setRequestedIcon, } from "../../utils/dom";
+import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm, } from "../../utils/form";
+import { connectInteractive, disconnectInteractive, updateHostInteraction, } from "../../utils/interactive";
 import { numberKeys } from "../../utils/key";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
-import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
-import { connectLocalized, defaultNumberingSystem, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
-import { BigDecimal, isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable";
+import { connectLocalized, disconnectLocalized, numberStringFormatter, } from "../../utils/locale";
+import { addLocalizedTrailingDecimalZeros, BigDecimal, isValidNumber, parseNumberString, sanitizeNumberString, } from "../../utils/number";
 import { createObserver } from "../../utils/observers";
 import { CSS_UTILITY } from "../../utils/resources";
-import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
+import { connectMessages, disconnectMessages, setUpMessages, updateMessages, } from "../../utils/t9n";
 import { CSS, SLOTS } from "./resources";
 /**
  * @slot action - A slot for positioning a button next to the component.
@@ -48,7 +48,7 @@ export class InputNumber {
         committing: true,
         nativeEvent,
         origin: "user",
-        value: ""
+        value: "",
       });
     };
     this.emitChangeIfUserModified = () => {
@@ -81,7 +81,7 @@ export class InputNumber {
       numberStringFormatter.numberFormatOptions = {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
-        useGrouping: this.groupSeparator
+        useGrouping: this.groupSeparator,
       };
       const delocalizedValue = numberStringFormatter.delocalize(value);
       if (nativeEvent.inputType === "insertFromPaste") {
@@ -91,7 +91,7 @@ export class InputNumber {
         this.setNumberValue({
           nativeEvent,
           origin: "user",
-          value: parseNumberString(delocalizedValue)
+          value: parseNumberString(delocalizedValue),
         });
         this.childNumberEl.value = this.localizedValue;
       }
@@ -99,7 +99,7 @@ export class InputNumber {
         this.setNumberValue({
           nativeEvent,
           origin: "user",
-          value: delocalizedValue
+          value: delocalizedValue,
         });
       }
     };
@@ -125,7 +125,7 @@ export class InputNumber {
         "Delete",
         "Enter",
         "Escape",
-        "Tab"
+        "Tab",
       ];
       if (event.altKey || event.ctrlKey || event.metaKey) {
         return;
@@ -140,7 +140,7 @@ export class InputNumber {
       numberStringFormatter.numberFormatOptions = {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
-        useGrouping: this.groupSeparator
+        useGrouping: this.groupSeparator,
       };
       if (event.key === numberStringFormatter.decimal) {
         if (!this.value && !this.childNumberEl.value) {
@@ -208,7 +208,7 @@ export class InputNumber {
       if (event.target.name === this.name) {
         this.setNumberValue({
           value: event.target.value,
-          origin: "direct"
+          origin: "direct",
         });
       }
       event.stopPropagation();
@@ -228,24 +228,29 @@ export class InputNumber {
     this.setPreviousNumberValue = (value) => {
       this.previousValue = this.normalizeValue(value);
     };
-    this.setNumberValue = ({ committing = false, nativeEvent, origin, previousValue, value }) => {
+    this.setNumberValue = ({ committing = false, nativeEvent, origin, previousValue, value, }) => {
       numberStringFormatter.numberFormatOptions = {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
-        useGrouping: this.groupSeparator
+        useGrouping: this.groupSeparator,
       };
-      const sanitizedValue = sanitizeNumberString(
-      // no need to delocalize a string that ia already in latn numerals
-      (this.numberingSystem && this.numberingSystem !== "latn") || defaultNumberingSystem !== "latn"
-        ? numberStringFormatter.delocalize(value)
-        : value);
+      const isValueDeleted = this.previousValue?.length > value.length || this.value?.length > value.length;
+      const hasTrailingDecimalSeparator = value.charAt(value.length - 1) === ".";
+      const sanitizedValue = hasTrailingDecimalSeparator && isValueDeleted ? value : sanitizeNumberString(value);
       const newValue = value && !sanitizedValue
         ? isValidNumber(this.previousValue)
           ? this.previousValue
           : ""
         : sanitizedValue;
-      const newLocalizedValue = numberStringFormatter.localize(newValue);
-      this.localizedValue = newLocalizedValue;
+      let newLocalizedValue = numberStringFormatter.localize(newValue);
+      if (origin !== "connected" && !hasTrailingDecimalSeparator) {
+        newLocalizedValue = addLocalizedTrailingDecimalZeros(newLocalizedValue, newValue, numberStringFormatter);
+      }
+      // adds localized trailing decimal separator
+      this.localizedValue =
+        hasTrailingDecimalSeparator && isValueDeleted
+          ? `${newLocalizedValue}${numberStringFormatter.decimal}`
+          : newLocalizedValue;
       this.setPreviousNumberValue(previousValue ?? this.value);
       this.previousValueOrigin = origin;
       this.userChangedValue = origin === "user" && this.value !== newValue;
@@ -332,7 +337,7 @@ export class InputNumber {
           ? ""
           : isValidNumber(newValue)
             ? newValue
-            : this.previousValue || ""
+            : this.previousValue || "",
       });
       this.warnAboutInvalidNumberValue(newValue);
     }
@@ -349,7 +354,7 @@ export class InputNumber {
     numberStringFormatter.numberFormatOptions = {
       locale,
       numberingSystem: this.numberingSystem,
-      useGrouping: false
+      useGrouping: false,
     };
   }
   //--------------------------------------------------------------------------
@@ -372,7 +377,7 @@ export class InputNumber {
     this.warnAboutInvalidNumberValue(this.value);
     this.setNumberValue({
       origin: "connected",
-      value: isValidNumber(this.value) ? this.value : ""
+      value: isValidNumber(this.value) ? this.value : "",
     });
     this.mutationObserver?.observe(this.el, { childList: true });
     this.setDisabledAction();
@@ -401,7 +406,7 @@ export class InputNumber {
     if (property === "value" && newValue && !isValidNumber(newValue)) {
       this.setNumberValue({
         origin: "reset",
-        value: oldValue
+        value: oldValue,
       });
       return false;
     }
@@ -417,7 +422,7 @@ export class InputNumber {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.childNumberEl?.focus();
   }
   /** Selects the text of the component's `value`. */
@@ -448,13 +453,13 @@ export class InputNumber {
       committing: true,
       nativeEvent,
       origin: "user",
-      value: finalValue
+      value: finalValue,
     });
   }
   onFormReset() {
     this.setNumberValue({
       origin: "reset",
-      value: this.defaultValue
+      value: this.defaultValue,
     });
   }
   syncHiddenFormInput(input) {
@@ -499,11 +504,11 @@ export class InputNumber {
     const isHorizontalNumberButton = this.numberButtonType === "horizontal";
     const numberButtonsHorizontalUp = (h("button", { "aria-hidden": "true", class: {
         [CSS.numberButtonItem]: true,
-        [CSS.buttonItemHorizontal]: isHorizontalNumberButton
+        [CSS.buttonItemHorizontal]: isHorizontalNumberButton,
       }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerUpAndOutHandler, onPointerUp: this.nudgeButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-up", scale: this.scale === "l" ? "m" : "s" })));
     const numberButtonsHorizontalDown = (h("button", { "aria-hidden": "true", class: {
         [CSS.numberButtonItem]: true,
-        [CSS.buttonItemHorizontal]: isHorizontalNumberButton
+        [CSS.buttonItemHorizontal]: isHorizontalNumberButton,
       }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerUpAndOutHandler, onPointerUp: this.nudgeButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-down", scale: this.scale === "l" ? "m" : "s" })));
     const numberButtonsVertical = (h("div", { class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
     const prefixText = h("div", { class: CSS.prefix }, this.prefixText);

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.5.0-next.8
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0
  */
 export const CSS = {
   loader: "loader",
@@ -17,8 +17,8 @@ export const CSS = {
   inputWrapper: "wrapper",
   actionWrapper: "action-wrapper",
   resizeIconWrapper: "resize-icon-wrapper",
-  numberButtonItem: "number-button-item"
+  numberButtonItem: "number-button-item",
 };
 export const SLOTS = {
-  action: "action"
+  action: "action",
 };

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

@@ -1,118 +1,8 @@
 /* mixins & extensions */
-@keyframes in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes in-down {
-  0% {
-    opacity: 0;
-    transform: translate3D(0, -5px, 0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3D(0, 0, 0);
-  }
-}
-@keyframes in-up {
-  0% {
-    opacity: 0;
-    transform: translate3D(0, 5px, 0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3D(0, 0, 0);
-  }
-}
-@keyframes in-right {
-  0% {
-    opacity: 0;
-    transform: translate3D(-5px, 0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3D(0, 0, 0);
-  }
-}
-@keyframes in-left {
-  0% {
-    opacity: 0;
-    transform: translate3D(5px, 0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3D(0, 0, 0);
-  }
-}
-@keyframes in-scale {
-  0% {
-    opacity: 0;
-    transform: scale3D(0.95, 0.95, 1);
-  }
-  100% {
-    opacity: 1;
-    transform: scale3D(1, 1, 1);
-  }
-}
-:root {
-  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
-  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
-  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
-  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
-  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
-}
-
-.calcite-animate {
-  opacity: 0;
-  animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
-}
-
-.calcite-animate__in {
-  animation-name: in;
-}
-
-.calcite-animate__in-down {
-  animation-name: in-down;
-}
-
-.calcite-animate__in-up {
-  animation-name: in-up;
-}
-
-.calcite-animate__in-right {
-  animation-name: in-right;
-}
-
-.calcite-animate__in-left {
-  animation-name: in-left;
-}
-
-.calcite-animate__in-scale {
-  animation-name: in-scale;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --calcite-internal-duration-factor: 0.01;
-  }
-}
 /* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */
-:root {
-  --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
-}
-
-:host([hidden]) {
-  display: none;
-}
-
 :host([disabled]) {
   cursor: default;
   -webkit-user-select: none;
@@ -445,4 +335,12 @@ input[type=text]::-ms-reveal {
   transform: none !important;
   -webkit-appearance: none !important;
   z-index: -1 !important;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+[hidden] {
+  display: none;
 }

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

@@ -1,18 +1,18 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.8
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0
  */
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { getElementDir, getSlotted, setRequestedIcon } from "../../utils/dom";
-import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
-import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
+import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm, } from "../../utils/form";
+import { connectInteractive, disconnectInteractive, updateHostInteraction, } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
-import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable";
 import { connectLocalized, disconnectLocalized } from "../../utils/locale";
 import { createObserver } from "../../utils/observers";
 import { CSS_UTILITY } from "../../utils/resources";
-import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
+import { connectMessages, disconnectMessages, setUpMessages, updateMessages, } from "../../utils/t9n";
 import { CSS, SLOTS } from "./resources";
 /**
  * @slot action - A slot for positioning a button next to the component.
@@ -46,7 +46,7 @@ export class InputText {
         committing: true,
         nativeEvent,
         origin: "user",
-        value: ""
+        value: "",
       });
     };
     this.emitChangeIfUserModified = () => {
@@ -58,7 +58,7 @@ export class InputText {
     this.inputTextBlurHandler = () => {
       this.calciteInternalInputTextBlur.emit({
         element: this.childEl,
-        value: this.value
+        value: this.value,
       });
       this.emitChangeIfUserModified();
     };
@@ -74,7 +74,7 @@ export class InputText {
     this.inputTextFocusHandler = () => {
       this.calciteInternalInputTextFocus.emit({
         element: this.childEl,
-        value: this.value
+        value: this.value,
       });
     };
     this.inputTextInputHandler = (nativeEvent) => {
@@ -84,7 +84,7 @@ export class InputText {
       this.setValue({
         nativeEvent,
         origin: "user",
-        value: nativeEvent.target.value
+        value: nativeEvent.target.value,
       });
     };
     this.inputTextKeyDownHandler = (event) => {
@@ -99,7 +99,7 @@ export class InputText {
       if (event.target.name === this.name) {
         this.setValue({
           value: event.target.value,
-          origin: "direct"
+          origin: "direct",
         });
       }
       event.stopPropagation();
@@ -119,7 +119,7 @@ export class InputText {
     this.setPreviousValue = (value) => {
       this.previousValue = value;
     };
-    this.setValue = ({ committing = false, nativeEvent, origin, previousValue, value }) => {
+    this.setValue = ({ committing = false, nativeEvent, origin, previousValue, value, }) => {
       this.setPreviousValue(previousValue ?? this.value);
       this.previousValueOrigin = origin;
       this.userChangedValue = origin === "user" && value !== this.value;
@@ -181,7 +181,7 @@ export class InputText {
       this.setValue({
         origin: "direct",
         previousValue,
-        value: !newValue ? "" : newValue
+        value: !newValue ? "" : newValue,
       });
     }
     this.userChangedValue = false;
@@ -243,7 +243,7 @@ export class InputText {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.childEl?.focus();
   }
   /** Selects the text of the component's `value`. */
@@ -256,7 +256,7 @@ export class InputText {
   onFormReset() {
     this.setValue({
       origin: "reset",
-      value: this.defaultValue
+      value: this.defaultValue,
     });
   }
   syncHiddenFormInput(input) {
@@ -297,7 +297,7 @@ export class InputText {
     const suffixText = h("div", { class: CSS.suffix }, this.suffixText);
     const childEl = (h("input", { "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.autofocus ? true : null, class: {
         [CSS.editingEnabled]: this.editingEnabled,
-        [CSS.inlineChild]: !!this.inlineEditableEl
+        [CSS.inlineChild]: !!this.inlineEditableEl,
       }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, maxLength: this.maxLength, minLength: this.minLength, name: this.name, onBlur: this.inputTextBlurHandler, onFocus: this.inputTextFocusHandler, onInput: this.inputTextInputHandler, onKeyDown: this.inputTextKeyDownHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, required: this.required ? true : null, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: "text", value: this.value,
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setChildElRef }));

package/dist/collection/components/input-text/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.5.0-next.8
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0
  */
 export const CSS = {
   loader: "loader",
@@ -14,8 +14,8 @@ export const CSS = {
   wrapper: "element-wrapper",
   inputWrapper: "wrapper",
   actionWrapper: "action-wrapper",
-  resizeIconWrapper: "resize-icon-wrapper"
+  resizeIconWrapper: "resize-icon-wrapper",
 };
 export const SLOTS = {
-  action: "action"
+  action: "action",
 };

package/dist/collection/components/input-time-picker/input-time-picker.css

@@ -1,118 +1,8 @@
 /* mixins & extensions */
-@keyframes in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes in-down {
-  0% {
-    opacity: 0;
-    transform: translate3D(0, -5px, 0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3D(0, 0, 0);
-  }
-}
-@keyframes in-up {
-  0% {
-    opacity: 0;
-    transform: translate3D(0, 5px, 0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3D(0, 0, 0);
-  }
-}
-@keyframes in-right {
-  0% {
-    opacity: 0;
-    transform: translate3D(-5px, 0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3D(0, 0, 0);
-  }
-}
-@keyframes in-left {
-  0% {
-    opacity: 0;
-    transform: translate3D(5px, 0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3D(0, 0, 0);
-  }
-}
-@keyframes in-scale {
-  0% {
-    opacity: 0;
-    transform: scale3D(0.95, 0.95, 1);
-  }
-  100% {
-    opacity: 1;
-    transform: scale3D(1, 1, 1);
-  }
-}
-:root {
-  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
-  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
-  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
-  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
-  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
-}
-
-.calcite-animate {
-  opacity: 0;
-  animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
-}
-
-.calcite-animate__in {
-  animation-name: in;
-}
-
-.calcite-animate__in-down {
-  animation-name: in-down;
-}
-
-.calcite-animate__in-up {
-  animation-name: in-up;
-}
-
-.calcite-animate__in-right {
-  animation-name: in-right;
-}
-
-.calcite-animate__in-left {
-  animation-name: in-left;
-}
-
-.calcite-animate__in-scale {
-  animation-name: in-scale;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --calcite-internal-duration-factor: 0.01;
-  }
-}
 /* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */
-:root {
-  --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
-}
-
-:host([hidden]) {
-  display: none;
-}
-
 :host([disabled]) {
   cursor: default;
   -webkit-user-select: none;
@@ -174,4 +64,12 @@
   inset-inline-end: 0;
   inset-block: 0;
   padding-inline: var(--calcite-toggle-spacing);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+[hidden] {
+  display: none;
 }