@esri/solutions-components 0.10.9 → 0.10.11

package/dist/cjs/calcite-avatar.cjs.entry.js

@@ -0,0 +1,176 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5a0af791.js');
+const dom = require('./dom-6a9b6275.js');
+const utils = require('./utils-357c41eb.js');
+require('./guid-02e5380f.js');
+require('./resources-dfe71ff2.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.12.0
+ */
+const CSS = {
+    thumbnail: "thumbnail",
+    background: "background",
+    initials: "initials",
+    icon: "icon",
+};
+
+/*!
+ * 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.12.0
+ */
+/**
+ * Convert a string to a valid hex by hashing its contents
+ * and using the hash as a seed for three distinct color values
+ *
+ * @param string
+ */
+function stringToHex(string) {
+    // improve random color generation for similar strings.
+    string = mixStringDeterministically(string);
+    let hash = 0;
+    for (let i = 0; i < string.length; i++) {
+        hash = string.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    let hex = "#";
+    for (let j = 0; j < 3; j++) {
+        const value = (hash >> (j * 8)) & 0xff;
+        hex += ("00" + value.toString(16)).substr(-2);
+    }
+    return hex;
+}
+/**
+ * The function splits the string into two halves, reverses each half, and then concatenates them.
+ *
+ * @param {string} string - The input string to be mixed.
+ * @returns {string} - The mixed string.
+ */
+function mixStringDeterministically(string) {
+    const midPoint = Math.floor(string.length / 2);
+    const reversed = string.split("").reverse().join("");
+    return reversed.substring(midPoint) + reversed.slice(0, midPoint);
+}
+/**
+ * Find the hue of a color given the separate RGB color channels
+ *
+ * @param rgb
+ */
+function rgbToHue(rgb) {
+    let { r, g, b } = rgb;
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const delta = max - min;
+    if (max === min) {
+        return 0;
+    }
+    let hue = (max + min) / 2;
+    switch (max) {
+        case r:
+            hue = (g - b) / delta + (g < b ? 6 : 0);
+            break;
+        case g:
+            hue = (b - r) / delta + 2;
+            break;
+        case b:
+            hue = (r - g) / delta + 4;
+            break;
+    }
+    return Math.round(hue * 60);
+}
+/**
+ * For a hex color, find the hue
+ *
+ * @param hex {string} - form of "#------"
+ */
+function hexToHue(hex) {
+    return rgbToHue(utils.hexToRGB(hex));
+}
+
+const avatarCss = ":host{display:inline-block;overflow:hidden;border-radius:50%}:host([scale=s]){block-size:1.5rem;inline-size:1.5rem;font-size:var(--calcite-font-size--3)}:host([scale=m]){block-size:2rem;inline-size:2rem;font-size:var(--calcite-font-size--2)}:host([scale=l]){block-size:2.75rem;inline-size:2.75rem;font-size:var(--calcite-font-size-0)}.icon{display:flex}.background{display:flex;block-size:100%;inline-size:100%;align-items:center;justify-content:center;border-radius:50%}.initials{font-weight:var(--calcite-font-weight-bold);text-transform:uppercase;color:var(--calcite-color-text-2)}.thumbnail{block-size:100%;inline-size:100%;border-radius:50%}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteAvatarStyle0 = avatarCss;
+
+const Avatar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.scale = "m";
+        this.thumbnail = undefined;
+        this.fullName = undefined;
+        this.username = undefined;
+        this.userId = undefined;
+        this.label = undefined;
+        this.thumbnailFailedToLoad = false;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    render() {
+        return this.determineContent();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    determineContent() {
+        if (this.thumbnail && !this.thumbnailFailedToLoad) {
+            return (index.h("img", { alt: this.label || "", class: CSS.thumbnail, onError: () => (this.thumbnailFailedToLoad = true), src: this.thumbnail }));
+        }
+        const initials = this.generateInitials();
+        const backgroundColor = this.generateFillColor();
+        return (index.h("span", { "aria-label": this.label || this.fullName, class: CSS.background, role: "figure", style: { backgroundColor } }, initials ? (index.h("span", { "aria-hidden": "true", class: CSS.initials }, initials)) : (index.h("calcite-icon", { class: CSS.icon, icon: "user", scale: this.scale }))));
+    }
+    /**
+     * Generate a valid background color that is consistent and unique to this user
+     */
+    generateFillColor() {
+        const { userId, username, fullName, el } = this;
+        const theme = dom.getModeName(el);
+        const id = userId && `#${userId.substr(userId.length - 6)}`;
+        const name = username || fullName || "";
+        const hex = id && utils.isValidHex(id) ? id : stringToHex(name);
+        // if there is not unique information, or an invalid hex is produced, return a default
+        if ((!userId && !name) || !utils.isValidHex(hex)) {
+            return `var(--calcite-color-foreground-2)`;
+        }
+        const hue = hexToHue(hex);
+        const l = theme === "dark" ? 20 : 90;
+        return `hsl(${hue}, 60%, ${l}%)`;
+    }
+    /**
+     * Use fullName or username to generate initials
+     */
+    generateInitials() {
+        const { fullName, username } = this;
+        if (fullName) {
+            return fullName
+                .trim()
+                .split(" ")
+                .map((name) => name.substring(0, 1))
+                .join("");
+        }
+        else if (username) {
+            return username.substring(0, 2);
+        }
+        return false;
+    }
+    get el() { return index.getElement(this); }
+};
+Avatar.style = CalciteAvatarStyle0;
+
+exports.calcite_avatar = Avatar;

package/dist/cjs/calcite-block-section.cjs.entry.js

@@ -7,21 +7,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-696e53e6.js');
-const dom = require('./dom-63b93b3b.js');
-const key = require('./key-e4dd32ff.js');
-const locale = require('./locale-428354f0.js');
-const t9n = require('./t9n-e5fb720b.js');
-const loadable = require('./loadable-ef8f0acf.js');
-require('./guid-4bc1bc0f.js');
-require('./resources-8556a9ce.js');
-require('./observers-3440c668.js');
-require('./browser-02cbd1d9.js');
+const index = require('./index-5a0af791.js');
+const dom = require('./dom-6a9b6275.js');
+const key = require('./key-d6da79d8.js');
+const locale = require('./locale-42c21404.js');
+const t9n = require('./t9n-42ba6ea3.js');
+const loadable = require('./loadable-2e2626dc.js');
+require('./guid-02e5380f.js');
+require('./resources-dfe71ff2.js');
+require('./observers-8fed90f3.js');
+require('./browser-69696af0.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 IDS = {
     content: "content",

package/dist/cjs/calcite-block_5.cjs.entry.js

@@ -7,33 +7,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-696e53e6.js');
-const conditionalSlot = require('./conditionalSlot-fe01e316.js');
-const dom = require('./dom-63b93b3b.js');
-const interactive = require('./interactive-272b8484.js');
-const locale = require('./locale-428354f0.js');
-const t9n = require('./t9n-e5fb720b.js');
-const Heading = require('./Heading-5b274572.js');
-const loadable = require('./loadable-ef8f0acf.js');
-const openCloseComponent = require('./openCloseComponent-f9bf524b.js');
-const date = require('./date-163d7302.js');
-const browser = require('./browser-02cbd1d9.js');
-const floatingUi = require('./floating-ui-1ef64f13.js');
-const form = require('./form-4c0bbbe5.js');
-const key = require('./key-e4dd32ff.js');
-const label = require('./label-afda7da7.js');
-const focusTrapComponent = require('./focusTrapComponent-1881eaf7.js');
-const guid = require('./guid-4bc1bc0f.js');
-const component = require('./component-9d0efa36.js');
-const Validation = require('./Validation-a9d22fb7.js');
-const input = require('./input-2d5a669d.js');
+const index = require('./index-5a0af791.js');
+const conditionalSlot = require('./conditionalSlot-6b5d9b84.js');
+const dom = require('./dom-6a9b6275.js');
+const interactive = require('./interactive-89f913ba.js');
+const locale = require('./locale-42c21404.js');
+const t9n = require('./t9n-42ba6ea3.js');
+const Heading = require('./Heading-2333bcd2.js');
+const loadable = require('./loadable-2e2626dc.js');
+const openCloseComponent = require('./openCloseComponent-14628d11.js');
+const date = require('./date-5a57b606.js');
+const browser = require('./browser-69696af0.js');
+const floatingUi = require('./floating-ui-b20fd1f7.js');
+const form = require('./form-5229f1c8.js');
+const key = require('./key-d6da79d8.js');
+const label = require('./label-26ee0ddb.js');
+const focusTrapComponent = require('./focusTrapComponent-a4531bc7.js');
+const guid = require('./guid-02e5380f.js');
+const component = require('./component-a4c6a35d.js');
+const Validation = require('./Validation-aa47298a.js');
+const input = require('./input-33270a99.js');
 const loadModules = require('./loadModules-8567855e.js');
 const locale$1 = require('./locale-a1bcb6eb.js');
 const mode = require('./mode-3478ba36.js');
-require('./observers-3440c668.js');
-require('./resources-8556a9ce.js');
+require('./observers-8fed90f3.js');
+require('./resources-dfe71ff2.js');
 require('./debounce-7f1e04d6.js');
-require('./config-6a670c0d.js');
+require('./config-afe9063b.js');
 require('./esri-loader-08dc41bd.js');
 require('./_commonjsHelpers-baf43783.js');
 require('./languageUtil-a3e1eafd.js');
@@ -41,9 +41,9 @@ require('./languageUtil-a3e1eafd.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 IDS = {
+const IDS$1 = {
     content: "content",
     toggle: "toggle",
     header: "header",
@@ -86,7 +86,7 @@ const ICONS = {
     invalid: "exclamation-mark-triangle",
 };
 
-const blockCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}: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{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);padding:0px;transition-property:margin;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0.215, 0.440, 0.420, 0.880);flex-basis:auto}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.header{justify-content:flex-start}.header--has-text{padding:var(--calcite-spacing-md)}.header,.toggle{grid-area:header}.header-container{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto;grid-template-areas:\"handle header control menu actions-end\";grid-column:header-start/actions-end;grid-row:1/2}.content-start,.icon,.icon--start,.icon--end{margin-inline-end:var(--calcite-spacing-md)}.icon calcite-loader{margin-inline-end:var(--calcite-spacing-xxxs)}.icon--start,.icon--end{color:var(--calcite-color-text-3)}.actions-end{grid-area:actions-end}.toggle{margin:0px;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0px;font-family:var(--calcite-font-family);outline-color:transparent;text-align:initial;background-color:transparent}.toggle:hover{background-color:var(--calcite-color-foreground-2)}.toggle:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}calcite-loader[inline]{grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0px}.header .title .heading{padding:0px;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;color:var(--calcite-color-text-2);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);word-wrap:break-word;word-break:break-word}.description{margin-block-start:0.125rem;padding:0px;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-color-text-3);word-wrap:break-word;word-break:break-word}.icon{display:flex}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}@keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}.icon-end-container{display:flex;align-items:center;margin-inline-start:auto}.toggle-icon{align-self:center;justify-self:end;color:var(--calcite-color-text-3);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:var(--calcite-spacing-md)}.toggle:hover .toggle-icon{color:var(--calcite-color-text-1)}.container{position:relative;display:flex;block-size:100%;flex-direction:column}.content{position:relative;min-block-size:0px;flex:1 1 0%}@keyframes in{0%{opacity:0}100%{opacity:1}}.content{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;padding-block:var(--calcite-block-padding, var(--calcite-spacing-sm));padding-inline:var(--calcite-block-padding, var(--calcite-spacing-md))}.content-start{display:flex;align-items:center;color:var(--calcite-color-text-3)}.control-container{margin:0px;display:flex;grid-area:control}calcite-action-menu{grid-area:menu}.actions-end{display:flex;align-items:stretch}:host([open]){margin-block:0.5rem}:host([open]) .header .title .heading{color:var(--calcite-color-text-1)}:host([hidden]){display:none}[hidden]{display:none}";
+const blockCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}: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{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);padding:0px;transition-property:margin;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0.215, 0.440, 0.420, 0.880);flex-basis:auto;transition-duration:var(--calcite-animation-timing)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.header{justify-content:flex-start}.header--has-text{padding:var(--calcite-spacing-md)}.header,.toggle{grid-area:header}.header-container{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto;grid-template-areas:\"handle header control menu actions-end\";grid-column:header-start/actions-end;grid-row:1/2}.content-start,.icon,.icon--start,.icon--end{margin-inline-end:var(--calcite-spacing-md)}.icon calcite-loader{margin-inline-end:var(--calcite-spacing-xxxs)}.icon--start,.icon--end{color:var(--calcite-color-text-3)}.actions-end{grid-area:actions-end}.toggle{margin:0px;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0px;font-family:var(--calcite-font-family);outline-color:transparent;text-align:initial;background-color:transparent}.toggle:hover{background-color:var(--calcite-color-foreground-2)}.toggle:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}calcite-loader[inline]{grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0px}.header .title .heading{padding:0px;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;color:var(--calcite-color-text-2);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);word-wrap:break-word;word-break:break-word}.description{margin-block-start:0.125rem;padding:0px;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-color-text-3);word-wrap:break-word;word-break:break-word}.icon{display:flex}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}@keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}.icon-end-container{display:flex;align-items:center;margin-inline-start:auto}.toggle-icon{align-self:center;justify-self:end;color:var(--calcite-color-text-3);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:var(--calcite-spacing-md)}.toggle:hover .toggle-icon{color:var(--calcite-color-text-1)}.container{position:relative;display:flex;block-size:100%;flex-direction:column}.content{position:relative;min-block-size:0px;flex:1 1 0%}@keyframes in{0%{opacity:0}100%{opacity:1}}.content{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;padding-block:var(--calcite-block-padding, var(--calcite-spacing-sm));padding-inline:var(--calcite-block-padding, var(--calcite-spacing-md))}.content-start{display:flex;align-items:center;color:var(--calcite-color-text-3)}.control-container{margin:0px;display:flex;grid-area:control}calcite-action-menu{grid-area:menu}.actions-end{display:flex;align-items:stretch}:host([open]){margin-block:0.5rem}:host([open]) .header .title .heading{color:var(--calcite-color-text-1)}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteBlockStyle0 = blockCss;
 
 const Block = class {
@@ -97,7 +97,7 @@ const Block = class {
         this.calciteBlockClose = index.createEvent(this, "calciteBlockClose", 6);
         this.calciteBlockOpen = index.createEvent(this, "calciteBlockOpen", 6);
         this.calciteBlockToggle = index.createEvent(this, "calciteBlockToggle", 6);
-        this.openTransitionProp = "opacity";
+        this.openTransitionProp = "margin-top";
         // --------------------------------------------------------------------------
         //
         //  Private Methods
@@ -107,9 +107,6 @@ const Block = class {
             this.open = !this.open;
             this.calciteBlockToggle.emit();
         };
-        this.setTransitionEl = (el) => {
-            this.transitionEl = el;
-        };
         this.actionsEndSlotChangeHandler = (event) => {
             this.hasEndActions = dom.slotChangeHasAssignedElement(event);
         };
@@ -180,6 +177,7 @@ const Block = class {
         interactive.connectInteractive(this);
         locale.connectLocalized(this);
         t9n.connectMessages(this);
+        this.transitionEl = this.el;
     }
     disconnectedCallback() {
         interactive.disconnectInteractive(this);
@@ -246,14 +244,14 @@ const Block = class {
     render() {
         const { collapsible, el, loading, open, heading, messages, description } = this;
         const toggleLabel = open ? messages.collapse : messages.expand;
-        const headerContent = (index.h("header", { key: 'f4585d3c5e71d91a3de8b60a8085e79ad0f649c2', class: { [CSS$3.header]: true, [CSS$3.headerHasText]: !!(heading || description) }, id: IDS.header }, this.renderIcon("start"), this.renderContentStart(), this.renderLoaderStatusIcon(), this.renderTitle()));
+        const headerContent = (index.h("header", { key: '91deb640f5a591cd70dbb6328cdc588a40b600d5', class: { [CSS$3.header]: true, [CSS$3.headerHasText]: !!(heading || description) }, id: IDS$1.header }, this.renderIcon("start"), this.renderContentStart(), this.renderLoaderStatusIcon(), this.renderTitle()));
         const hasControl = !!dom.getSlotted(el, SLOTS.control);
         const hasMenuActions = !!dom.getSlotted(el, SLOTS.headerMenuActions);
         const collapseIcon = open ? ICONS.opened : ICONS.closed;
-        const headerNode = (index.h("div", { key: '6ca859e09a3b11219a3b412998c83e91c845753f', class: CSS$3.headerContainer }, this.dragHandle ? index.h("calcite-handle", { label: heading }) : null, collapsible ? (index.h("button", { "aria-controls": IDS.content, "aria-describedby": IDS.header, "aria-expanded": collapsible ? dom.toAriaBoolean(open) : null, class: CSS$3.toggle, id: IDS.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, index.h("div", { class: CSS$3.iconEndContainer }, this.renderIcon("end"), index.h("calcite-icon", { class: CSS$3.toggleIcon, icon: collapseIcon, scale: "s" })))) : this.iconEnd ? (index.h("div", null, headerContent, index.h("div", { class: CSS$3.iconEndContainer }, this.renderIcon("end")))) : (headerContent), hasControl ? (index.h("div", { "aria-labelledby": IDS.header, class: CSS$3.controlContainer }, index.h("slot", { name: SLOTS.control }))) : null, hasMenuActions ? (index.h("calcite-action-menu", { label: messages.options, overlayPositioning: this.overlayPositioning }, index.h("slot", { name: SLOTS.headerMenuActions }))) : null, this.renderActionsEnd()));
-        return (index.h(index.Host, { key: 'b42f72a17e0896ae7406d4f09f346cfb75e4c9ef' }, index.h(interactive.InteractiveContainer, { key: '181fef154faaa7f8d1dca2e08745c76141678053', disabled: this.disabled }, index.h("article", { key: 'd93e5b8f13529441ba99bcfcc51d5b31eab981ab', "aria-busy": dom.toAriaBoolean(loading), class: {
+        const headerNode = (index.h("div", { key: 'ebba82b4e065978eaa9ed1e59f05ad80843cc9ab', class: CSS$3.headerContainer }, this.dragHandle ? index.h("calcite-handle", { label: heading }) : null, collapsible ? (index.h("button", { "aria-controls": IDS$1.content, "aria-describedby": IDS$1.header, "aria-expanded": collapsible ? dom.toAriaBoolean(open) : null, class: CSS$3.toggle, id: IDS$1.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, index.h("div", { class: CSS$3.iconEndContainer }, this.renderIcon("end"), index.h("calcite-icon", { class: CSS$3.toggleIcon, icon: collapseIcon, scale: "s" })))) : this.iconEnd ? (index.h("div", null, headerContent, index.h("div", { class: CSS$3.iconEndContainer }, this.renderIcon("end")))) : (headerContent), hasControl ? (index.h("div", { "aria-labelledby": IDS$1.header, class: CSS$3.controlContainer }, index.h("slot", { name: SLOTS.control }))) : null, hasMenuActions ? (index.h("calcite-action-menu", { label: messages.options, overlayPositioning: this.overlayPositioning }, index.h("slot", { name: SLOTS.headerMenuActions }))) : null, this.renderActionsEnd()));
+        return (index.h(index.Host, { key: 'b5c12059b36785bf45ce61e7309a35278b928088' }, index.h(interactive.InteractiveContainer, { key: '90a5013ca2e30dadbd76c146700a53391f3aea62', disabled: this.disabled }, index.h("article", { key: '825f15336afb992c7ea8c718b5ffad7c4bf2507e', "aria-busy": dom.toAriaBoolean(loading), class: {
                 [CSS$3.container]: true,
-            } }, headerNode, index.h("section", { key: 'cd7759e5b8f695cd238b523075984b82de562005', "aria-labelledby": IDS.toggle, class: CSS$3.content, hidden: !open, id: IDS.content, ref: this.setTransitionEl }, this.renderScrim())))));
+            } }, headerNode, index.h("section", { key: '4f690563d78615b68a225456aaae593af6adb826', "aria-labelledby": IDS$1.toggle, class: CSS$3.content, hidden: !open, id: IDS$1.content }, this.renderScrim())))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -268,7 +266,7 @@ Block.style = CalciteBlockStyle0;
 /*!
  * 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 HEADING_LEVEL = 2;
 const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
@@ -276,7 +274,7 @@ const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
 /*!
  * 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
  */
 /**
  * CLDR cache.
@@ -752,7 +750,7 @@ DatePicker.style = CalciteDatePickerStyle0;
 /*!
  * 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.
@@ -782,7 +780,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$2 = {
     assistiveText: "assistive-text",
@@ -800,8 +798,11 @@ const CSS$2 = {
     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 = class {
@@ -1194,6 +1195,7 @@ const InputDatePicker = class {
     connectedCallback() {
         interactive.connectInteractive(this);
         locale.connectLocalized(this);
+        this.handleDateTimeFormatChange();
         const { open } = this;
         open && this.openHandler();
         if (this.min) {
@@ -1268,23 +1270,23 @@ const InputDatePicker = class {
             locale: effectiveLocale,
             useGrouping: false,
         };
-        return (index.h(index.Host, { key: 'd2c7596b3d8c5bf59a47171801a73cf8325b0214', onBlur: this.blurHandler, onKeyDown: this.keyDownHandler }, index.h(interactive.InteractiveContainer, { key: 'c9b2355ed515748260b93c580e7ce462fb363bb9', disabled: this.disabled }, this.localeData && (index.h("div", { key: 'b5ffdad5ecaf135d5d74e13f0eb148cd689d8276', class: CSS$2.inputContainer }, index.h("div", { key: '6950ddff12c7588c984fe86590938e4df8ce4ac0', class: CSS$2.inputWrapper, "data-position": "start", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setStartWrapper }, index.h("calcite-input-text", { key: 'd4444a1cccbf8112dfdee4ebaff7b4da246fd168', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-expanded": dom.toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
+        return (index.h(index.Host, { key: '38f3ea7b3206b0b5d404c6691d54811ce9e09753', onBlur: this.blurHandler, onKeyDown: this.keyDownHandler }, index.h(interactive.InteractiveContainer, { key: '64296d7cf55e492e041eee729d969733f0aeeede', disabled: this.disabled }, this.localeData && (index.h("div", { key: 'bb1244e8a1ac6e32bc71f08a98d8007b17a3332d', class: CSS$2.inputContainer }, index.h("div", { key: 'fcb3e2430616bae57d9e09ea1f631bdb6c9810f0', class: CSS$2.inputWrapper, "data-position": "start", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setStartWrapper }, index.h("calcite-input-text", { key: '4c1e9dea4f553f206251bafefd05993b5c897b41', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-errormessage": IDS.validationMessage, "aria-expanded": dom.toAriaBoolean(this.open), "aria-haspopup": "dialog", "aria-invalid": dom.toAriaBoolean(this.status === "invalid"), class: {
                 [CSS$2.input]: true,
                 [CSS$2.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"), index.h("span", { key: 'fc01c4d6abf41f6d3de3553828d5eba47ab29f4e', "aria-hidden": "true", class: CSS$2.assistiveText, id: this.placeholderTextId }, "Date Format: ", this.localeData?.placeholder)), index.h("div", { key: '998ee127b35ce6ea8ab4481c7c9034c4b7175726', "aria-hidden": dom.toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
+            this.renderToggleIcon(this.open && this.focusedInput === "start"), index.h("span", { key: '705abe452a2f49cc167f1051ca193b397d6cef9f', "aria-hidden": "true", class: CSS$2.assistiveText, id: this.placeholderTextId }, "Date Format: ", this.localeData?.placeholder)), index.h("div", { key: 'bf71124065fdfefa0a6024e245aee31eee3a5b5e', "aria-hidden": dom.toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
                 [CSS$2.menu]: true,
                 [CSS$2.menuActive]: this.open,
-            }, id: this.dialogId, ref: this.setFloatingEl, role: "dialog" }, index.h("div", { key: '7fd228d5a4871a71acda67d8cddc19de68243c53', class: {
+            }, id: this.dialogId, ref: this.setFloatingEl, role: "dialog" }, index.h("div", { key: '9803f72d5454230914a2604cceb3b1d30fd32083', class: {
                 [CSS$2.calendarWrapper]: true,
                 [CSS$2.calendarWrapperEnd]: this.focusedInput === "end",
                 [floatingUi.FloatingCSS.animation]: true,
                 [floatingUi.FloatingCSS.animationActive]: this.open,
-            }, ref: this.setTransitionEl }, index.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" && (index.h("div", { key: '0f50ea7872f3b9139d8434972930f2bcf142cf38', class: CSS$2.horizontalArrowContainer }, index.h("calcite-icon", { key: 'ab18b23a1549bdfd859da64dd6f9d49fe3e96ad0', flipRtl: true, icon: "arrow-right", scale: component.getIconScale(this.scale) }))), this.range && this.layout === "vertical" && this.scale !== "s" && (index.h("div", { key: '8691507261f2ee44f12d3496fb2889e84ad55b54', class: CSS$2.verticalArrowContainer }, index.h("calcite-icon", { key: '6b527d9782fc528041ec0e0e70ecbb85788ac7b2', icon: "arrow-down", scale: component.getIconScale(this.scale) }))), this.range && (index.h("div", { key: 'fdfea44f4bd7a8c242a454524a54e1617e1b491b', class: CSS$2.inputWrapper, "data-position": "end", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setEndWrapper }, index.h("calcite-input-text", { key: '7c907100f5388b7af81d827ef39544d68babefc1', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": dom.toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
+            }, ref: this.setTransitionEl }, index.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" && (index.h("div", { key: '1c657ea9c4b667035d58a13bffb784489586bbdd', class: CSS$2.horizontalArrowContainer }, index.h("calcite-icon", { key: '970d61e19c5372d503ef070fcbd30817b2231c86', flipRtl: true, icon: "arrow-right", scale: component.getIconScale(this.scale) }))), this.range && this.layout === "vertical" && this.scale !== "s" && (index.h("div", { key: 'b5c83aafbddb396900c44b97d642b0c1c7b2a27b', class: CSS$2.verticalArrowContainer }, index.h("calcite-icon", { key: 'b00438be61ed6f73b1c0b074ff1a8b26ce32e7e2', icon: "arrow-down", scale: component.getIconScale(this.scale) }))), this.range && (index.h("div", { key: '38a7533192d085470cef7e59d091cebe8088980d', class: CSS$2.inputWrapper, "data-position": "end", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setEndWrapper }, index.h("calcite-input-text", { key: '03fbeddd6785ce5e6abb29d9c40ee34842376e31', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-errormessage": IDS.validationMessage, "aria-expanded": dom.toAriaBoolean(this.open), "aria-haspopup": "dialog", "aria-invalid": dom.toAriaBoolean(this.status === "invalid"), class: {
                 [CSS$2.input]: true,
                 [CSS$2.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"))))), index.h(form.HiddenFormInputSlot, { key: '3dd51741ee6ceb9d470b21f81d592965a5d236a4', component: this }), this.validationMessage && this.status === "invalid" ? (index.h(Validation.Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            this.renderToggleIcon(this.open && this.focusedInput === "end"))))), index.h(form.HiddenFormInputSlot, { key: '9086e6f1f425cb7c583bf8f195b877e42c6a6aa6', component: this }), this.validationMessage && this.status === "invalid" ? (index.h(Validation.Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     renderToggleIcon(open) {
         return (
@@ -1295,6 +1297,14 @@ const InputDatePicker = class {
         t9n.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: locale.getSupportedNumberingSystem(this.numberingSystem),
+        };
+        this.dateTimeFormat = new Intl.DateTimeFormat(locale.getDateFormatSupportedLocale(this.effectiveLocale), formattingOptions);
+    }
     setReferenceEl() {
         const { focusedInput, layout, endWrapper, startWrapper } = this;
         this.referenceEl =
@@ -1415,15 +1425,8 @@ const InputDatePicker = class {
         const endDate = this.range
             ? date.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: locale.getSupportedNumberingSystem(this.numberingSystem),
-        };
-        const localizedDate = date$1 && date$1.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$1 && this.dateTimeFormat.format(date$1)) ?? "", "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".`);
@@ -1454,7 +1457,8 @@ const InputDatePicker = class {
         "max": ["onMaxChanged"],
         "open": ["openHandler"],
         "overlayPositioning": ["overlayPositioningHandler"],
-        "effectiveLocale": ["effectiveLocaleChange"],
+        "effectiveLocale": ["effectiveLocaleChange", "handleDateTimeFormatChange"],
+        "numberingSystem": ["handleDateTimeFormatChange"],
         "layout": ["setReferenceEl"],
         "focusedInput": ["setReferenceEl"]
     }; }
@@ -1529,6 +1533,7 @@ const InstantAppsFilterList = class {
         this.filterCount = 0;
         this.view = undefined;
         this.zoomBtn = true;
+        this.resetFiltersOnDisconnect = true;
         this.loading = undefined;
         this.filterLayerExpressions = undefined;
         this.messages = undefined;
@@ -1544,18 +1549,43 @@ const InstantAppsFilterList = class {
     }
     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 = mode.getMode(this.el) === 'dark' ? baseClassDark : baseClassLight;
         await this.initializeModules();
         locale$1.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());
     }
@@ -1567,7 +1597,7 @@ const InstantAppsFilterList = class {
             if (this.hasLayerExpression) {
                 this.resetAllFilters();
             }
-            this.filterLayerExpressions = JSON.parse(JSON.stringify(this.layerExpressions));
+            this.filterLayerExpressions = structuredClone(this.layerExpressions);
             this.handleLayerExpressionsUpdate();
             this.hasLayerExpression = true;
         }
@@ -1577,8 +1607,10 @@ const InstantAppsFilterList = class {
         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.loadModules(['esri/intl', 'esri/geometry/support/jsonUtils', 'esri/core/reactiveUtils']);
@@ -1590,7 +1622,7 @@ const InstantAppsFilterList = class {
     render() {
         const filterConfig = this.loading ? this.renderLoading() : this.initFilterConfig();
         const footer = this.closeBtn ? this.renderFullFooter() : this.renderFooter();
-        return (index.h(index.Host, { key: '23a4da63199da79792c55fa7c18178c534d34134' }, index.h("calcite-panel", { key: '374587dc39d146cc1d1fbb10ce491c8ab0ab872c', class: this.baseClass, ref: el => (this.panelEl = el) }, index.h("slot", { key: '282b136c8edf17ec301006493a1a229b968e92b0', slot: "header-content", name: "filter-header-content" }), index.h("slot", { key: 'ee1e49377b23151e87fd850708c44304abcb170d', slot: "header-actions-end", name: "filter-header-actions-end" }), index.h("div", { key: "filter-container", class: CSS$1.filterContainer }, filterConfig, footer))));
+        return (index.h(index.Host, { key: '181ccdf55ab638144081c06baec41e73132cf13b' }, index.h("calcite-panel", { key: 'd2ab223ac64dfa7772ff33189f80e25bd12e53a6', class: this.baseClass, ref: el => (this.panelEl = el) }, index.h("slot", { key: '2426703d0ce85635322e50d27e8c3d209a173e38', slot: "header-content", name: "filter-header-content" }), index.h("slot", { key: '4004059a7ce46f2d05ace0e98fa0be6f3aefd82a', slot: "header-actions-end", name: "filter-header-actions-end" }), index.h("div", { key: "filter-container", class: CSS$1.filterContainer }, filterConfig, footer))));
     }
     renderLoading() {
         return index.h("calcite-loader", { label: "Loading filters..." });