@esri/calcite-components 1.0.0-beta.71 → 1.0.0-beta.75

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

@@ -2,10 +2,9 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { Component, Element, Host, h, Prop, Listen, Event, Method, Watch } from "@stencil/core";
+import { Component, Element, Host, h, Prop, Listen, Event, Method, Watch, State } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { getKey } from "../../utils/key";
-import { parseTimeString, formatTimeString, getMeridiem, getMeridiemHour } from "../../utils/time";
+import { formatTimeString, isValidTime, localizeTimeString } from "../../utils/time";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 export class CalciteInputTimePicker {
@@ -19,8 +18,11 @@ export class CalciteInputTimePicker {
     this.active = false;
     /** The disabled state of the time input */
     this.disabled = false;
-    /** Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually) */
-    this.hourDisplayFormat = "12";
+    /**
+     * BCP 47 language tag for desired language and country format
+     * @internal
+     */
+    this.locale = document.documentElement.lang || navigator.language || "en";
     /**
      * When true, makes the component required for form-submission.
      *
@@ -31,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;
@@ -44,56 +46,60 @@ export class CalciteInputTimePicker {
     //--------------------------------------------------------------------------
     this.calciteInputBlurHandler = () => {
       this.active = false;
-      const newValue = formatTimeString(this.calciteInputEl.value) || formatTimeString(this.value);
-      if (newValue !== this.calciteInputEl.value) {
-        this.setInputValue(newValue);
-      }
+      const shouldIncludeSeconds = this.shouldIncludeSeconds();
+      const localizedInputValue = localizeTimeString(this.calciteInputEl.value, this.locale, shouldIncludeSeconds);
+      this.setInputValue(localizedInputValue || localizeTimeString(this.value, this.locale, shouldIncludeSeconds));
     };
     this.calciteInputFocusHandler = () => {
       this.active = true;
     };
     this.calciteInputInputHandler = (event) => {
-      this.setValue({ value: event.detail.value });
+      const target = event.target;
+      this.setValue({ value: target.value });
+    };
+    this.timePickerChangeHandler = (event) => {
+      event.stopPropagation();
+      const target = event.target;
+      const value = target.value;
+      this.setValue({ value, origin: "time-picker" });
     };
     this.setCalciteInputEl = (el) => {
       this.calciteInputEl = el;
     };
+    this.setCalciteTimePickerEl = (el) => {
+      this.calciteTimePickerEl = el;
+    };
     this.setInputValue = (newInputValue) => {
       if (!this.calciteInputEl) {
         return;
       }
-      if (this.hourDisplayFormat === "12") {
-        const { hour, minute, second } = parseTimeString(newInputValue);
-        this.calciteInputEl.value = newInputValue
-          ? `${getMeridiemHour(hour)}:${minute}${this.step !== 60 ? ":" + second : ""} ${getMeridiem(hour)}`
-          : null;
-      }
-      else {
-        this.calciteInputEl.value = newInputValue;
-      }
+      this.calciteInputEl.value = newInputValue;
     };
     this.setValue = ({ value, origin = "input" }) => {
       const previousValue = this.value;
-      const validatedNewValue = formatTimeString(value);
+      const newValue = formatTimeString(value);
+      const newLocalizedValue = localizeTimeString(newValue, this.locale, this.shouldIncludeSeconds());
       this.internalValueChange = origin !== "external" && origin !== "loading";
       const shouldEmit = origin !== "loading" &&
         origin !== "external" &&
         ((value !== this.previousValidValue && !value) ||
-          !!(!this.previousValidValue && validatedNewValue) ||
-          (validatedNewValue !== this.previousValidValue && validatedNewValue));
+          !!(!this.previousValidValue && newValue) ||
+          (newValue !== this.previousValidValue && newValue));
       if (value) {
         if (shouldEmit) {
-          this.previousValidValue = validatedNewValue;
+          this.previousValidValue = newValue;
         }
-        if (validatedNewValue && validatedNewValue !== this.value) {
-          this.value = validatedNewValue;
+        if (newValue && newValue !== this.value) {
+          this.value = newValue;
         }
+        this.localizedValue = newLocalizedValue;
       }
       else {
         this.value = value;
+        this.localizedValue = null;
       }
       if (origin === "time-picker" || origin === "external") {
-        this.setInputValue(validatedNewValue);
+        this.setInputValue(newLocalizedValue);
       }
       if (shouldEmit) {
         const changeEvent = this.calciteInputTimePickerChange.emit();
@@ -104,19 +110,28 @@ export class CalciteInputTimePicker {
           this.previousValidValue = previousValue;
         }
         else {
-          this.previousValidValue = validatedNewValue;
+          this.previousValidValue = newValue;
         }
       }
     };
   }
+  localeWatcher(newLocale) {
+    this.setInputValue(localizeTimeString(this.value, newLocale, this.shouldIncludeSeconds()));
+  }
   valueWatcher(newValue) {
     if (!this.internalValueChange) {
       this.setValue({ value: newValue, origin: "external" });
     }
     this.internalValueChange = false;
   }
+  clickHandler(event) {
+    if (event.composedPath().includes(this.calciteTimePickerEl)) {
+      return;
+    }
+    this.setFocus();
+  }
   keyUpHandler(event) {
-    if (getKey(event.key) === "Escape" && this.active) {
+    if (event.key === "Escape" && this.active) {
       this.active = false;
     }
   }
@@ -125,21 +140,6 @@ export class CalciteInputTimePicker {
     event.stopPropagation();
     this.active = false;
   }
-  timePickerChangeHandler(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (event.detail) {
-      const { hour, minute, second } = event.detail;
-      let value;
-      if (hour && minute) {
-        value = second && this.step !== 60 ? `${hour}:${minute}:${second}` : `${hour}:${minute}`;
-      }
-      else {
-        value = "";
-      }
-      this.setValue({ value, origin: "time-picker" });
-    }
-  }
   timePickerFocusHandler(event) {
     event.preventDefault();
     event.stopPropagation();
@@ -162,6 +162,9 @@ export class CalciteInputTimePicker {
   onLabelClick() {
     this.setFocus();
   }
+  shouldIncludeSeconds() {
+    return this.step < 60;
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -169,15 +172,13 @@ export class CalciteInputTimePicker {
   //--------------------------------------------------------------------------
   connectedCallback() {
     if (this.value) {
-      this.setValue({ value: this.value, origin: "loading" });
+      this.setValue({ value: isValidTime(this.value) ? this.value : undefined, origin: "loading" });
     }
     connectLabel(this);
     connectForm(this);
   }
   componentDidLoad() {
-    if (this.calciteInputEl.value !== this.value) {
-      this.setInputValue(this.value);
-    }
+    this.setInputValue(this.localizedValue);
   }
   disconnectedCallback() {
     disconnectLabel(this);
@@ -189,13 +190,12 @@ export class CalciteInputTimePicker {
   //
   // --------------------------------------------------------------------------
   render() {
-    const { hour, minute, second } = parseTimeString(this.value);
     const popoverId = `${this.referenceElementId}-popover`;
     return (h(Host, null,
       h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" },
         h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputBlur: this.calciteInputBlurHandler, onCalciteInputFocus: this.calciteInputFocusHandler, onCalciteInputInput: this.calciteInputInputHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })),
       h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active || false, referenceElement: this.referenceElementId },
-        h("calcite-time-picker", { hour: hour, "hour-display-format": this.hourDisplayFormat, intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, minute: minute, scale: this.scale, second: second, step: this.step })),
+        h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.locale, onCalciteTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })),
       h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-input-time-picker"; }
@@ -243,29 +243,6 @@ export class CalciteInputTimePicker {
       "reflect": true,
       "defaultValue": "false"
     },
-    "hourDisplayFormat": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "HourDisplayFormat",
-        "resolved": "\"12\" | \"24\"",
-        "references": {
-          "HourDisplayFormat": {
-            "location": "import",
-            "path": "../../utils/time"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually)"
-      },
-      "attribute": "hour-display-format",
-      "reflect": false,
-      "defaultValue": "\"12\""
-    },
     "intlHour": {
       "type": "string",
       "mutable": false,
@@ -470,6 +447,27 @@ export class CalciteInputTimePicker {
       "attribute": "intl-second-up",
       "reflect": false
     },
+    "locale": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "BCP 47 language tag for desired language and country format"
+      },
+      "attribute": "lang",
+      "reflect": false,
+      "defaultValue": "document.documentElement.lang || navigator.language || \"en\""
+    },
     "name": {
       "type": "string",
       "mutable": false,
@@ -561,13 +559,16 @@ 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,
       "defaultValue": "null"
     }
   }; }
+  static get states() { return {
+    "localizedValue": {}
+  }; }
   static get events() { return [{
       "method": "calciteInputTimePickerChange",
       "name": "calciteInputTimePickerChange",
@@ -604,24 +605,27 @@ export class CalciteInputTimePicker {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
+      "propName": "locale",
+      "methodName": "localeWatcher"
+    }, {
       "propName": "value",
       "methodName": "valueWatcher"
     }]; }
   static get listeners() { return [{
-      "name": "keyup",
-      "method": "keyUpHandler",
+      "name": "click",
+      "method": "clickHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteTimePickerBlur",
-      "method": "timePickerBlurHandler",
+      "name": "keyup",
+      "method": "keyUpHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteTimePickerChange",
-      "method": "timePickerChangeHandler",
+      "name": "calciteTimePickerBlur",
+      "method": "timePickerBlurHandler",
       "target": undefined,
       "capture": false,
       "passive": false

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

@@ -1,53 +1,48 @@
 /* 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: 300ms;
+  --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 {
@@ -75,23 +70,24 @@
 /**
 * 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([alignment=start]),
-:host([alignment=end]) .calcite--rtl {
-  text-align: left;
+:host {
+  display: inline;
 }
 
-:host([alignment=end]),
-:host([alignment=start]) .calcite--rtl {
-  text-align: right;
+:host([alignment=start]) {
+  text-align: start;
+}
+
+:host([alignment=end]) {
+  text-align: end;
 }
 
 :host([alignment=center]) {
@@ -99,51 +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);
-  cursor: pointer;
+  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;
 }
 
@@ -155,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;
 }

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

@@ -3,9 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Prop, Host } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
 import { CSS } from "./resources";
-import { CSS_UTILITY } from "../../utils/resources";
 /**
  * @slot - A slot for adding text and a component that can be labeled.
  */
@@ -45,9 +43,8 @@ export class CalciteLabel {
   //
   //--------------------------------------------------------------------------
   render() {
-    const dir = getElementDir(this.el);
     return (h(Host, { onClick: this.labelClickHandler },
-      h("div", { class: { [CSS.container]: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
+      h("div", { class: CSS.container },
         h("slot", null))));
   }
   static get is() { return "calcite-label"; }