@esri/solutions-components 0.6.5 → 0.6.6

package/dist/cjs/calcite-input-date-picker.cjs.entry.js

@@ -8,37 +8,37 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0e50040c.js');
-const date = require('./date-085999cf.js');
-const dom = require('./dom-1eb1ded2.js');
-const floatingUi = require('./floating-ui-480f97e1.js');
-const form = require('./form-cbb9efad.js');
-const interactive = require('./interactive-871d70ce.js');
-const key = require('./key-7fbdf405.js');
-const label = require('./label-e5c998a9.js');
-const loadable = require('./loadable-da060faa.js');
-const locale = require('./locale-37b9924d.js');
-const openCloseComponent = require('./openCloseComponent-b5b6c785.js');
-const utils = require('./utils-1446979d.js');
-const t9n = require('./t9n-a85989ef.js');
-const focusTrapComponent = require('./focusTrapComponent-fcce36fb.js');
-const guid = require('./guid-1b1fbdbc.js');
-require('./resources-f60f44b0.js');
-require('./browser-ecb3aabc.js');
+const date = require('./date-cec32b0e.js');
+const dom = require('./dom-c1807fc1.js');
+const floatingUi = require('./floating-ui-8d10af88.js');
+const form = require('./form-9d8ebf06.js');
+const interactive = require('./interactive-2fe0f43a.js');
+const key = require('./key-b8b55ea3.js');
+const label = require('./label-6e33e971.js');
+const loadable = require('./loadable-bac9cdd6.js');
+const locale = require('./locale-c63a1b57.js');
+const openCloseComponent = require('./openCloseComponent-5d70fcd8.js');
+const utils = require('./utils-acfeed9d.js');
+const t9n = require('./t9n-1d032c30.js');
+const focusTrapComponent = require('./focusTrapComponent-a22fc6a8.js');
+const guid = require('./guid-3abe3cc6.js');
+require('./resources-77713c2e.js');
 require('./debounce-30afab47.js');
-require('./observers-62c5955c.js');
+require('./observers-f5fa975b.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 const CSS = {
+  assistiveText: "assistive-text",
   menu: "menu-container",
   menuActive: "menu-container--active",
-  toggleIcon: "toggle-icon"
+  toggleIcon: "toggle-icon",
 };
 
-const inputDatePickerCss = "@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}}:host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}: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;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:inline-block;inline-size:100%;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-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-app-z-index);border-radius:0.25rem}:host .menu-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}:host .menu-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}:host .menu-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}:host .menu-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}:host .menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}:host([scale=s]){--calcite-toggle-spacing:0.5rem}:host([scale=m]){--calcite-toggle-spacing:0.75rem}:host([scale=l]){--calcite-toggle-spacing:1rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.calendar-picker-wrapper{position:static;inline-size: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)}.input-wrapper{position:relative}.toggle-icon{position:absolute;display:flex;inline-size:1rem;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing)}:host([range]) .input-container{display:flex}:host([range]) .input-wrapper{flex:1 1 auto}:host([range]) .horizontal-arrow-container{display:flex;align-items:center;border-width:1px;border-inline-start-width:0px;border-inline-end-width:0px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-background);padding-block:0px;padding-inline:0.25rem}:host([range][layout=vertical]) .input-wrapper{inline-size: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{inset-block-start:1.5rem;position:absolute;z-index:var(--calcite-app-z-index);margin-inline:1px;background-color:var(--calcite-ui-foreground-1);padding-inline:0.625rem;inset-inline-start:0}:host([scale=s][range]:not([layout=vertical])) .calendar-picker-wrapper{inline-size:216px}:host([scale=m][range]:not([layout=vertical])) .calendar-picker-wrapper{inline-size:286px}:host([scale=l][range]:not([layout=vertical])) .calendar-picker-wrapper{inline-size:398px}.menu-container{--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.menu-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-app-z-index);border-radius:0.25rem}.menu-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.menu-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.menu-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.menu-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}:host([open]) .menu-container{visibility:visible}.menu-container--active{visibility:visible}.input .calcite-input__wrapper{margin-block-start:0px}:host([range][layout=vertical][scale=m]) .vertical-arrow-container{inset-block-start:1.5rem;padding-inline-start:0.75rem}:host([range][layout=vertical][scale=m]) .vertical-arrow-container calcite-icon{block-size:0.75rem;inline-size:0.75rem;min-inline-size:0px}:host([range][layout=vertical][scale=l]) .vertical-arrow-container{inset-block-start:2.25rem;padding-inline:0.875rem}:host([range][layout=vertical][open]) .vertical-arrow-container{display:none}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
+const inputDatePickerCss = ":host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:inline-block;inline-size:100%;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-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-app-z-index);border-radius:0.25rem}:host .menu-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}:host .menu-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}:host .menu-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}:host .menu-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}:host .menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}:host([scale=s]){--calcite-toggle-spacing:0.5rem}:host([scale=m]){--calcite-toggle-spacing:0.75rem}:host([scale=l]){--calcite-toggle-spacing:1rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.calendar-picker-wrapper{position:static;inline-size: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)}.input-wrapper{position:relative}.toggle-icon{position:absolute;display:flex;inline-size:1rem;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing)}:host([range]) .input-container{display:flex}:host([range]) .input-wrapper{flex:1 1 auto}:host([range]) .horizontal-arrow-container{display:flex;align-items:center;border-width:1px;border-inline-start-width:0px;border-inline-end-width:0px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-background);padding-block:0px;padding-inline:0.25rem}:host([range][layout=vertical]) .input-wrapper{inline-size: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{inset-block-start:1.5rem;position:absolute;z-index:var(--calcite-app-z-index);margin-inline:1px;background-color:var(--calcite-ui-foreground-1);padding-inline:0.625rem;inset-inline-start:0}:host([scale=s][range]:not([layout=vertical])) .calendar-picker-wrapper{inline-size:216px}:host([scale=m][range]:not([layout=vertical])) .calendar-picker-wrapper{inline-size:286px}:host([scale=l][range]:not([layout=vertical])) .calendar-picker-wrapper{inline-size:398px}.menu-container{--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.menu-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-app-z-index);border-radius:0.25rem}.menu-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.menu-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.menu-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.menu-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}:host([open]) .menu-container{visibility:visible}.menu-container--active{visibility:visible}.input .calcite-input__wrapper{margin-block-start:0px}:host([range][layout=vertical][scale=m]) .vertical-arrow-container{inset-block-start:1.5rem;padding-inline-start:0.75rem}:host([range][layout=vertical][scale=m]) .vertical-arrow-container calcite-icon{block-size:0.75rem;inline-size:0.75rem;min-inline-size:0px}:host([range][layout=vertical][scale=l]) .vertical-arrow-container{inset-block-start:2.25rem;padding-inline:0.875rem}:host([range][layout=vertical][open]) .vertical-arrow-container{display:none}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
 
 const InputDatePicker = class {
   constructor(hostRef) {
@@ -72,6 +72,7 @@ const InputDatePicker = class {
     this.userChangedValue = false;
     this.openTransitionProp = "opacity";
     this.valueAsDateChangedExternally = false;
+    this.placeholderTextId = `calcite-input-date-picker-placeholder-${guid.guid()}`;
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -92,7 +93,6 @@ const InputDatePicker = class {
     };
     this.setTransitionEl = (el) => {
       this.transitionEl = el;
-      openCloseComponent.connectOpenCloseComponent(this);
     };
     this.setStartInput = (el) => {
       this.startInput = el;
@@ -163,8 +163,8 @@ const InputDatePicker = class {
         focusTrapEl: el,
         focusTrapOptions: {
           initialFocus: false,
-          setReturnFocus: false
-        }
+          setReturnFocus: false,
+        },
       });
     };
     /**
@@ -356,6 +356,7 @@ const InputDatePicker = class {
     }
   }
   openHandler(value) {
+    openCloseComponent.onToggleOpenCloseComponent(this);
     if (this.disabled || this.readOnly) {
       this.open = false;
       return;
@@ -385,7 +386,7 @@ const InputDatePicker = class {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    await loadable.componentLoaded(this);
+    await loadable.componentFocusable(this);
     this.el.focus();
   }
   /**
@@ -401,7 +402,7 @@ const InputDatePicker = class {
       overlayPositioning,
       placement,
       flipPlacements: filteredFlipPlacements,
-      type: "menu"
+      type: "menu",
     }, delayed);
   }
   // --------------------------------------------------------------------------
@@ -437,15 +438,17 @@ const InputDatePicker = class {
     }
     label.connectLabel(this);
     form.connectForm(this);
-    openCloseComponent.connectOpenCloseComponent(this);
     t9n.connectMessages(this);
     this.setFilteredPlacements();
     this.reposition(true);
     locale.numberStringFormatter.numberFormatOptions = {
       numberingSystem: this.numberingSystem,
       locale: this.effectiveLocale,
-      useGrouping: false
+      useGrouping: false,
     };
+    if (this.open) {
+      openCloseComponent.onToggleOpenCloseComponent(this);
+    }
   }
   async componentWillLoad() {
     loadable.setUpLoadableComponent(this);
@@ -464,7 +467,6 @@ const InputDatePicker = class {
     label.disconnectLabel(this);
     form.disconnectForm(this);
     floatingUi.disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
-    openCloseComponent.disconnectOpenCloseComponent(this);
     locale.disconnectLocalized(this);
     t9n.disconnectMessages(this);
   }
@@ -472,27 +474,27 @@ const InputDatePicker = class {
     interactive.updateHostInteraction(this);
   }
   render() {
-    var _a, _b;
+    var _a, _b, _c;
     const { disabled, effectiveLocale, messages, numberingSystem, readOnly } = this;
     locale.numberStringFormatter.numberFormatOptions = {
       numberingSystem,
       locale: effectiveLocale,
-      useGrouping: false
+      useGrouping: false,
     };
     return (index.h(index.Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler }, this.localeData && (index.h("div", { class: "input-container" }, index.h("div", { class: "input-wrapper", onClick: this.onInputWrapperClick,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setStartWrapper }, index.h("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": dom.toAriaBoolean(this.open), "aria-haspopup": "dialog", class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.startInputFocus, onFocus: this.startEndInputFocus, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, type: "text",
+      ref: this.setStartWrapper }, index.h("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-expanded": dom.toAriaBoolean(this.open), "aria-haspopup": "dialog", class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.startInputFocus, onFocus: this.startEndInputFocus, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, type: "text",
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setStartInput }), this.renderToggleIcon(this.open && this.focusedInput === "start")), index.h("div", { "aria-hidden": dom.toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
+      ref: this.setStartInput }), this.renderToggleIcon(this.open && this.focusedInput === "start"), index.h("span", { "aria-hidden": "true", class: CSS.assistiveText, id: this.placeholderTextId }, "Date Format: ", (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder)), index.h("div", { "aria-hidden": dom.toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
         [CSS.menu]: true,
-        [CSS.menuActive]: this.open
+        [CSS.menuActive]: this.open,
       }, id: this.dialogId, role: "dialog",
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setFloatingEl }, index.h("div", { class: {
         ["calendar-picker-wrapper"]: true,
         ["calendar-picker-wrapper--end"]: this.focusedInput === "end",
         [floatingUi.FloatingCSS.animation]: true,
-        [floatingUi.FloatingCSS.animationActive]: this.open
+        [floatingUi.FloatingCSS.animationActive]: this.open,
       },
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setTransitionEl }, index.h("calcite-date-picker", { activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, tabIndex: this.open ? undefined : -1, valueAsDate: this.valueAsDate,
@@ -501,8 +503,8 @@ const InputDatePicker = class {
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setEndWrapper }, index.h("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": dom.toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
         input: true,
-        "border-top-color-one": this.layout === "vertical" && this.range
-      }, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.endInputFocus, onFocus: this.startEndInputFocus, placeholder: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, type: "text",
+        "border-top-color-one": this.layout === "vertical" && this.range,
+      }, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.endInputFocus, onFocus: this.startEndInputFocus, placeholder: (_c = this.localeData) === null || _c === void 0 ? void 0 : _c.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, type: "text",
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setEndInput }), this.renderToggleIcon(this.open && this.focusedInput === "end"))))), index.h(form.HiddenFormInputSlot, { component: this })));
   }
@@ -530,7 +532,7 @@ const InputDatePicker = class {
           this.datePickerEl.setFocus();
           this.focusOnOpen = false;
         }
-      }
+      },
     });
     this.calciteInputDatePickerOpen.emit();
   }
@@ -542,6 +544,7 @@ const InputDatePicker = class {
     focusTrapComponent.deactivateFocusTrap(this);
     this.restoreInputFocus();
     this.focusOnOpen = false;
+    this.datePickerEl.reset();
   }
   commitValue() {
     const { focusedInput, value } = this;
@@ -559,14 +562,14 @@ const InputDatePicker = class {
         if (date$1) {
           this.setRangeValue([
             focusedInput === "start" ? date$1 : date.dateFromISO(value[0]),
-            focusedInput === "end" ? date$1 : date.dateFromISO(value[1])
+            focusedInput === "end" ? date$1 : date.dateFromISO(value[1]),
           ]);
           this.localizeInputValues();
         }
         else {
           this.setRangeValue([
             focusedInput === "end" && date.dateFromISO(value[0]),
-            focusedInput === "start" && date.dateFromISO(value[1])
+            focusedInput === "start" && date.dateFromISO(value[1]),
           ]);
         }
       }
@@ -574,7 +577,7 @@ const InputDatePicker = class {
         if (date$1) {
           this.setRangeValue([
             focusedInput === "start" ? date$1 : date.dateFromISO(value[0]),
-            focusedInput === "end" ? date$1 : date.dateFromISO(value[1])
+            focusedInput === "end" ? date$1 : date.dateFromISO(value[1]),
           ]);
           this.localizeInputValues();
         }
@@ -592,7 +595,7 @@ const InputDatePicker = class {
     locale.numberStringFormatter.numberFormatOptions = {
       numberingSystem: this.numberingSystem,
       locale: this.effectiveLocale,
-      useGrouping: false
+      useGrouping: false,
     };
     this.localeData = await utils.getLocaleData(this.effectiveLocale);
     this.localizeInputValues();