@esri/calcite-components 1.0.0-beta.72 → 1.0.0-beta.73

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

@@ -190,6 +190,14 @@ export class CalciteInput {
           return;
         }
       }
+      if (/[eE]/.test(event.key)) {
+        if (!this.value && !this.childNumberEl.value) {
+          return;
+        }
+        if (this.value && !/[eE]/.test(this.childNumberEl.value)) {
+          return;
+        }
+      }
       event.preventDefault();
     };
     this.nudgeNumberValue = (direction, nativeEvent) => {
@@ -201,7 +209,7 @@ export class CalciteInput {
       const valueNudgeDelayInMs = 100;
       this.incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent);
       let firstValueNudge = true;
-      this.nudgeNumberValueIntervalId = setInterval(() => {
+      this.nudgeNumberValueIntervalId = window.setInterval(() => {
         if (firstValueNudge) {
           firstValueNudge = false;
           return;
@@ -210,7 +218,7 @@ export class CalciteInput {
       }, valueNudgeDelayInMs);
     };
     this.numberButtonMouseUpAndMouseOutHandler = () => {
-      clearInterval(this.nudgeNumberValueIntervalId);
+      window.clearInterval(this.nudgeNumberValueIntervalId);
     };
     this.numberButtonMouseDownHandler = (event) => {
       event.preventDefault();
@@ -228,18 +236,19 @@ export class CalciteInput {
     };
     this.setValue = (value, nativeEvent, committing = false) => {
       const previousValue = this.value;
-      this.value = this.type === "number" ? sanitizeNumberString(value) : value;
       if (this.type === "number") {
-        this.setLocalizedValue(this.value);
+        const sanitizedValue = sanitizeNumberString(value);
+        this.value = sanitizedValue;
+        this.setLocalizedValue(sanitizedValue);
+      }
+      else {
+        this.value = value;
       }
       if (nativeEvent) {
-        if (this.type === "number") {
-          value = sanitizeNumberString(value);
-        }
         const calciteInputInputEvent = this.calciteInputInput.emit({
           element: this.childEl,
           nativeEvent,
-          value
+          value: this.value
         });
         if (calciteInputInputEvent.defaultPrevented) {
           this.value = previousValue;
@@ -251,7 +260,7 @@ export class CalciteInput {
       }
     };
     this.inputKeyUpHandler = () => {
-      clearInterval(this.nudgeNumberValueIntervalId);
+      window.clearInterval(this.nudgeNumberValueIntervalId);
     };
   }
   disabledWatcher() {
@@ -295,17 +304,18 @@ export class CalciteInput {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
     this.scale = getElementProp(this.el, "scale", this.scale);
     this.status = getElementProp(this.el, "status", this.status);
     this.inlineEditableEl = this.el.closest("calcite-inline-editable");
-    this.editingEnabled = (_a = this.inlineEditableEl) === null || _a === void 0 ? void 0 : _a.editingEnabled;
+    if (this.inlineEditableEl) {
+      this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
+    }
     if (this.type === "number" && this.value) {
       if (isValidNumber(this.value)) {
         this.localizedValue = localizeNumberString(this.value, this.locale, this.groupSeparator);
       }
       else {
-        this.value = undefined;
+        this.value = "";
       }
     }
     connectLabel(this);

package/dist/collection/components/calcite-input-date-picker/calcite-input-date-picker.css

@@ -1,51 +1,42 @@
 /* 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-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);
@@ -79,7 +70,6 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :host {
   /* Component spacing variables */
   --calcite-icon-size: 1rem;
@@ -97,7 +87,7 @@
 }
 
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -105,14 +95,15 @@
 }
 
 :host {
-  box-shadow: none;
+  position: relative;
   display: inline-block;
-  vertical-align: top;
   width: 100%;
-  position: relative;
   overflow: visible;
+  vertical-align: top;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-
 :host .menu-container .calcite-popper-anim {
   position: relative;
   z-index: 1;
@@ -123,23 +114,18 @@
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
   border-radius: 0.25rem;
 }
-
 :host .menu-container[data-popper-placement^=bottom] .calcite-popper-anim {
   transform: translateY(-5px);
 }
-
 :host .menu-container[data-popper-placement^=top] .calcite-popper-anim {
   transform: translateY(5px);
 }
-
 :host .menu-container[data-popper-placement^=left] .calcite-popper-anim {
   transform: translateX(5px);
 }
-
 :host .menu-container[data-popper-placement^=right] .calcite-popper-anim {
   transform: translateX(-5px);
 }
-
 :host .menu-container[data-popper-placement] .calcite-popper-anim--active {
   opacity: 1;
   visibility: visible;
@@ -147,9 +133,11 @@
 }
 
 .calendar-picker-wrapper {
-  box-shadow: none;
   position: static;
   width: 100%;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   transform: translate3d(0, 0, 0);
 }
 
@@ -160,49 +148,44 @@
 :host([range]) .input-container {
   display: flex;
 }
-
 :host([range]) .input-wrapper {
   flex: 1 1 auto;
 }
-
 :host([range]) .horizontal-arrow-container {
-  background-color: var(--calcite-ui-background);
-  padding-top: 0;
-  padding-bottom: 0;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  display: flex;
+  align-items: center;
   border-width: 1px;
+  border-left-width: 0px;
+  border-right-width: 0px;
   border-style: solid;
   border-color: var(--calcite-ui-border-input);
-  border-left-width: 0;
-  border-right-width: 0;
-  display: flex;
-  align-items: center;
+  background-color: var(--calcite-ui-background);
+  padding-top: 0px;
+  padding-bottom: 0px;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
 }
 
 :host([range][layout=vertical]) .input-wrapper {
   width: 100%;
 }
-
 :host([range][layout=vertical]) .input-container {
   flex-direction: column;
   align-items: flex-start;
 }
-
 :host([range][layout=vertical]) .calendar-picker-wrapper--end {
   transform: translate3d(0, 0, 0);
 }
-
 :host([range][layout=vertical]) .vertical-arrow-container {
   top: 1.5rem;
-  left: 0;
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;
-  margin-left: 1px;
-  margin-right: 1px;
   position: absolute;
+  left: 0px;
   z-index: 10;
+  margin-left: 1px;
+  margin-right: 1px;
   background-color: var(--calcite-ui-foreground-1);
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
 }
 
 :host([scale=s][range]:not([layout=vertical])) .calendar-picker-wrapper {
@@ -222,28 +205,27 @@
   position: absolute;
   z-index: 900;
   transform: scale(0);
-  visibility: hidden;
   pointer-events: none;
+  visibility: hidden;
 }
 
 :host([active]) .menu-container {
-  visibility: visible;
   pointer-events: auto;
+  visibility: visible;
 }
 
 .input .calcite-input__wrapper {
-  margin-top: 0;
+  margin-top: 0px;
 }
 
 :host([range][layout=vertical][scale=m]) .vertical-arrow-container {
   top: 1.5rem;
   padding-left: 0.75rem;
 }
-
 :host([range][layout=vertical][scale=m]) .vertical-arrow-container calcite-icon {
-  width: 0.75rem;
   height: 0.75rem;
-  min-width: 0;
+  width: 0.75rem;
+  min-width: 0px;
 }
 
 :host([range][layout=vertical][scale=l]) .vertical-arrow-container {

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

@@ -260,7 +260,7 @@ export class CalciteInputDatePicker {
         this.range && (h("div", { class: "input-wrapper", ref: this.setEndWrapper },
           h("calcite-input", { class: {
               input: true,
-              "border-t-color-1": this.layout === "vertical" && this.range
+              "border-top-color-one": this.layout === "vertical" && this.range
             }, disabled: disabled, icon: "calendar", "number-button-type": "none", onCalciteInputBlur: this.inputBlur, onCalciteInputFocus: this.endInputFocus, onCalciteInputInput: this.inputInput, placeholder: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder, ref: this.setEndInput, scale: this.scale, type: "text", value: formattedEndDate }))))),
       h(HiddenFormInputSlot, { component: this })));
   }

package/dist/collection/components/calcite-input-message/calcite-input-message.css

@@ -1,51 +1,42 @@
 /* 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-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);
@@ -79,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -95,22 +85,21 @@
 *
 * @prop --calcite-input-message-spacing-value: the top margin above the input-message.
 */
-
 :host([active][scale=m]),
 :host([active][scale=l]) {
   --calcite-input-message-spacing-value: 0.25rem;
 }
 
 :host {
+  pointer-events: none;
+  visibility: hidden;
+  box-sizing: border-box;
   display: flex;
-  align-items: center;
+  height: 0px;
   width: 100%;
-  box-sizing: border-box;
-  color: var(--calcite-ui-text-1);
+  align-items: center;
   font-weight: var(--calcite-font-weight-medium);
-  visibility: hidden;
-  height: 0;
-  pointer-events: none;
+  color: var(--calcite-ui-text-1);
   opacity: 0;
   transition-property: all;
   transition-duration: var(--calcite-animation-timing);
@@ -119,8 +108,8 @@
 }
 
 :host([active]) {
-  height: auto;
   visibility: visible;
+  height: auto;
   opacity: 1;
   transition-property: all;
   transition-duration: var(--calcite-animation-timing);
@@ -134,9 +123,9 @@
 }
 
 .calcite-input-message-icon {
+  pointer-events: none;
   display: inline-flex;
   flex-shrink: 0;
-  pointer-events: none;
   transition-property: all;
   transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
@@ -161,8 +150,8 @@
 }
 
 :host([status][active]) {
-  color: var(--calcite-ui-text-1);
   font-weight: var(--calcite-font-weight-medium);
+  color: var(--calcite-ui-text-1);
 }
 
 :host([status][active][scale=s]) {
@@ -171,13 +160,13 @@
 }
 
 :host([status][active][scale=m]) {
+  margin-top: 0.25rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
-  margin-top: 0.25rem;
 }
 
 :host([status][active][scale=l]) {
+  margin-top: 0.25rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
-  margin-top: 0.25rem;
 }

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

@@ -1,51 +1,42 @@
 /* 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-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);
@@ -79,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {

package/dist/collection/components/calcite-input-time-picker/calcite-input-time-picker.js

@@ -33,7 +33,7 @@ export class CalciteInputTimePicker {
     this.scale = "m";
     /** number (seconds) that specifies the granularity that the value must adhere to */
     this.step = 60;
-    /** The selected time (always 24-hour format)*/
+    /** The selected time in UTC (always 24-hour format) */
     this.value = null;
     /** whether the value of the input was changed as a result of user typing or not */
     this.internalValueChange = false;
@@ -559,7 +559,7 @@ export class CalciteInputTimePicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The selected time (always 24-hour format)"
+        "text": "The selected time in UTC (always 24-hour format)"
       },
       "attribute": "value",
       "reflect": false,

package/dist/collection/components/calcite-label/calcite-label.css

@@ -1,51 +1,42 @@
 /* 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-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);
@@ -79,15 +70,18 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
+:host {
+  display: inline;
+}
+
 :host([alignment=start]) {
   text-align: start;
 }
@@ -101,50 +95,46 @@
 }
 
 :host([scale=s]) .container {
+  margin-bottom: 0.5rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
-  margin-bottom: 0.5rem;
 }
 
 :host([scale=m]) .container {
+  margin-bottom: 0.75rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
-  margin-bottom: 0.75rem;
 }
 
 :host([scale=l]) .container {
+  margin-bottom: 1rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
-  margin-bottom: 1rem;
 }
 
 :host .container {
-  color: var(--calcite-ui-text-1);
+  margin-top: 0px;
+  margin-right: 0px;
+  margin-left: 0px;
   width: 100%;
-  margin-top: 0;
-  margin-right: 0;
-  margin-left: 0;
   line-height: 1.375;
+  color: var(--calcite-ui-text-1);
 }
 
 :host([layout=default]) .container {
   display: flex;
   flex-direction: column;
-  grid-gap: 0.25rem;
   gap: 0.25rem;
 }
 
-:host([layout=inline]) .container,
-:host([layout=inline-space-between]) .container {
+:host([layout=inline]) .container, :host([layout=inline-space-between]) .container {
   display: flex;
-  align-items: center;
   flex-direction: row;
-  grid-gap: 0.5rem;
+  align-items: center;
   gap: 0.5rem;
 }
 
 :host([layout=inline][scale=l]) .container {
-  grid-gap: 0.75rem;
   gap: 0.75rem;
 }
 
@@ -156,22 +146,17 @@
   pointer-events: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
-
 :host([disabled]) ::slotted(*) {
   pointer-events: none;
 }
-
-:host([disabled]) ::slotted(*[disabled]),
-:host([disabled]) ::slotted(*[disabled] *) {
-  --bg-opacity: 1;
+:host([disabled]) ::slotted(*[disabled]), :host([disabled]) ::slotted(*[disabled] *) {
+  --tw-bg-opacity: 1;
 }
-
 :host([disabled]) ::slotted(calcite-input-message:not([active])) {
-  --bg-opacity: 0;
+  --tw-bg-opacity: 0;
 }
 
 :host([disable-spacing]) .container {
-  grid-gap: 0;
-  gap: 0;
-  margin: 0;
+  margin: 0px;
+  gap: 0px;
 }