@esri/calcite-components 1.0.0-next.294 → 1.0.0-next.295

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

@@ -9,10 +9,20 @@ import { dateFromRange, inRange, dateFromISO, dateToISO, parseDateString, sameDa
 import { getKey } from "../../utils/key";
 import { TEXT } from "../calcite-date-picker/resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
+import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper";
 const DEFAULT_PLACEMENT = "bottom-leading";
 export class CalciteInputDatePicker {
   constructor() {
+    //--------------------------------------------------------------------------
+    //
+    //  Public Properties
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * When false, the component won't be interactive.
+     */
+    this.disabled = false;
     /** Expand or collapse when calendar does not have input */
     this.active = false;
     /** Localized string for "previous month" (used for aria label)
@@ -29,6 +39,12 @@ export class CalciteInputDatePicker {
     this.scale = "m";
     /** Range mode activation */
     this.range = false;
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
     this.overlayPositioning = "absolute";
     /** Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */
@@ -103,6 +119,7 @@ export class CalciteInputDatePicker {
       const { startDate, endDate } = event.detail;
       this.start = dateToISO(startDate);
       this.end = dateToISO(endDate);
+      this.value = [this.start, this.end];
       if (this.shouldFocusRangeEnd()) {
         (_a = this.endInput) === null || _a === void 0 ? void 0 : _a.setFocus();
       }
@@ -111,6 +128,23 @@ export class CalciteInputDatePicker {
       }
     };
   }
+  valueHandler(value) {
+    if (Array.isArray(value)) {
+      this.valueAsDate = value.map((v) => dateFromISO(v));
+      this.start = value[0];
+      this.end = value[1];
+    }
+    else if (value) {
+      this.valueAsDate = dateFromISO(value);
+      this.start = "";
+      this.end = "";
+    }
+    else {
+      this.valueAsDate = undefined;
+      this.start = undefined;
+      this.end = undefined;
+    }
+  }
   activeHandler() {
     this.reposition();
   }
@@ -154,8 +188,15 @@ export class CalciteInputDatePicker {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    if (this.value) {
+    if (Array.isArray(this.value)) {
+      this.valueAsDate = this.value.map((v) => dateFromISO(v));
+      this.start = this.value[0];
+      this.end = this.value[1];
+    }
+    else if (this.value) {
       this.valueAsDate = dateFromISO(this.value);
+      this.start = "";
+      this.end = "";
     }
     if (this.start) {
       this.startAsDate = dateFromISO(this.start);
@@ -171,6 +212,7 @@ export class CalciteInputDatePicker {
     }
     this.createPopper();
     connectLabel(this);
+    connectForm(this);
   }
   async componentWillLoad() {
     await this.loadLocaleData();
@@ -178,9 +220,11 @@ export class CalciteInputDatePicker {
   disconnectedCallback() {
     this.destroyPopper();
     disconnectLabel(this);
+    disconnectForm(this);
   }
   render() {
     var _a, _b;
+    const { disabled } = this;
     const date = dateFromRange(this.range ? this.startAsDate : this.valueAsDate, this.minAsDate, this.maxAsDate);
     const endDate = this.range
       ? dateFromRange(this.endAsDate, this.minAsDate, this.maxAsDate)
@@ -188,26 +232,28 @@ export class CalciteInputDatePicker {
     const formattedEndDate = endDate ? endDate.toLocaleDateString(this.locale) : "";
     const formattedDate = date ? date.toLocaleDateString(this.locale) : "";
     const dir = getElementDir(this.el);
-    return (h(Host, { onBlur: this.deactivate, onKeyUp: this.keyUpHandler, role: "application" }, this.localeData && (h("div", { "aria-expanded": this.active.toString(), class: "input-container", dir: dir, role: "application" },
-      h("div", { class: "input-wrapper", ref: this.setStartWrapper },
-        h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, icon: "calendar", label: getLabelText(this), "number-button-type": "none", onCalciteInputBlur: this.inputBlur, onCalciteInputFocus: this.startInputFocus, onCalciteInputInput: this.inputInput, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, ref: this.setStartInput, scale: this.scale, type: "text", value: formattedDate })),
-      h("div", { "aria-hidden": (!this.active).toString(), class: "menu-container", ref: this.setMenuEl },
-        h("div", { class: {
-            ["calendar-picker-wrapper"]: true,
-            ["calendar-picker-wrapper--end"]: this.focusedInput === "end",
-            [PopperCSS.animation]: true,
-            [PopperCSS.animationActive]: this.active
-          }, onTransitionEnd: this.transitionEnd },
-          h("calcite-date-picker", { activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, locale: this.locale, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))),
-      this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" },
-        h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))),
-      this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" },
-        h("calcite-icon", { icon: "arrow-down", scale: "s" }))),
-      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
-          }, 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 })))))));
+    return (h(Host, { onBlur: this.deactivate, onKeyUp: this.keyUpHandler, role: "application" },
+      this.localeData && (h("div", { "aria-expanded": this.active.toString(), class: "input-container", dir: dir, role: "application" },
+        h("div", { class: "input-wrapper", ref: this.setStartWrapper },
+          h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), "number-button-type": "none", onCalciteInputBlur: this.inputBlur, onCalciteInputFocus: this.startInputFocus, onCalciteInputInput: this.inputInput, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, ref: this.setStartInput, scale: this.scale, type: "text", value: formattedDate })),
+        h("div", { "aria-hidden": (!this.active).toString(), class: "menu-container", ref: this.setMenuEl },
+          h("div", { class: {
+              ["calendar-picker-wrapper"]: true,
+              ["calendar-picker-wrapper--end"]: this.focusedInput === "end",
+              [PopperCSS.animation]: true,
+              [PopperCSS.animationActive]: this.active
+            }, onTransitionEnd: this.transitionEnd },
+            h("calcite-date-picker", { activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, locale: this.locale, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))),
+        this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" },
+          h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))),
+        this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" },
+          h("calcite-icon", { icon: "arrow-down", scale: "s" }))),
+        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
+            }, 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 })));
   }
   setReferenceEl() {
     const { focusedInput, layout, endWrapper, startWrapper } = this;
@@ -257,9 +303,6 @@ export class CalciteInputDatePicker {
     }
     this.popper = null;
   }
-  valueWatcher(value) {
-    this.valueAsDate = dateFromISO(value);
-  }
   startWatcher(start) {
     this.startAsDate = dateFromISO(start);
   }
@@ -275,14 +318,16 @@ export class CalciteInputDatePicker {
   }
   clearCurrentValue() {
     if (!this.range) {
-      this.value = undefined;
+      this.value = "";
       return;
     }
     const { focusedInput } = this;
     if (focusedInput === "start") {
+      this.value = Array.isArray(this.value) ? ["", this.value[1] || ""] : [""];
       this.start = undefined;
     }
     else if (focusedInput === "end") {
+      this.value = Array.isArray(this.value) ? [this.value[0] || "", ""] : ["", ""];
       this.end = undefined;
     }
   }
@@ -302,7 +347,11 @@ export class CalciteInputDatePicker {
     const { focusedInput } = this;
     if (focusedInput === "start") {
       if (!this.startAsDate || !sameDate(date, this.startAsDate)) {
-        this.start = dateToISO(date);
+        const startDateISO = dateToISO(date);
+        this.value = Array.isArray(this.value)
+          ? [startDateISO, this.value[1] || ""]
+          : [startDateISO];
+        this.start = startDateISO;
         this.calciteDatePickerRangeChange.emit({
           startDate: date,
           endDate: this.endAsDate
@@ -311,7 +360,11 @@ export class CalciteInputDatePicker {
     }
     else if (focusedInput === "end") {
       if (!this.endAsDate || !sameDate(date, this.endAsDate)) {
-        this.end = dateToISO(date);
+        const endDateISO = dateToISO(date);
+        this.value = Array.isArray(this.value)
+          ? [this.value[0] || "", endDateISO]
+          : ["", endDateISO];
+        this.end = endDateISO;
         this.calciteDatePickerRangeChange.emit({
           startDate: this.startAsDate,
           endDate: date
@@ -327,7 +380,9 @@ export class CalciteInputDatePicker {
     const date = this.getDateFromInput(target.value);
     if (!date) {
       if (!range && valueAsDate) {
-        target.value = valueAsDate.toLocaleDateString(locale);
+        target.value = Array.isArray(valueAsDate)
+          ? valueAsDate[focusedInput === "end" ? 1 : 0].toLocaleDateString(locale)
+          : valueAsDate.toLocaleDateString(locale);
       }
       else if (focusedInput === "start" && startAsDate) {
         target.value = startAsDate.toLocaleDateString(locale);
@@ -385,16 +440,34 @@ export class CalciteInputDatePicker {
     "$": ["calcite-input-date-picker.css"]
   }; }
   static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When false, the component won't be interactive."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "value": {
       "type": "string",
       "mutable": true,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "string | string[]",
+        "resolved": "string | string[]",
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Selected date"
@@ -428,8 +501,8 @@ export class CalciteInputDatePicker {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "Date",
-        "resolved": "Date",
+        "original": "Date | Date[]",
+        "resolved": "Date | Date[]",
         "references": {
           "Date": {
             "location": "global"
@@ -458,7 +531,10 @@ export class CalciteInputDatePicker {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use valueAsDate instead"
+          }],
         "text": "Selected start date as full date object"
       }
     },
@@ -477,7 +553,10 @@ export class CalciteInputDatePicker {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use valueAsDate instead"
+          }],
         "text": "Selected end date as full date object"
       }
     },
@@ -571,6 +650,23 @@ export class CalciteInputDatePicker {
       "reflect": true,
       "defaultValue": "false"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The picker's name. Gets submitted with the form."
+      },
+      "attribute": "name",
+      "reflect": false
+    },
     "intlPrevMonth": {
       "type": "string",
       "mutable": false,
@@ -667,6 +763,27 @@ export class CalciteInputDatePicker {
       "reflect": true,
       "defaultValue": "false"
     },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "When true, makes the component required for form-submission."
+      },
+      "attribute": "required",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "start": {
       "type": "string",
       "mutable": true,
@@ -678,7 +795,10 @@ export class CalciteInputDatePicker {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use value instead"
+          }],
         "text": "Selected start date"
       },
       "attribute": "start",
@@ -695,7 +815,10 @@ export class CalciteInputDatePicker {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use value instead"
+          }],
         "text": "Selected end date"
       },
       "attribute": "end",
@@ -880,6 +1003,9 @@ export class CalciteInputDatePicker {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
+      "propName": "value",
+      "methodName": "valueHandler"
+    }, {
       "propName": "active",
       "methodName": "activeHandler"
     }, {
@@ -888,9 +1014,6 @@ export class CalciteInputDatePicker {
     }, {
       "propName": "focusedInput",
       "methodName": "setReferenceEl"
-    }, {
-      "propName": "value",
-      "methodName": "valueWatcher"
     }, {
       "propName": "start",
       "methodName": "startWatcher"

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

@@ -88,4 +88,19 @@
   display: inline-block;
   -webkit-user-select: none;
           user-select: none;
+}
+
+::slotted(input[slot=hidden-form-input]) {
+  bottom: 0 !important;
+  left: 0 !important;
+  margin: 0 !important;
+  opacity: 0 !important;
+  outline: none !important;
+  padding: 0 !important;
+  position: absolute !important;
+  right: 0 !important;
+  top: 0 !important;
+  transform: none !important;
+  -webkit-appearance: none !important;
+  z-index: -1 !important;
 }

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

@@ -7,6 +7,7 @@ import { guid } from "../../utils/guid";
 import { getKey } from "../../utils/key";
 import { parseTimeString, formatTimeString, getMeridiem, getMeridiemHour } from "../../utils/time";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
+import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 export class CalciteInputTimePicker {
   constructor() {
     //--------------------------------------------------------------------------
@@ -20,6 +21,12 @@ export class CalciteInputTimePicker {
     this.disabled = false;
     /** Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually) */
     this.hourDisplayFormat = "12";
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     /** The scale (size) of the time input */
     this.scale = "m";
     /** number that specifies the granularity that the value must adhere to */
@@ -165,6 +172,7 @@ export class CalciteInputTimePicker {
       this.setValue({ value: this.value, origin: "loading" });
     }
     connectLabel(this);
+    connectForm(this);
   }
   componentDidLoad() {
     if (this.calciteInputEl.value !== this.value) {
@@ -173,6 +181,7 @@ export class CalciteInputTimePicker {
   }
   disconnectedCallback() {
     disconnectLabel(this);
+    disconnectForm(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -184,9 +193,10 @@ export class CalciteInputTimePicker {
     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), name: this.name, onCalciteInputBlur: this.calciteInputBlurHandler, onCalciteInputFocus: this.calciteInputFocusHandler, onCalciteInputInput: this.calciteInputInputHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })),
+        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", { 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(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-input-time-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -469,7 +479,7 @@ export class CalciteInputTimePicker {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "The name of the time input"
@@ -477,6 +487,27 @@ export class CalciteInputTimePicker {
       "attribute": "name",
       "reflect": false
     },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "When true, makes the component required for form-submission."
+      },
+      "attribute": "required",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "scale": {
       "type": "string",
       "mutable": false,

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

@@ -225,7 +225,7 @@ h5.heading {
   justify-content: flex-start;
   position: sticky;
   top: 0;
-  border-bottom-color: var(--calcite-ui-border-2);
+  border-bottom-color: var(--calcite-ui-border-3);
   width: 100%;
   flex: 0 0 auto;
   min-height: 3rem;
@@ -274,7 +274,7 @@ h5.heading {
 }
 
 .back-button {
-  border-color: var(--calcite-ui-border-2);
+  border-color: var(--calcite-ui-border-3);
   border-style: solid;
   border-width: 0;
   border-right-width: 1px;

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

@@ -227,6 +227,7 @@
   flex-wrap: nowrap;
   align-self: center;
   height: 100%;
+  width: 100%;
 }
 
 .calcite--rtl .close-button {

package/dist/collection/components/calcite-radio-button/calcite-radio-button.css

@@ -89,10 +89,27 @@
   display: block;
 }
 
-:host .calcite-radio-button__container {
+:host .container {
   position: relative;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 
 :host([disabled]) {
   cursor: pointer;
+}
+
+::slotted(input[slot=hidden-form-input]) {
+  bottom: 0 !important;
+  left: 0 !important;
+  margin: 0 !important;
+  opacity: 0 !important;
+  outline: none !important;
+  padding: 0 !important;
+  position: absolute !important;
+  right: 0 !important;
+  top: 0 !important;
+  transform: none !important;
+  -webkit-appearance: none !important;
+  z-index: -1 !important;
 }