@esri/solutions-components 0.10.10 → 0.10.12

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

@@ -12,7 +12,7 @@ import { c as connectInteractive, d as disconnectInteractive, u as updateHostInt
 import { n as numberKeys } from './key.js';
 import { c as connectLabel, d as disconnectLabel } from './label.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
-import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized, e as getSupportedNumberingSystem } from './locale2.js';
+import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized, e as getDateFormatSupportedLocale, f as getSupportedNumberingSystem } from './locale2.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 import { d as defineCustomElement$7, g as getValueAsDateRange, a as getLocaleData } from './date-picker.js';
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';
@@ -32,7 +32,7 @@ import { d as defineCustomElement$1 } from './progress.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 /**
  * Specifies if an ISO string date (YYYY-MM-DD) has two digit year.
@@ -62,7 +62,7 @@ function normalizeToCurrentCentury(twoDigitYear) {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const CSS = {
     assistiveText: "assistive-text",
@@ -80,8 +80,11 @@ const CSS = {
     verticalArrowContainer: "vertical-arrow-container",
     chevronIcon: "chevron-icon",
 };
+const IDS = {
+    validationMessage: "inputDatePickerValidationMessage",
+};
 
-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-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-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;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1rem)}:host([scale=m]){--calcite-toggle-spacing:0.75rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1.5rem)}:host([scale=l]){--calcite-toggle-spacing:1rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 2rem)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.calendar-wrapper{--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}.input-wrapper .chevron-icon{color:var(--calcite-color-text-3)}.input-wrapper:focus-within .chevron-icon,.input-wrapper:active .chevron-icon,.input-wrapper:hover .chevron-icon{color:var(--calcite-color-text-1)}.toggle-icon{position:absolute;display:flex;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-color-border-input);background-color:var(--calcite-color-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-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-z-index);margin-inline:1px;background-color:var(--calcite-color-foreground-1);padding-inline:0.625rem;inset-inline-start:0}.menu-container{--calcite-floating-ui-z-index:var(--calcite-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-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}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::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 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-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:inset, left, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}:host .menu-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}:host .menu-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}:host .menu-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}:host .menu-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}:host .menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block:0;left:0}:host([scale=s]){--calcite-toggle-spacing:0.5rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1rem)}:host([scale=m]){--calcite-toggle-spacing:0.75rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1.5rem)}:host([scale=l]){--calcite-toggle-spacing:1rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 2rem)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.calendar-wrapper{--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}.input-wrapper .chevron-icon{color:var(--calcite-color-text-3)}.input-wrapper:focus-within .chevron-icon,.input-wrapper:active .chevron-icon,.input-wrapper:hover .chevron-icon{color:var(--calcite-color-text-1)}.toggle-icon{position:absolute;display:flex;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-color-border-input);background-color:var(--calcite-color-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-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-z-index);margin-inline:1px;background-color:var(--calcite-color-foreground-1);padding-inline:0.625rem;inset-inline-start:0}.menu-container{--calcite-floating-ui-z-index:var(--calcite-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:inset, left, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}.menu-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.menu-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.menu-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.menu-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block:0;left: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}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::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 CalciteInputDatePickerStyle0 = inputDatePickerCss;
 
 const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker extends HTMLElement {
@@ -476,6 +479,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
     connectedCallback() {
         connectInteractive(this);
         connectLocalized(this);
+        this.handleDateTimeFormatChange();
         const { open } = this;
         open && this.openHandler();
         if (this.min) {
@@ -550,23 +554,23 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
             locale: effectiveLocale,
             useGrouping: false,
         };
-        return (h(Host, { key: 'd2c7596b3d8c5bf59a47171801a73cf8325b0214', onBlur: this.blurHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: 'c9b2355ed515748260b93c580e7ce462fb363bb9', disabled: this.disabled }, this.localeData && (h("div", { key: 'b5ffdad5ecaf135d5d74e13f0eb148cd689d8276', class: CSS.inputContainer }, h("div", { key: '6950ddff12c7588c984fe86590938e4df8ce4ac0', class: CSS.inputWrapper, "data-position": "start", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setStartWrapper }, h("calcite-input-text", { key: 'd4444a1cccbf8112dfdee4ebaff7b4da246fd168', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
+        return (h(Host, { key: '38f3ea7b3206b0b5d404c6691d54811ce9e09753', onBlur: this.blurHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: '64296d7cf55e492e041eee729d969733f0aeeede', disabled: this.disabled }, this.localeData && (h("div", { key: 'bb1244e8a1ac6e32bc71f08a98d8007b17a3332d', class: CSS.inputContainer }, h("div", { key: 'fcb3e2430616bae57d9e09ea1f631bdb6c9810f0', class: CSS.inputWrapper, "data-position": "start", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setStartWrapper }, h("calcite-input-text", { key: '4c1e9dea4f553f206251bafefd05993b5c897b41', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-errormessage": IDS.validationMessage, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", "aria-invalid": toAriaBoolean(this.status === "invalid"), class: {
                 [CSS.input]: true,
                 [CSS.inputNoBottomBorder]: this.layout === "vertical" && this.range,
             }, disabled: disabled, icon: "calendar", onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputTextFocus: this.startInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, ref: this.setStartInput, role: "combobox", scale: this.scale, status: this.status }), !this.readOnly &&
-            this.renderToggleIcon(this.open && this.focusedInput === "start"), h("span", { key: 'fc01c4d6abf41f6d3de3553828d5eba47ab29f4e', "aria-hidden": "true", class: CSS.assistiveText, id: this.placeholderTextId }, "Date Format: ", this.localeData?.placeholder)), h("div", { key: '998ee127b35ce6ea8ab4481c7c9034c4b7175726', "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
+            this.renderToggleIcon(this.open && this.focusedInput === "start"), h("span", { key: '705abe452a2f49cc167f1051ca193b397d6cef9f', "aria-hidden": "true", class: CSS.assistiveText, id: this.placeholderTextId }, "Date Format: ", this.localeData?.placeholder)), h("div", { key: 'bf71124065fdfefa0a6024e245aee31eee3a5b5e', "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
                 [CSS.menu]: true,
                 [CSS.menuActive]: this.open,
-            }, id: this.dialogId, ref: this.setFloatingEl, role: "dialog" }, h("div", { key: '7fd228d5a4871a71acda67d8cddc19de68243c53', class: {
+            }, id: this.dialogId, ref: this.setFloatingEl, role: "dialog" }, h("div", { key: '9803f72d5454230914a2604cceb3b1d30fd32083', class: {
                 [CSS.calendarWrapper]: true,
                 [CSS.calendarWrapperEnd]: this.focusedInput === "end",
                 [FloatingCSS.animation]: true,
                 [FloatingCSS.animationActive]: this.open,
-            }, ref: this.setTransitionEl }, h("calcite-date-picker", { key: '5477699016423ab41aee9d324100c92d98aa8421', 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, ref: this.setDatePickerRef, scale: this.scale, tabIndex: this.open ? undefined : -1, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { key: '0f50ea7872f3b9139d8434972930f2bcf142cf38', class: CSS.horizontalArrowContainer }, h("calcite-icon", { key: 'ab18b23a1549bdfd859da64dd6f9d49fe3e96ad0', flipRtl: true, icon: "arrow-right", scale: getIconScale(this.scale) }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { key: '8691507261f2ee44f12d3496fb2889e84ad55b54', class: CSS.verticalArrowContainer }, h("calcite-icon", { key: '6b527d9782fc528041ec0e0e70ecbb85788ac7b2', icon: "arrow-down", scale: getIconScale(this.scale) }))), this.range && (h("div", { key: 'fdfea44f4bd7a8c242a454524a54e1617e1b491b', class: CSS.inputWrapper, "data-position": "end", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setEndWrapper }, h("calcite-input-text", { key: '7c907100f5388b7af81d827ef39544d68babefc1', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
+            }, ref: this.setTransitionEl }, h("calcite-date-picker", { key: '667c3488db40269e60d79f28f374a6cf9ff610da', 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, ref: this.setDatePickerRef, scale: this.scale, tabIndex: this.open ? undefined : -1, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { key: '1c657ea9c4b667035d58a13bffb784489586bbdd', class: CSS.horizontalArrowContainer }, h("calcite-icon", { key: '970d61e19c5372d503ef070fcbd30817b2231c86', flipRtl: true, icon: "arrow-right", scale: getIconScale(this.scale) }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { key: 'b5c83aafbddb396900c44b97d642b0c1c7b2a27b', class: CSS.verticalArrowContainer }, h("calcite-icon", { key: 'b00438be61ed6f73b1c0b074ff1a8b26ce32e7e2', icon: "arrow-down", scale: getIconScale(this.scale) }))), this.range && (h("div", { key: '38a7533192d085470cef7e59d091cebe8088980d', class: CSS.inputWrapper, "data-position": "end", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setEndWrapper }, h("calcite-input-text", { key: '03fbeddd6785ce5e6abb29d9c40ee34842376e31', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-errormessage": IDS.validationMessage, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", "aria-invalid": toAriaBoolean(this.status === "invalid"), class: {
                 [CSS.input]: true,
                 [CSS.inputBorderTopColorOne]: this.layout === "vertical" && this.range,
             }, disabled: disabled, icon: "calendar", onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputTextFocus: this.endInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, ref: this.setEndInput, role: "combobox", scale: this.scale, status: this.status }), !this.readOnly &&
-            this.renderToggleIcon(this.open && this.focusedInput === "end"))))), h(HiddenFormInputSlot, { key: '3dd51741ee6ceb9d470b21f81d592965a5d236a4', component: this }), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            this.renderToggleIcon(this.open && this.focusedInput === "end"))))), h(HiddenFormInputSlot, { key: '9086e6f1f425cb7c583bf8f195b877e42c6a6aa6', component: this }), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     renderToggleIcon(open) {
         return (
@@ -577,6 +581,14 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
         updateMessages(this, this.effectiveLocale);
         this.loadLocaleData();
     }
+    handleDateTimeFormatChange() {
+        const formattingOptions = {
+            // we explicitly set numberingSystem to prevent the browser-inferred value
+            // see https://github.com/Esri/calcite-design-system/issues/3079#issuecomment-1168964195 for more info
+            numberingSystem: getSupportedNumberingSystem(this.numberingSystem),
+        };
+        this.dateTimeFormat = new Intl.DateTimeFormat(getDateFormatSupportedLocale(this.effectiveLocale), formattingOptions);
+    }
     setReferenceEl() {
         const { focusedInput, layout, endWrapper, startWrapper } = this;
         this.referenceEl =
@@ -697,15 +709,8 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
         const endDate = this.range
             ? dateFromRange((Array.isArray(this.valueAsDate) && this.valueAsDate[1]) || undefined, this.minAsDate, this.maxAsDate)
             : null;
-        const formattingOptions = {
-            // we explicitly set numberingSystem to prevent the browser-inferred value
-            // see https://github.com/Esri/calcite-design-system/issues/3079#issuecomment-1168964195 for more info
-            numberingSystem: getSupportedNumberingSystem(this.numberingSystem),
-        };
-        const localizedDate = date && date.toLocaleDateString(this.effectiveLocale, formattingOptions);
-        const localizedEndDate = endDate && endDate.toLocaleDateString(this.effectiveLocale, formattingOptions);
-        this.setInputValue(localizedDate ?? "", "start");
-        this.setInputValue((this.range && localizedEndDate) ?? "", "end");
+        this.setInputValue((date && this.dateTimeFormat.format(date)) ?? "", "start");
+        this.setInputValue((this.range && endDate && this.dateTimeFormat.format(endDate)) ?? "", "end");
     }
     warnAboutInvalidValue(value) {
         console.warn(`The specified value "${value}" does not conform to the required format, "YYYY-MM-DD".`);
@@ -736,7 +741,8 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
         "max": ["onMaxChanged"],
         "open": ["openHandler"],
         "overlayPositioning": ["overlayPositioningHandler"],
-        "effectiveLocale": ["effectiveLocaleChange"],
+        "effectiveLocale": ["effectiveLocaleChange", "handleDateTimeFormatChange"],
+        "numberingSystem": ["handleDateTimeFormatChange"],
         "layout": ["setReferenceEl"],
         "focusedInput": ["setReferenceEl"]
     }; }
@@ -789,7 +795,8 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
         "max": ["onMaxChanged"],
         "open": ["openHandler"],
         "overlayPositioning": ["overlayPositioningHandler"],
-        "effectiveLocale": ["effectiveLocaleChange"],
+        "effectiveLocale": ["effectiveLocaleChange", "handleDateTimeFormatChange"],
+        "numberingSystem": ["handleDateTimeFormatChange"],
         "layout": ["setReferenceEl"],
         "focusedInput": ["setReferenceEl"]
     }]);

package/dist/components/input-message.js

@@ -10,7 +10,7 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const StatusIconDefaults = {
     valid: "check-circle",
@@ -44,7 +44,7 @@ const InputMessage = /*@__PURE__*/ proxyCustomElement(class InputMessage extends
     }
     render() {
         const hidden = this.el.hidden;
-        return (h(Host, { key: '807f74f1838b74f514cb6c79b91be23d634a7a9a', "calcite-hydrated-hidden": hidden }, this.renderIcon(this.requestedIcon), h("slot", { key: '15aa8635b2a9646f5b0b02d47e255073789799ef' })));
+        return (h(Host, { key: '4abc6b1bd6e85531a00bd92de1c18c6b9c27375b', "calcite-hydrated-hidden": hidden }, this.renderIcon(this.requestedIcon), h("slot", { key: 'f357f91ba9e220ea524c4aa14bf2b0c09b1c7064' })));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/input-number.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { a as getSlotted, i as isPrimaryPointerButton, s as setRequestedIcon, g as getElementDir } from './dom.js';
+import { i as isPrimaryPointerButton, s as setRequestedIcon, a as getSlotted, g as getElementDir, t as toAriaBoolean } from './dom.js';
 import { s as submitForm, c as connectForm, i as internalHiddenInputInputEvent, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { n as numberKeys } from './key.js';
@@ -23,7 +23,7 @@ import { d as defineCustomElement$1 } from './progress.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const CSS = {
     loader: "loader",
@@ -41,6 +41,9 @@ const CSS = {
     resizeIconWrapper: "resize-icon-wrapper",
     numberButtonItem: "number-button-item",
 };
+const IDS = {
+    validationMessage: "inputNumberValidationMessage",
+};
 const SLOTS = {
     action: "action",
 };
@@ -102,10 +105,12 @@ const InputNumber = /*@__PURE__*/ proxyCustomElement(class InputNumber extends H
             if (this.disabled) {
                 return;
             }
-            const slottedActionEl = getSlotted(this.el, "action");
-            if (event.target !== slottedActionEl) {
-                this.setFocus();
+            const composedPath = event.composedPath();
+            if (!composedPath.includes(this.inputWrapperEl) ||
+                composedPath.includes(this.actionWrapperEl)) {
+                return;
             }
+            this.setFocus();
         };
         this.inputNumberFocusHandler = () => {
             this.calciteInternalInputNumberFocus.emit();
@@ -583,27 +588,27 @@ const InputNumber = /*@__PURE__*/ proxyCustomElement(class InputNumber extends H
     // --------------------------------------------------------------------------
     render() {
         const dir = getElementDir(this.el);
-        const loader = (h("div", { key: '4d832947b4a683a0c74473a481e15eda1c3e6c6f', class: CSS.loader }, h("calcite-progress", { key: '90103aab3b5ab29cea99511b93ecfc52c2b20545', label: this.messages.loading, type: "indeterminate" })));
-        const inputClearButton = (h("button", { key: '409e8c4235cd733abfe5b46a499ec439432f0dda', "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, h("calcite-icon", { key: 'e4ade48bc9c6862d64e08674cb2784f230ce4980', icon: "x", scale: getIconScale(this.scale) })));
-        const iconEl = (h("calcite-icon", { key: 'dc6ce1cb7824c236d776124be25584f1c976f495', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
+        const loader = (h("div", { key: '4afc447c454d130ac4e983faa2a5a4390e500134', class: CSS.loader }, h("calcite-progress", { key: '8f14d3e88b4a3f9d1069b2f10a3b5377353b37cd', label: this.messages.loading, type: "indeterminate" })));
+        const inputClearButton = (h("button", { key: '60622dbfee3b9d3b96f779f37590d02863a5b395', "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, h("calcite-icon", { key: '98e61619db4e6cd25353bbb4cd3e998b47debdef', icon: "x", scale: getIconScale(this.scale) })));
+        const iconEl = (h("calcite-icon", { key: 'bd8c940cd1a47cc4051d9cbb30e19ce32748f82d', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
         const isHorizontalNumberButton = this.numberButtonType === "horizontal";
-        const numberButtonsHorizontalUp = (h("button", { key: 'd08c3ea83d6e00bf97f1e3f3d41a2caf4fb7d5eb', "aria-hidden": "true", class: {
+        const numberButtonsHorizontalUp = (h("button", { key: 'a33a45b1576ed55847411d9c0e493a4354188cee', "aria-hidden": "true", class: {
                 [CSS.numberButtonItem]: true,
                 [CSS.buttonItemHorizontal]: isHorizontalNumberButton,
-            }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { key: '7b55738e70f5aabdac824650fd6314f915b234a0', icon: "chevron-up", scale: getIconScale(this.scale) })));
-        const numberButtonsHorizontalDown = (h("button", { key: 'ed7abdf5e2eda7091f34e3808dd15f9090163564', "aria-hidden": "true", class: {
+            }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { key: 'b05ed816a0472df584918e6cdbeefca0f4ebccb6', icon: "chevron-up", scale: getIconScale(this.scale) })));
+        const numberButtonsHorizontalDown = (h("button", { key: '7e8466f04ec12caccd6703701934c8e6864e2ad1', "aria-hidden": "true", class: {
                 [CSS.numberButtonItem]: true,
                 [CSS.buttonItemHorizontal]: isHorizontalNumberButton,
-            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { key: '15c36fc1408a3c814a9fa5aa1b590fa02a29d7e3', icon: "chevron-down", scale: getIconScale(this.scale) })));
-        const numberButtonsVertical = (h("div", { key: 'a48133c6f0b067b5088731a663dfcfff4c1a06ba', class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
-        const prefixText = h("div", { key: '6b2099f39bbc08ef8d7e1540113d2bff6adb0798', class: CSS.prefix }, this.prefixText);
-        const suffixText = h("div", { key: '83f015b4af8dedb12d9d27bbe9a26d9ac9bc5052', class: CSS.suffix }, this.suffixText);
-        const childEl = (h("input", { "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.el.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint || this.el.getAttribute("enterkeyhint"), inputMode: this.el.inputMode || this.el.getAttribute("inputmode") || "decimal", key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputNumberBlurHandler, onFocus: this.inputNumberFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputNumberKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, type: "text", value: this.displayedValue }));
-        return (h(Host, { key: 'c24ad59519e7a556c17d73e9f4e1def1e1dd3eb8', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: '261dc376e7919a788656e281892ed421da04e696', disabled: this.disabled }, h("div", { key: 'e85dd19739baab9d11bcccd95b8f1ada51d25133', class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.numberButtonType === "horizontal" && !this.readOnly
+            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { key: 'b796613a0510d88c5a9a88e19f204dd1cfa3ae79', icon: "chevron-down", scale: getIconScale(this.scale) })));
+        const numberButtonsVertical = (h("div", { key: '7c0d61831b7d00d383b08bc69d130c93e4b41708', class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
+        const prefixText = h("div", { key: 'bde995b58c2be304e0f97751864932f4aba8b560', class: CSS.prefix }, this.prefixText);
+        const suffixText = h("div", { key: '09ecebb64862cc87c42f6a07eb43f4f492aafff9', class: CSS.suffix }, this.suffixText);
+        const childEl = (h("input", { "aria-errormessage": IDS.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid"), "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.el.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint || this.el.getAttribute("enterkeyhint"), inputMode: this.el.inputMode || this.el.getAttribute("inputmode") || "decimal", key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputNumberBlurHandler, onFocus: this.inputNumberFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputNumberKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, type: "text", value: this.displayedValue }));
+        return (h(Host, { key: '8bbe5d61c4d825064c541d69720c3dec29397bb6', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: '88981ec407b3ca3dc30e1f4639cc165f125a2e4f', disabled: this.disabled }, h("div", { key: 'b5147afb965eb8950451efd0188de34a126cb42a', class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, ref: (el) => (this.inputWrapperEl = el) }, this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalDown
-            : null, this.prefixText ? prefixText : null, h("div", { key: 'cd657c99a89880a9525701c2826f2165aab1a42a', class: CSS.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), h("div", { key: 'e653c7789da412239b7cc537857a131ac3670f3f', class: CSS.actionWrapper }, h("slot", { key: 'fc7ada3995cd15aa51f5f510a785c2b8bd9ee9a5', name: SLOTS.action })), this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null, this.suffixText ? suffixText : null, this.numberButtonType === "horizontal" && !this.readOnly
+            : null, this.prefixText ? prefixText : null, h("div", { key: 'ae8cfb188f1e67b2b26fd994e075b9d65f193aed', class: CSS.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), h("div", { key: '68e1e75159411ccc36981c488411741ba4f4863f', class: CSS.actionWrapper, ref: (el) => (this.actionWrapperEl = el) }, h("slot", { key: '68ffd29dc928221cf0e4f1b1e79fc71dc1cdbfa2', name: SLOTS.action })), this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null, this.suffixText ? suffixText : null, this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalUp
-            : null, h(HiddenFormInputSlot, { key: '2b7e0a60096c93a3d5708b1214376621b7acbedc', component: this })), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            : null, h(HiddenFormInputSlot, { key: '5efb494ebcff2e85bd0cb306ca1653dea1a79e36', component: this })), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/input-text.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { a as getSlotted, s as setRequestedIcon, g as getElementDir } from './dom.js';
+import { s as setRequestedIcon, a as getSlotted, g as getElementDir, t as toAriaBoolean } from './dom.js';
 import { s as submitForm, c as connectForm, i as internalHiddenInputInputEvent, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
@@ -22,7 +22,7 @@ import { d as defineCustomElement$1 } from './progress.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const CSS = {
     loader: "loader",
@@ -37,6 +37,9 @@ const CSS = {
     actionWrapper: "action-wrapper",
     resizeIconWrapper: "resize-icon-wrapper",
 };
+const IDS = {
+    validationMessage: "inputTextValidationMessage",
+};
 const SLOTS = {
     action: "action",
 };
@@ -100,10 +103,12 @@ const InputText = /*@__PURE__*/ proxyCustomElement(class InputText extends HTMLE
             if (this.disabled) {
                 return;
             }
-            const slottedActionEl = getSlotted(this.el, "action");
-            if (event.target !== slottedActionEl) {
-                this.setFocus();
+            const composedPath = event.composedPath();
+            if (!composedPath.includes(this.inputWrapperEl) ||
+                composedPath.includes(this.actionWrapperEl)) {
+                return;
             }
+            this.setFocus();
         };
         this.inputTextFocusHandler = () => {
             this.calciteInternalInputTextFocus.emit({
@@ -336,16 +341,16 @@ const InputText = /*@__PURE__*/ proxyCustomElement(class InputText extends HTMLE
     // --------------------------------------------------------------------------
     render() {
         const dir = getElementDir(this.el);
-        const loader = (h("div", { key: '312dd68091ac57f7846a3e52fc9d800c7fced5b3', class: CSS.loader }, h("calcite-progress", { key: '4debe7e7c6a87be5065019e831c65bc227a557a7', label: this.messages.loading, type: "indeterminate" })));
-        const inputClearButton = (h("button", { key: 'fbfd74e5d928be2208ee053208f07d17bf55b4e7', "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: -1, type: "button" }, h("calcite-icon", { key: '0abb236adde179134a48175ccc4bfadd483ab6bc', icon: "x", scale: getIconScale(this.scale) })));
-        const iconEl = (h("calcite-icon", { key: '4ca36a556db3bb93ff474e21d863bc4a20380421', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
-        const prefixText = h("div", { key: '066efbe771cc9ea9239f564c4ccd1996a6d8a365', class: CSS.prefix }, this.prefixText);
-        const suffixText = h("div", { key: '9b34f658b7c2dae1f0ccd07be23d91987847aad6', class: CSS.suffix }, this.suffixText);
-        const childEl = (h("input", { key: '198c91add28dd04f74be153edfa17be636126fb2', "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.el.autofocus ? true : null, class: {
+        const loader = (h("div", { key: '75e1d143289073aba71c8412dba86e4513ba438a', class: CSS.loader }, h("calcite-progress", { key: '17c1a8dfb11db87f62dd7664fb3ef152b14c89bc', label: this.messages.loading, type: "indeterminate" })));
+        const inputClearButton = (h("button", { key: '8c2fd4a9a50bea3e5c1e3061d275b76f84920e02', "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: -1, type: "button" }, h("calcite-icon", { key: '359da0464e284f76c85d92888789c6c20e6f6195', icon: "x", scale: getIconScale(this.scale) })));
+        const iconEl = (h("calcite-icon", { key: '643f3c87fb55ffbab119802fa6409263a003d337', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
+        const prefixText = h("div", { key: 'd5a48b6b2fef41fef60e6094d25af969fc6b95e3', class: CSS.prefix }, this.prefixText);
+        const suffixText = h("div", { key: '5b1e442c895c58386790e0fad7de474be4483a1b', class: CSS.suffix }, this.suffixText);
+        const childEl = (h("input", { key: '6ca205247c77545cca539d0e9e15ecc8a3bd7aeb', "aria-errormessage": IDS.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid"), "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.el.autofocus ? true : null, class: {
                 [CSS.editingEnabled]: this.editingEnabled,
                 [CSS.inlineChild]: !!this.inlineEditableEl,
             }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint || this.el.getAttribute("enterkeyhint"), inputMode: this.el.inputMode || this.el.getAttribute("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, ref: this.setChildElRef, required: this.required ? true : null, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: "text", value: this.value }));
-        return (h(Host, { key: '50c546649db474a19c5fedd528e1b61f4eeb1b52', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: '0157bca7fca6d8e1ea2cf14c1b046eef993945df', disabled: this.disabled }, h("div", { key: 'b582d6b2b539d4f1fb211d95de1102046b8f747e', class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.prefixText ? prefixText : null, h("div", { key: 'c1b703c7e5942ce0bcd4afd0ca5ed5d9456280fb', class: CSS.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), h("div", { key: '6890177760f4e8da27ab1b64675c875aa47c9467', class: CSS.actionWrapper }, h("slot", { key: '1c3f528c03e4ecc3fe4bde16437dd99a27026dce', name: SLOTS.action })), this.suffixText ? suffixText : null, h(HiddenFormInputSlot, { key: 'ff90c44312b1a2d93b44273455bd07ce4946b802', component: this })), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        return (h(Host, { key: 'ee459d49c166ac8587e9bcff82e469001bfb341d', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: 'b5b5ce9afc9e98b42ad3380057c48d745fe4a69f', disabled: this.disabled }, h("div", { key: '957c3665257e600acc1b0804e00c1d4d1786dd8c', class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, ref: (el) => (this.inputWrapperEl = el) }, this.prefixText ? prefixText : null, h("div", { key: '2f572c83b9816be8763d1c995a523f82013b76cd', class: CSS.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), h("div", { key: 'e02221edf4528d5663d3e48fcea5d6e5c1fe12c6', class: CSS.actionWrapper, ref: (el) => (this.actionWrapperEl = el) }, h("slot", { key: 'b49d331ad17da7f17bc2f44ee0d61f5b8c45ce93', name: SLOTS.action })), this.suffixText ? suffixText : null, h(HiddenFormInputSlot, { key: 'b93d1dec9fa8f48620f694e90c4e195e0138d1c6', component: this })), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/input.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { a as getSlotted, i as isPrimaryPointerButton, s as setRequestedIcon, g as getElementDir } from './dom.js';
+import { i as isPrimaryPointerButton, s as setRequestedIcon, a as getSlotted, g as getElementDir, t as toAriaBoolean } from './dom.js';
 import { s as submitForm, c as connectForm, i as internalHiddenInputInputEvent, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { n as numberKeys } from './key.js';
@@ -23,7 +23,7 @@ import { d as defineCustomElement$1 } from './progress.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const CSS = {
     loader: "loader",
@@ -41,6 +41,9 @@ const CSS = {
     resizeIconWrapper: "resize-icon-wrapper",
     numberButtonItem: "number-button-item",
 };
+const IDS = {
+    validationMessage: "inputValidationMessage",
+};
 const INPUT_TYPE_ICONS = {
     tel: "phone",
     password: "lock",
@@ -112,10 +115,12 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
             if (this.disabled) {
                 return;
             }
-            const slottedActionEl = getSlotted(this.el, "action");
-            if (event.target !== slottedActionEl) {
-                this.setFocus();
+            const composedPath = event.composedPath();
+            if (!composedPath.includes(this.inputWrapperEl) ||
+                composedPath.includes(this.actionWrapperEl)) {
+                return;
             }
+            this.setFocus();
         };
         this.inputFocusHandler = () => {
             this.calciteInternalInputFocus.emit();
@@ -638,41 +643,41 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
     // --------------------------------------------------------------------------
     render() {
         const dir = getElementDir(this.el);
-        const loader = (h("div", { key: '84c0bd7785985b5d3188bfcba054120fd32687be', class: CSS.loader }, h("calcite-progress", { key: '7f9df66f96b36087177fd8a82dd44f8a216a3a02', label: this.messages.loading, type: "indeterminate" })));
-        const inputClearButton = (h("button", { key: '320a27ded0752938ef6eb824e2fdf23de510e9fc', "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, h("calcite-icon", { key: '800e1cc87d8f4c8e915c01f74b4fd551c5daed4b', icon: "x", scale: getIconScale(this.scale) })));
-        const iconEl = (h("calcite-icon", { key: 'd22e551c7f109a1bc59670a766e6020887793346', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
+        const loader = (h("div", { key: 'f71fbad6f1d4ac025dd2ebd801883cde41f90bb3', class: CSS.loader }, h("calcite-progress", { key: 'f4a7dccfba5c4a39cb7d9d1bc7b215e85bbdfddc', label: this.messages.loading, type: "indeterminate" })));
+        const inputClearButton = (h("button", { key: '1b2b470eedcd68f0af1e026fea1b8ded87949b0f', "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, h("calcite-icon", { key: 'b34987e78276f18a361856b949ff110770d9e8b8', icon: "x", scale: getIconScale(this.scale) })));
+        const iconEl = (h("calcite-icon", { key: 'e9d94d4380bbe82d693007638a772b3f3e19538e', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
         const isHorizontalNumberButton = this.numberButtonType === "horizontal";
-        const numberButtonsHorizontalUp = (h("button", { key: 'd481136fc775193bdbd5a74634ed32a4964da0af', "aria-hidden": "true", class: {
+        const numberButtonsHorizontalUp = (h("button", { key: '4b57571f699841ab5c465b29b4d677ffd68ca9ef', "aria-hidden": "true", class: {
                 [CSS.numberButtonItem]: true,
                 [CSS.buttonItemHorizontal]: isHorizontalNumberButton,
-            }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { key: 'fc7d8f85747204cdba07c794cb8b645477f7ab49', icon: "chevron-up", scale: getIconScale(this.scale) })));
-        const numberButtonsHorizontalDown = (h("button", { key: '0b70f6228a37975997fc7e6f060aed85709eb992', "aria-hidden": "true", class: {
+            }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { key: '750d67b79ad8c3dfdb7bec8e38efe0f6b150af23', icon: "chevron-up", scale: getIconScale(this.scale) })));
+        const numberButtonsHorizontalDown = (h("button", { key: '6cff7df4c63e5c0388244dad1d185d6b6661d5a5', "aria-hidden": "true", class: {
                 [CSS.numberButtonItem]: true,
                 [CSS.buttonItemHorizontal]: isHorizontalNumberButton,
-            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { key: '22335c3ef4d615b4938b8ea1c2bc375eec65fd1b', icon: "chevron-down", scale: getIconScale(this.scale) })));
-        const numberButtonsVertical = (h("div", { key: 'd588f6413ab8cb2ee9bb25b7fa6c1ae436c09727', class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
-        const prefixText = h("div", { key: 'd653764ca74047a6b1c5a8526e1de5b5ebec2f95', class: CSS.prefix }, this.prefixText);
-        const suffixText = h("div", { key: 'a6d815022a67a216ecbf6a98476dd9c84f393031', class: CSS.suffix }, this.suffixText);
+            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { key: 'd0dd3b76e18a8c61d02da733f115e945ce67d3e4', icon: "chevron-down", scale: getIconScale(this.scale) })));
+        const numberButtonsVertical = (h("div", { key: 'b13c18cd510876510499b305f2fec5fe21b3d5c9', class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
+        const prefixText = h("div", { key: 'c6c1fb7f76df5c032b4f56ccf25589cf7aa6afa5', class: CSS.prefix }, this.prefixText);
+        const suffixText = h("div", { key: 'bcfbdaa2e2f0eb409e21ea79661c7fee51284565', class: CSS.suffix }, this.suffixText);
         const autofocus = this.el.autofocus || this.el.hasAttribute("autofocus") ? true : null;
         const enterKeyHint = this.el.enterKeyHint || this.el.getAttribute("enterkeyhint");
         const inputMode = this.el.inputMode || this.el.getAttribute("inputmode");
-        const localeNumberInput = this.type === "number" ? (h("input", { accept: this.accept, "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: autofocus, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: enterKeyHint, inputMode: inputMode, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, multiple: this.multiple, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, type: "text", value: this.displayedValue })) : null;
+        const localeNumberInput = this.type === "number" ? (h("input", { accept: this.accept, "aria-errormessage": IDS.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid"), "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: autofocus, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: enterKeyHint, inputMode: inputMode, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, multiple: this.multiple, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, type: "text", value: this.displayedValue })) : null;
         const childEl = this.type !== "number"
             ? [
-                h(this.childElType, { accept: this.accept, "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: autofocus, class: {
+                h(this.childElType, { accept: this.accept, "aria-errormessage": IDS.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid"), "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: autofocus, class: {
                         [CSS.editingEnabled]: this.editingEnabled,
                         [CSS.inlineChild]: !!this.inlineEditableEl,
                     }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: enterKeyHint, inputMode: inputMode, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, multiple: this.multiple, name: this.name, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: this.type, value: this.value }),
                 this.isTextarea ? (h("div", { class: CSS.resizeIconWrapper }, h("calcite-icon", { icon: "chevron-down", scale: getIconScale(this.scale) }))) : null,
             ]
             : null;
-        return (h(Host, { key: '8315bd55591b2d846d69d6070571a17e0030d5c7', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: 'af0643a63ad73a63a4cac7fda338f47cdd890bdd', disabled: this.disabled }, h("div", { key: 'b92bfabff6dfc6115c0f289cc7c7b788862f2054', class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
+        return (h(Host, { key: '198e766a57555d29b9e9d44f5a0f10c567e76580', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: '1edb87a044afe283f7d0f05634140c95eedea38d', disabled: this.disabled }, h("div", { key: 'e85d3459d2a562f9e31ae6a30a778eb6d13e7893', class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, ref: (el) => (this.inputWrapperEl = el) }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalDown
-            : null, this.prefixText ? prefixText : null, h("div", { key: '99b9ced0f2b9ee174b5c87603fd7cc6742d6da8e', class: CSS.wrapper }, localeNumberInput, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), h("div", { key: '86159febefcb1d62d05b2c15f7ffb5cec2810e69', class: CSS.actionWrapper }, h("slot", { key: '4e58925d61432853348fb86c9b1fea217ee6f45b', name: SLOTS.action })), this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly
+            : null, this.prefixText ? prefixText : null, h("div", { key: '75535abc2ee1295fa510dd872dadea8074bcc3d5', class: CSS.wrapper }, localeNumberInput, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), h("div", { key: 'dbdc59f5e4e35e5704e54ddebf67bef0e3a88956', class: CSS.actionWrapper, ref: (el) => (this.actionWrapperEl = el) }, h("slot", { key: '33a1ad6b9e45aeeb8586fe615b41eaa2590660c1', name: SLOTS.action })), this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly
             ? numberButtonsVertical
             : null, this.suffixText ? suffixText : null, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalUp
-            : null, h(HiddenFormInputSlot, { key: '24d8b7e1f68d438177e528c244b341b02ef7d5a0', component: this })), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            : null, h(HiddenFormInputSlot, { key: '36b79e21780048c535ad95ac4e2ad7ab9b3c91e2', component: this })), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/input2.js

@@ -6,7 +6,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 /**
  * Exported for testing purposes only

package/dist/components/instant-apps-filter-list2.js

@@ -101,6 +101,7 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
         this.filterCount = 0;
         this.view = undefined;
         this.zoomBtn = true;
+        this.resetFiltersOnDisconnect = true;
         this.loading = undefined;
         this.filterLayerExpressions = undefined;
         this.messages = undefined;
@@ -116,18 +117,43 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
     }
     watchLayerExpressions() {
         if (!this.hasLayerExpression) {
-            this.filterLayerExpressions = JSON.parse(JSON.stringify(this.layerExpressions));
+            this.filterLayerExpressions = structuredClone(this.layerExpressions);
             this.handleLayerExpressionsUpdate();
             this.hasLayerExpression = true;
         }
     }
+    getFilterInitState() {
+        return Promise.resolve({
+            initDefExpressions: this.initDefExpressions,
+            initMapImageExpressions: this.initMapImageExpressions,
+            initPointCloudFilters: this.initPointCloudFilters,
+        });
+    }
+    forceReset() {
+        this.filterLayerExpressions = structuredClone(this.layerExpressions);
+        this.resetAllFilters();
+        this.generateURLParams();
+        this.filterListReset.emit();
+        return Promise.resolve();
+    }
+    restoreFilters(filterParamString, filterInitState) {
+        this.filterLayerExpressions = structuredClone(this.layerExpressions);
+        this.initDefExpressions = filterInitState.initDefExpressions;
+        this.initMapImageExpressions = filterInitState.initMapImageExpressions;
+        this.initPointCloudFilters = filterInitState.initPointCloudFilters;
+        const filters = filterParamString === null || filterParamString === void 0 ? void 0 : filterParamString.split(';').map(filter => JSON.parse(filter));
+        if (filters) {
+            this.filterCount = this.applyFilters(filters);
+        }
+        return this.initExpressions();
+    }
     async componentWillLoad() {
         var _a;
         this.baseClass = getMode(this.el) === 'dark' ? baseClassDark : baseClassLight;
         await this.initializeModules();
         getMessages(this);
         this.hasLayerExpression = this.layerExpressions != null;
-        this.filterLayerExpressions = this.layerExpressions != null ? JSON.parse(JSON.stringify(this.layerExpressions)) : undefined;
+        this.filterLayerExpressions = this.layerExpressions != null ? structuredClone(this.layerExpressions) : [];
         this.disabled = ((_a = this.filterLayerExpressions) === null || _a === void 0 ? void 0 : _a.length) ? undefined : true;
         this.reactiveUtils.whenOnce(() => this.view).then(() => this.handleLayerExpressionsUpdate());
     }
@@ -139,7 +165,7 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
             if (this.hasLayerExpression) {
                 this.resetAllFilters();
             }
-            this.filterLayerExpressions = JSON.parse(JSON.stringify(this.layerExpressions));
+            this.filterLayerExpressions = structuredClone(this.layerExpressions);
             this.handleLayerExpressionsUpdate();
             this.hasLayerExpression = true;
         }
@@ -149,8 +175,10 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
         this.disabled = ((_a = this.filterLayerExpressions) === null || _a === void 0 ? void 0 : _a.length) > 0 ? undefined : true;
     }
     disconnectedCallback() {
-        this.filterLayerExpressions = JSON.parse(JSON.stringify(this.layerExpressions));
-        this.resetAllFilters();
+        if (this.resetFiltersOnDisconnect) {
+            this.filterLayerExpressions = structuredClone(this.layerExpressions);
+            this.resetAllFilters();
+        }
     }
     async initializeModules() {
         const [intl, geometryJsonUtils, reactiveUtils] = await loadModules(['esri/intl', 'esri/geometry/support/jsonUtils', 'esri/core/reactiveUtils']);
@@ -162,7 +190,7 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
     render() {
         const filterConfig = this.loading ? this.renderLoading() : this.initFilterConfig();
         const footer = this.closeBtn ? this.renderFullFooter() : this.renderFooter();
-        return (h(Host, { key: '23a4da63199da79792c55fa7c18178c534d34134' }, h("calcite-panel", { key: '374587dc39d146cc1d1fbb10ce491c8ab0ab872c', class: this.baseClass, ref: el => (this.panelEl = el) }, h("slot", { key: '282b136c8edf17ec301006493a1a229b968e92b0', slot: "header-content", name: "filter-header-content" }), h("slot", { key: 'ee1e49377b23151e87fd850708c44304abcb170d', slot: "header-actions-end", name: "filter-header-actions-end" }), h("div", { key: "filter-container", class: CSS.filterContainer }, filterConfig, footer))));
+        return (h(Host, { key: '181ccdf55ab638144081c06baec41e73132cf13b' }, h("calcite-panel", { key: 'd2ab223ac64dfa7772ff33189f80e25bd12e53a6', class: this.baseClass, ref: el => (this.panelEl = el) }, h("slot", { key: '2426703d0ce85635322e50d27e8c3d209a173e38', slot: "header-content", name: "filter-header-content" }), h("slot", { key: '4004059a7ce46f2d05ace0e98fa0be6f3aefd82a', slot: "header-actions-end", name: "filter-header-actions-end" }), h("div", { key: "filter-container", class: CSS.filterContainer }, filterConfig, footer))));
     }
     renderLoading() {
         return h("calcite-loader", { label: "Loading filters..." });
@@ -1070,6 +1098,7 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
         "filterCount": [1026, "filter-count"],
         "view": [16],
         "zoomBtn": [4, "zoom-btn"],
+        "resetFiltersOnDisconnect": [4, "reset-filters-on-disconnect"],
         "loading": [32],
         "filterLayerExpressions": [32],
         "messages": [32],
@@ -1078,7 +1107,10 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
         "hasLayerExpression": [32],
         "initDefExpressions": [32],
         "initMapImageExpressions": [32],
-        "initPointCloudFilters": [32]
+        "initPointCloudFilters": [32],
+        "getFilterInitState": [64],
+        "forceReset": [64],
+        "restoreFilters": [64]
     }, undefined, {
         "view": ["watchViewHandler"],
         "layerExpressions": ["watchLayerExpressions"]