@esri/solutions-components 0.2.3 → 0.2.4

package/dist/cjs/calcite-loader.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"calcite-loader.entry.cjs.js","mappings":"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","names":["guid","h","Host"],"sources":["./node_modules/@esri/calcite-components/dist/collection/components/loader/loader.css?tag=calcite-loader&encapsulation=shadow","./node_modules/@esri/calcite-components/dist/collection/components/loader/loader.js"],"sourcesContent":["@charset \"UTF-8\";\n/* mixins & extensions */\n@keyframes in {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes in-down {\n  0% {\n    opacity: 0;\n    transform: translate3D(0, -5px, 0);\n  }\n  100% {\n    opacity: 1;\n    transform: translate3D(0, 0, 0);\n  }\n}\n@keyframes in-up {\n  0% {\n    opacity: 0;\n    transform: translate3D(0, 5px, 0);\n  }\n  100% {\n    opacity: 1;\n    transform: translate3D(0, 0, 0);\n  }\n}\n@keyframes in-scale {\n  0% {\n    opacity: 0;\n    transform: scale3D(0.95, 0.95, 1);\n  }\n  100% {\n    opacity: 1;\n    transform: scale3D(1, 1, 1);\n  }\n}\n:root {\n  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));\n  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);\n  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));\n  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));\n  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));\n}\n\n.calcite-animate {\n  opacity: 0;\n  animation-fill-mode: both;\n  animation-duration: var(--calcite-animation-timing);\n}\n\n.calcite-animate__in {\n  animation-name: in;\n}\n\n.calcite-animate__in-down {\n  animation-name: in-down;\n}\n\n.calcite-animate__in-up {\n  animation-name: in-up;\n}\n\n.calcite-animate__in-scale {\n  animation-name: in-scale;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --calcite-internal-duration-factor: 0.01;\n  }\n}\n/**\n* Currently only used in Checkbox.\n*/\n:root {\n  --calcite-floating-ui-transition: var(--calcite-animation-timing);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/**\n* CSS Custom Properties\n*\n* These properties can be overridden using the component's tag as selector.\n*\n* @prop --calcite-loader-font-size: Specifies the font size of the loading percentage when type is `\"determinate\"`.\n* @prop --calcite-loader-size: The width and height of a non-inline loader.\n* @prop --calcite-loader-size-inline: The width and height of an inline loader.\n*/\n:host{\n  position: relative;\n  margin-inline: auto;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  opacity: 1;\n  min-block-size: var(--calcite-loader-size);\n  font-size: var(--calcite-loader-font-size);\n  stroke: var(--calcite-ui-brand);\n  stroke-width: 3;\n  fill: none;\n  transform: scale(1, 1);\n  animation: loader-color-shift calc(var(--calcite-internal-animation-timing-slow) * 2) alternate-reverse infinite linear;\n  padding-block: var(--calcite-loader-padding, 4rem);\n}\n\n:host([scale=s]) {\n  --calcite-loader-font-size: var(--calcite-font-size--2);\n  --calcite-loader-size: 2rem;\n  --calcite-loader-size-inline: 0.75rem;\n}\n\n:host([scale=m]) {\n  --calcite-loader-font-size: var(--calcite-font-size-0);\n  --calcite-loader-size: 4rem;\n  --calcite-loader-size-inline: 1rem;\n}\n\n:host([scale=l]) {\n  --calcite-loader-font-size: var(--calcite-font-size-2);\n  --calcite-loader-size: 6rem;\n  --calcite-loader-size-inline: 1.5rem;\n}\n\n:host([no-padding]){\n  padding-block: 0px;\n}\n\n:host{\n  display: none;\n}\n\n:host([active]){\n  display: flex;\n}\n\n.loader__text{\n  display: block;\n  text-align: center;\n  font-size: var(--calcite-font-size--2);\n  line-height: 1rem;\n  color: var(--calcite-ui-text-1);\n  margin-block-start: calc(var(--calcite-loader-size) + 1.5rem);\n}\n\n.loader__percentage{\n  position: absolute;\n  display: block;\n  text-align: center;\n  color: var(--calcite-ui-text-1);\n  font-size: var(--calcite-loader-font-size);\n  inline-size: var(--calcite-loader-size);\n  inset-inline-start: 50%;\n  margin-inline-start: calc(var(--calcite-loader-size) / 2 * -1);\n  line-height: 0.25;\n  transform: scale(1, 1);\n}\n\n.loader__svgs{\n  position: absolute;\n  overflow: visible;\n  opacity: 1;\n  inline-size: var(--calcite-loader-size);\n  block-size: var(--calcite-loader-size);\n  inset-inline-start: 50%;\n  margin-inline-start: calc(var(--calcite-loader-size) / 2 * -1);\n  transform: scale(1, 1);\n}\n\n.loader__svg{\n  position: absolute;\n  inset-block-start: 0px;\n  transform-origin: center;\n  overflow: visible;\n  inset-inline-start: 0;\n  inline-size: var(--calcite-loader-size);\n  block-size: var(--calcite-loader-size);\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  animation-name: loader-clockwise;\n}\n\n@supports (display: grid) {\n  .loader__svg--1 {\n    animation-name: loader-offset-1;\n  }\n\n  .loader__svg--2 {\n    animation-name: loader-offset-2;\n  }\n\n  .loader__svg--3 {\n    animation-name: loader-offset-3;\n  }\n}\n:host([type=determinate]){\n  animation: none;\n  stroke: var(--calcite-ui-border-3);\n}\n:host([type=determinate]) .loader__svg--3{\n  animation: none;\n  stroke: var(--calcite-ui-brand);\n  stroke-dasharray: 150.79632;\n  transform: rotate(-90deg);\n  transition: all var(--calcite-internal-animation-timing-fast) linear;\n}\n\n:host([inline]){\n  position: relative;\n  margin: 0px;\n  animation: none;\n  stroke: currentColor;\n  stroke-width: 2;\n  padding-block: 0px;\n  block-size: var(--calcite-loader-size-inline);\n  min-block-size: var(--calcite-loader-size-inline);\n  inline-size: var(--calcite-loader-size-inline);\n  margin-inline-end: calc(var(--calcite-loader-size-inline) * 0.5);\n  vertical-align: calc(var(--calcite-loader-size-inline) * -1 * 0.2);\n}\n\n:host([active][inline]){\n  display: inline-block;\n}\n\n:host([inline]) .loader__svgs{\n  inset-block-start: 0px;\n  margin: 0px;\n  inset-inline-start: 0;\n  inline-size: var(--calcite-loader-size-inline);\n  block-size: var(--calcite-loader-size-inline);\n}\n\n:host([inline]) .loader__svg {\n  inline-size: var(--calcite-loader-size-inline);\n  block-size: var(--calcite-loader-size-inline);\n}\n\n:host([complete]){\n  opacity: 0;\n  transform: scale(0.75, 0.75);\n  transform-origin: center;\n  transition: opacity var(--calcite-internal-animation-timing-medium) linear 1000ms, transform var(--calcite-internal-animation-timing-medium) linear 1000ms;\n}\n\n:host([complete]) .loader__svgs{\n  opacity: 0;\n  transform: scale(0.75, 0.75);\n  transform-origin: center;\n  transition: opacity calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms, transform calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms;\n}\n\n:host([complete]) .loader__percentage {\n  color: var(--calcite-ui-brand);\n  transform: scale(1.05, 1.05);\n  transform-origin: center;\n  transition: color var(--calcite-internal-animation-timing-medium) linear, transform var(--calcite-internal-animation-timing-medium) linear;\n}\n\n/**\n  Segment variables\n  - i         index (1-3)\n  - size      length of the segment (0 - 100)\n  - growth    how much the segment grows during the animation\n              (size + growth should not exceed 100)\n  - duration  how long the segment takes to rotate 360° (seconds)\n*/\n.loader__svg--1 {\n  stroke-dasharray: 27.9252444444% 139.6262222222%;\n  animation-duration: calc(var(--calcite-internal-animation-timing-slow) * 2.4);\n}\n\n@keyframes loader-offset-1 {\n  0% {\n    stroke-dasharray: 27.9252444444% 251.3272%;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 139.6262222222% 139.6262222222%;\n    stroke-dashoffset: -83.7757333333%;\n  }\n  100% {\n    stroke-dasharray: 27.9252444444% 251.3272%;\n    stroke-dashoffset: -279.2524444444%;\n  }\n}\n.loader__svg--2 {\n  stroke-dasharray: 55.8504888889% 139.6262222222%;\n  animation-duration: calc(var(--calcite-internal-animation-timing-slow) * 3.2);\n}\n\n@keyframes loader-offset-2 {\n  0% {\n    stroke-dasharray: 55.8504888889% 223.4019555556%;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 139.6262222222% 139.6262222222%;\n    stroke-dashoffset: -97.7383555556%;\n  }\n  100% {\n    stroke-dasharray: 55.8504888889% 223.4019555556%;\n    stroke-dashoffset: -279.2524444444%;\n  }\n}\n.loader__svg--3 {\n  stroke-dasharray: 13.9626222222% 139.6262222222%;\n  animation-duration: calc(var(--calcite-internal-animation-timing-slow) * 3.867);\n}\n\n@keyframes loader-offset-3 {\n  0% {\n    stroke-dasharray: 13.9626222222% 265.2898222222%;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 139.6262222222% 139.6262222222%;\n    stroke-dashoffset: -76.7944222222%;\n  }\n  100% {\n    stroke-dasharray: 13.9626222222% 265.2898222222%;\n    stroke-dashoffset: -279.2524444444%;\n  }\n}\n@keyframes loader-color-shift {\n  0% {\n    stroke: var(--calcite-ui-brand);\n  }\n  33% {\n    stroke: var(--calcite-ui-brand-press);\n  }\n  66% {\n    stroke: var(--calcite-ui-brand-hover);\n  }\n  100% {\n    stroke: var(--calcite-ui-brand);\n  }\n}\n@keyframes loader-clockwise {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}","/*!\n * All material copyright ESRI, All Rights Reserved, unless otherwise specified.\n * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.\n * v1.0.0-beta.97\n */\nimport { h, Host } from \"@stencil/core\";\nimport { guid } from \"../../utils/guid\";\nexport class Loader {\n  constructor() {\n    //--------------------------------------------------------------------------\n    //\n    //  Properties\n    //\n    //--------------------------------------------------------------------------\n    /** When `true`, the component is active. */\n    this.active = false;\n    /** When `true`, displays smaller and appears to the left of the text. */\n    this.inline = false;\n    /** Specifies the size of the component. */\n    this.scale = \"m\";\n    /** The component's value. Valid only for `\"determinate\"` indicators. Percent complete of 100. */\n    this.value = 0;\n    /** Text that displays under the component's indicator. */\n    this.text = \"\";\n    /**\n     * Disables spacing around the component.\n     *\n     * @deprecated Use `--calcite-loader-padding` CSS variable instead.\n     */\n    this.noPadding = false;\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n  render() {\n    const { el, inline, label, scale, text, type, value } = this;\n    const id = el.id || guid();\n    const radiusRatio = 0.45;\n    const size = inline ? this.getInlineSize(scale) : this.getSize(scale);\n    const radius = size * radiusRatio;\n    const viewbox = `0 0 ${size} ${size}`;\n    const isDeterminate = type === \"determinate\";\n    const circumference = 2 * radius * Math.PI;\n    const progress = (value / 100) * circumference;\n    const remaining = circumference - progress;\n    const valueNow = Math.floor(value);\n    const hostAttributes = {\n      \"aria-valuenow\": valueNow,\n      \"aria-valuemin\": 0,\n      \"aria-valuemax\": 100,\n      complete: valueNow === 100\n    };\n    const svgAttributes = { r: radius, cx: size / 2, cy: size / 2 };\n    const determinateStyle = { \"stroke-dasharray\": `${progress} ${remaining}` };\n    return (h(Host, { \"aria-label\": label, id: id, role: \"progressbar\", ...(isDeterminate ? hostAttributes : {}) }, h(\"div\", { class: \"loader__svgs\" }, h(\"svg\", { class: \"loader__svg loader__svg--1\", viewBox: viewbox }, h(\"circle\", { ...svgAttributes })), h(\"svg\", { class: \"loader__svg loader__svg--2\", viewBox: viewbox }, h(\"circle\", { ...svgAttributes })), h(\"svg\", { class: \"loader__svg loader__svg--3\", viewBox: viewbox, ...(isDeterminate ? { style: determinateStyle } : {}) }, h(\"circle\", { ...svgAttributes }))), text && h(\"div\", { class: \"loader__text\" }, text), isDeterminate && h(\"div\", { class: \"loader__percentage\" }, value)));\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n  /**\n   * Return the proper sizes based on the scale property\n   *\n   * @param scale\n   */\n  getSize(scale) {\n    return {\n      s: 32,\n      m: 56,\n      l: 80\n    }[scale];\n  }\n  getInlineSize(scale) {\n    return {\n      s: 12,\n      m: 16,\n      l: 20\n    }[scale];\n  }\n  static get is() { return \"calcite-loader\"; }\n  static get encapsulation() { return \"shadow\"; }\n  static get originalStyleUrls() {\n    return {\n      \"$\": [\"loader.scss\"]\n    };\n  }\n  static get styleUrls() {\n    return {\n      \"$\": [\"loader.css\"]\n    };\n  }\n  static get properties() {\n    return {\n      \"active\": {\n        \"type\": \"boolean\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"boolean\",\n          \"resolved\": \"boolean\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"When `true`, the component is active.\"\n        },\n        \"attribute\": \"active\",\n        \"reflect\": true,\n        \"defaultValue\": \"false\"\n      },\n      \"inline\": {\n        \"type\": \"boolean\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"boolean\",\n          \"resolved\": \"boolean\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"When `true`, displays smaller and appears to the left of the text.\"\n        },\n        \"attribute\": \"inline\",\n        \"reflect\": true,\n        \"defaultValue\": \"false\"\n      },\n      \"label\": {\n        \"type\": \"string\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"string\",\n          \"resolved\": \"string\",\n          \"references\": {}\n        },\n        \"required\": true,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"Accessible name for the component.\"\n        },\n        \"attribute\": \"label\",\n        \"reflect\": false\n      },\n      \"scale\": {\n        \"type\": \"string\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"Scale\",\n          \"resolved\": \"\\\"l\\\" | \\\"m\\\" | \\\"s\\\"\",\n          \"references\": {\n            \"Scale\": {\n              \"location\": \"import\",\n              \"path\": \"../interfaces\"\n            }\n          }\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"Specifies the size of the component.\"\n        },\n        \"attribute\": \"scale\",\n        \"reflect\": true,\n        \"defaultValue\": \"\\\"m\\\"\"\n      },\n      \"type\": {\n        \"type\": \"string\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"\\\"indeterminate\\\" | \\\"determinate\\\"\",\n          \"resolved\": \"\\\"determinate\\\" | \\\"indeterminate\\\"\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"Specifies the component type.\\n\\nUse `\\\"indeterminate\\\"` if finding actual progress value is impossible.\"\n        },\n        \"attribute\": \"type\",\n        \"reflect\": true\n      },\n      \"value\": {\n        \"type\": \"number\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"number\",\n          \"resolved\": \"number\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"The component's value. Valid only for `\\\"determinate\\\"` indicators. Percent complete of 100.\"\n        },\n        \"attribute\": \"value\",\n        \"reflect\": false,\n        \"defaultValue\": \"0\"\n      },\n      \"text\": {\n        \"type\": \"string\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"string\",\n          \"resolved\": \"string\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": true,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"Text that displays under the component's indicator.\"\n        },\n        \"attribute\": \"text\",\n        \"reflect\": false,\n        \"defaultValue\": \"\\\"\\\"\"\n      },\n      \"noPadding\": {\n        \"type\": \"boolean\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"boolean\",\n          \"resolved\": \"boolean\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [{\n              \"name\": \"deprecated\",\n              \"text\": \"Use `--calcite-loader-padding` CSS variable instead.\"\n            }],\n          \"text\": \"Disables spacing around the component.\"\n        },\n        \"attribute\": \"no-padding\",\n        \"reflect\": true,\n        \"defaultValue\": \"false\"\n      }\n    };\n  }\n  static get elementRef() { return \"el\"; }\n}\n"],"version":3}

package/dist/cjs/{solution-configuration.cjs.entry.js → calcite-modal_2.cjs.entry.js}

@@ -8,12 +8,447 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a86078a0.js');
-const solutionStore = require('./solution-store-e2fc11ac.js');
+const dom = require('./dom-4a580af6.js');
+const observers = require('./observers-5311faf8.js');
+const conditionalSlot = require('./conditionalSlot-2defe83d.js');
+const openCloseComponent = require('./openCloseComponent-bf986132.js');
+const solutionStore = require('./solution-store-09b3fc53.js');
 const locale = require('./locale-746a095d.js');
+require('./resources-b56bce71.js');
+require('./guid-84ac4d91.js');
 require('./index-d7f9770d.js');
 require('./interfaces-ab603e16.js');
 require('./_commonjsHelpers-6aafa5de.js');
 
+/**
+ * Traverses the slots of the open shadowroots and returns all children matching the query.
+ * @param {ShadowRoot | HTMLElement} root
+ * @param skipNode
+ * @param isMatch
+ * @param {number} maxDepth
+ * @param {number} depth
+ * @returns {HTMLElement[]}
+ */
+function queryShadowRoot(root, skipNode, isMatch, maxDepth = 20, depth = 0) {
+    let matches = [];
+    // If the depth is above the max depth, abort the searching here.
+    if (depth >= maxDepth) {
+        return matches;
+    }
+    // Traverses a slot element
+    const traverseSlot = ($slot) => {
+        // Only check nodes that are of the type Node.ELEMENT_NODE
+        // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
+        const assignedNodes = $slot.assignedNodes().filter(node => node.nodeType === 1);
+        if (assignedNodes.length > 0) {
+            return queryShadowRoot(assignedNodes[0].parentElement, skipNode, isMatch, maxDepth, depth + 1);
+        }
+        return [];
+    };
+    // Go through each child and continue the traversing if necessary
+    // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.
+    // Therefore we fallback to an empty array if it is undefined.
+    const children = Array.from(root.children || []);
+    for (const $child of children) {
+        // Check if the node and its descendants should be skipped
+        if (skipNode($child)) {
+            continue;
+        }
+        // If the child matches we always add it
+        if (isMatch($child)) {
+            matches.push($child);
+        }
+        if ($child.shadowRoot != null) {
+            matches.push(...queryShadowRoot($child.shadowRoot, skipNode, isMatch, maxDepth, depth + 1));
+        }
+        else if ($child.tagName === "SLOT") {
+            matches.push(...traverseSlot($child));
+        }
+        else {
+            matches.push(...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1));
+        }
+    }
+    return matches;
+}
+
+/**
+ * Returns whether the element is hidden.
+ * @param $elem
+ */
+function isHidden($elem) {
+    return $elem.hasAttribute("hidden")
+        || ($elem.hasAttribute("aria-hidden") && $elem.getAttribute("aria-hidden") !== "false")
+        // A quick and dirty way to check whether the element is hidden.
+        // For a more fine-grained check we could use "window.getComputedStyle" but we don't because of bad performance.
+        // If the element has visibility set to "hidden" or "collapse", display set to "none" or opacity set to "0" through CSS
+        // we won't be able to catch it here. We accept it due to the huge performance benefits.
+        || $elem.style.display === `none`
+        || $elem.style.opacity === `0`
+        || $elem.style.visibility === `hidden`
+        || $elem.style.visibility === `collapse`;
+    // If offsetParent is null we can assume that the element is hidden
+    // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null
+    //|| $elem.offsetParent == null;
+}
+/**
+ * Returns whether the element is disabled.
+ * @param $elem
+ */
+function isDisabled($elem) {
+    return $elem.hasAttribute("disabled")
+        || ($elem.hasAttribute("aria-disabled") && $elem.getAttribute("aria-disabled") !== "false");
+}
+/**
+ * Determines whether an element is focusable.
+ * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194
+ * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable
+ * @param $elem
+ */
+function isFocusable($elem) {
+    // Discard elements that are removed from the tab order.
+    if ($elem.getAttribute("tabindex") === "-1" || isHidden($elem) || isDisabled($elem)) {
+        return false;
+    }
+    return (
+    // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists
+    $elem.hasAttribute("tabindex")
+        // Anchor tags or area tags with a href set
+        || ($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) && $elem.hasAttribute("href")
+        // Form elements which are not disabled
+        || ($elem instanceof HTMLButtonElement
+            || $elem instanceof HTMLInputElement
+            || $elem instanceof HTMLTextAreaElement
+            || $elem instanceof HTMLSelectElement)
+        // IFrames
+        || $elem instanceof HTMLIFrameElement);
+}
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.97
+ */
+const CSS = {
+  modal: "modal",
+  modalOpen: "modal--open",
+  title: "title",
+  header: "header",
+  footer: "footer",
+  scrim: "scrim",
+  back: "back",
+  close: "close",
+  secondary: "secondary",
+  primary: "primary",
+  overflowHidden: "overflow-hidden",
+  // these classes help apply the animation in phases to only set transform on open/close
+  // this helps avoid a positioning issue for any floating-ui-owning children
+  openingIdle: "modal--opening-idle",
+  openingActive: "modal--opening-active",
+  closingIdle: "modal--closing-idle",
+  closingActive: "modal--closing-active"
+};
+const ICONS = {
+  close: "x"
+};
+const SLOTS = {
+  content: "content",
+  header: "header",
+  back: "back",
+  secondary: "secondary",
+  primary: "primary"
+};
+const TEXT = {
+  close: "Close"
+};
+
+const modalCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:fixed;inset:0px;z-index:700;display:flex;align-items:center;justify-content:center;overflow-y:hidden;color:var(--calcite-ui-text-2);opacity:0;visibility:hidden !important;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88)}:host([scale=s]){--calcite-modal-padding:0.75rem;--calcite-modal-padding-large:1rem;--calcite-modal-title-text:var(--calcite-font-size-1);--calcite-modal-content-text:var(--calcite-font-size--1);--calcite-modal-padding-internal:0.75rem;--calcite-modal-padding-large-internal:1rem;--calcite-modal-title-text-internal:var(--calcite-font-size-1);--calcite-modal-content-text-internal:var(--calcite-font-size--1)}:host([scale=m]){--calcite-modal-padding:1rem;--calcite-modal-padding-large:1.25rem;--calcite-modal-title-text:var(--calcite-font-size-2);--calcite-modal-content-text:var(--calcite-font-size-0);--calcite-modal-padding-internal:1rem;--calcite-modal-padding-large-internal:1.25rem;--calcite-modal-title-text-internal:var(--calcite-font-size-2);--calcite-modal-content-text-internal:var(--calcite-font-size-0)}:host([scale=l]){--calcite-modal-padding:1.25rem;--calcite-modal-padding-large:1.5rem;--calcite-modal-title-text:var(--calcite-font-size-3);--calcite-modal-content-text:var(--calcite-font-size-1);--calcite-modal-padding-internal:1.25rem;--calcite-modal-padding-large-internal:1.5rem;--calcite-modal-title-text-internal:var(--calcite-font-size-3);--calcite-modal-content-text-internal:var(--calcite-font-size-1)}.scrim{--calcite-scrim-background:rgba(0, 0, 0, 0.75);position:fixed;inset:0px;display:flex;overflow-y:hidden}.modal{pointer-events:none;z-index:800;float:none;margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;overflow:hidden;border-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);opacity:0;--tw-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);--tw-shadow-colored:0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-overflow-scrolling:touch;visibility:hidden;transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);--calcite-modal-hidden-position:translate3d(0, 20px, 0);--calcite-modal-shown-position:translate3d(0, 0, 0)}.modal--opening-idle{transform:var(--calcite-modal-hidden-position)}.modal--opening-active{transform:var(--calcite-modal-shown-position)}.modal--closing-idle{transform:var(--calcite-modal-shown-position)}.modal--closing-active{transform:var(--calcite-modal-hidden-position)}:host([open]){opacity:1;visibility:visible !important;transition-delay:0ms}:host([open]) .modal--open{pointer-events:auto;visibility:visible;opacity:1;transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition-delay:0ms}.header{z-index:400;display:flex;min-inline-size:0px;max-inline-size:100%;border-start-start-radius:0.25rem;border-start-end-radius:0.25rem;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1);flex:0 0 auto}.close{order:2;margin:0px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-style:none;background-color:transparent;color:var(--calcite-ui-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-start-end-radius:0.25rem;padding-block:var(--calcite-modal-padding, var(--calcite-modal-padding-internal));padding-inline:var(--calcite-modal-padding, var(--calcite-modal-padding-internal));flex:0 0 auto}.close calcite-icon{pointer-events:none;vertical-align:-2px}.close:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.close:hover,.close:focus,.close:active{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}.title{order:1;display:flex;min-inline-size:0px;align-items:center;flex:1 1 auto;padding-block:var(--calcite-modal-padding, var(--calcite-model-padding-internal));padding-inline:var(--calcite-modal-padding-large, var(--calcite-modal-padding-large-internal))}slot[name=header]::slotted(*),*::slotted([slot=header]){margin:0px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-1);font-size:var(--calcite-modal-title-text, var(--calcite-modal-title-text-internal))}.content{position:relative;box-sizing:border-box;display:block;block-size:100%;overflow:auto;background-color:var(--calcite-ui-foreground-1);padding:0px;max-block-size:calc(100vh - 12rem)}.content--spaced{padding:var(--calcite-modal-padding)}.content--no-footer{border-end-end-radius:0.25rem;border-end-start-radius:0.25rem}slot[name=content]::slotted(*),*::slotted([slot=content]){font-size:var(--calcite-modal-content-text, var(--calcite-modal-context-text-internal))}:host([background-color=grey]) .content{background-color:var(--calcite-ui-background)}.footer{z-index:400;-webkit-margin-before:auto;margin-block-start:auto;box-sizing:border-box;display:flex;inline-size:100%;justify-content:space-between;border-end-end-radius:0.25rem;border-end-start-radius:0.25rem;border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1);flex:0 0 auto;padding-block:var(--calcite-modal-padding, var(--calcite-modal-padding-internal));padding-inline:var(--calcite-modal-padding-large, var(--calcite-modal-padding-large-internal))}.footer--hide-back .back,.footer--hide-secondary .secondary{display:none}.back{display:block;-webkit-margin-end:auto;margin-inline-end:auto}.secondary{margin-inline:0.25rem;display:block}slot[name=primary]{display:block}:host([width=small]) .modal{inline-size:auto}:host([width=s]) .modal{max-inline-size:32rem}@media screen and (max-width: 35rem){:host([width=s]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}:host([width=s]) .content{flex:1 1 auto;max-block-size:unset}:host([width=s][docked]){align-items:flex-end}}:host([width=m]) .modal{max-inline-size:48rem}@media screen and (max-width: 51rem){:host([width=m]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}:host([width=m]) .content{flex:1 1 auto;max-block-size:unset}:host([width=m][docked]){align-items:flex-end}}:host([width=l]) .modal{max-inline-size:94rem}@media screen and (max-width: 97rem){:host([width=l]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}:host([width=l]) .content{flex:1 1 auto;max-block-size:unset}:host([width=l][docked]){align-items:flex-end}}:host([fullscreen]){background-color:transparent}:host([fullscreen]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;--calcite-modal-hidden-position:translate3D(0, 20px, 0) scale(0.95);--calcite-modal-shown-position:translate3D(0, 0, 0) scale(1)}:host([fullscreen]) .content{max-block-size:100%;flex:1 1 auto}:host([open][fullscreen]) .header{border-radius:0}:host([open][fullscreen]) .footer{border-radius:0}:host([docked]) .modal{block-size:auto}:host([docked]) .content{block-size:auto;flex:1 1 auto}@media screen and (max-width: 860px){:host([docked]) .modal{border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}:host([docked]) .close{border-start-end-radius:var(--calcite-border-radius)}}:host([color=red]) .modal{border-color:var(--calcite-ui-danger)}:host([color=blue]) .modal{border-color:var(--calcite-ui-info)}:host([color=red]) .modal,:host([color=blue]) .modal{border-width:0px;border-block-start-width:4px;border-style:solid}:host([color=red]) .header,:host([color=blue]) .header{border-radius:0.25rem;border-end-end-radius:0px;border-end-start-radius:0px}@media screen and (max-width: 860px){slot[name=header]::slotted(*),*::slotted([slot=header]){font-size:var(--calcite-font-size-1)}.footer{position:sticky;inset-block-end:0px}}@media screen and (max-width: 480px){.footer{flex-direction:column}.back,.secondary{margin:0px;-webkit-margin-after:0.25rem;margin-block-end:0.25rem}}";
+
+const isFocusableExtended = (el) => {
+  return dom.isCalciteFocusable(el) || isFocusable(el);
+};
+const getFocusableElements = (el) => {
+  return queryShadowRoot(el, isHidden, isFocusableExtended);
+};
+const Modal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteModalBeforeClose = index.createEvent(this, "calciteModalBeforeClose", 6);
+    this.calciteModalClose = index.createEvent(this, "calciteModalClose", 6);
+    this.calciteModalBeforeOpen = index.createEvent(this, "calciteModalBeforeOpen", 6);
+    this.calciteModalOpen = index.createEvent(this, "calciteModalOpen", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * When `true`, the component is active.
+     *
+     * @deprecated use `open` instead.
+     */
+    this.active = false;
+    /** When `true`, displays and positions the component.  */
+    this.open = false;
+    /** Passes a function to run before the component closes. */
+    this.beforeClose = () => Promise.resolve();
+    /** When `true`, disables the component's close button. */
+    this.disableCloseButton = false;
+    /** When `true`, disables the closing of the component when clicked outside. */
+    this.disableOutsideClose = false;
+    /** Accessible name for the component's close button. */
+    this.intlClose = TEXT.close;
+    /** When `true`, disables the default close on escape behavior. */
+    this.disableEscape = false;
+    /** Specifies the size of the component. */
+    this.scale = "m";
+    /** Specifies the width of the component. Can use scale sizes or pass a number (displays in pixels). */
+    this.width = "m";
+    /** Sets the background color of the component's content. */
+    this.backgroundColor = "white";
+    /**
+     * When `true`, disables spacing to the content area slot.
+     *
+     * @deprecated  Use `--calcite-modal-padding` CSS variable instead.
+     */
+    this.noPadding = false;
+    //--------------------------------------------------------------------------
+    //
+    //  Variables
+    //
+    //--------------------------------------------------------------------------
+    this.hasFooter = true;
+    /**
+     * We use internal variable to make sure initially open modal can transition from closed state when rendered
+     *
+     * @private
+     */
+    this.isOpen = false;
+    this.mutationObserver = observers.createObserver("mutation", () => this.updateFooterVisibility());
+    this.openTransitionProp = "opacity";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.setTransitionEl = (el) => {
+      this.transitionEl = el;
+      openCloseComponent.connectOpenCloseComponent(this);
+    };
+    this.openEnd = () => {
+      this.setFocus();
+      this.el.removeEventListener("calciteModalOpen", this.openEnd);
+    };
+    this.handleOutsideClose = () => {
+      if (this.disableOutsideClose) {
+        return;
+      }
+      this.close();
+    };
+    /** Close the modal, first running the `beforeClose` method */
+    this.close = () => {
+      return this.beforeClose(this.el).then(() => {
+        this.open = false;
+        this.isOpen = false;
+        dom.focusElement(this.previousActiveElement);
+        this.removeOverflowHiddenClass();
+      });
+    };
+    this.focusFirstElement = () => {
+      dom.focusElement(this.disableCloseButton ? getFocusableElements(this.el)[0] : this.closeButtonEl);
+    };
+    this.focusLastElement = () => {
+      const focusableElements = getFocusableElements(this.el).filter((el) => !el.getAttribute("data-focus-fence"));
+      if (focusableElements.length > 0) {
+        dom.focusElement(focusableElements[focusableElements.length - 1]);
+      }
+      else {
+        dom.focusElement(this.closeButtonEl);
+      }
+    };
+    this.updateFooterVisibility = () => {
+      this.hasFooter = !!dom.getSlotted(this.el, [SLOTS.back, SLOTS.primary, SLOTS.secondary]);
+    };
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentWillLoad() {
+    // when modal initially renders, if active was set we need to open as watcher doesn't fire
+    if (this.open) {
+      requestAnimationFrame(() => this.openModal());
+    }
+  }
+  connectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    this.updateFooterVisibility();
+    conditionalSlot.connectConditionalSlotComponent(this);
+    openCloseComponent.connectOpenCloseComponent(this);
+    if (this.open) {
+      this.active = this.open;
+    }
+    if (this.active) {
+      this.activeHandler(this.active);
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    this.removeOverflowHiddenClass();
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    conditionalSlot.disconnectConditionalSlotComponent(this);
+    openCloseComponent.disconnectOpenCloseComponent(this);
+  }
+  render() {
+    return (index.h(index.Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" }, index.h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose }), this.renderStyle(), index.h("div", { class: {
+        [CSS.modal]: true,
+        [CSS.modalOpen]: this.isOpen
+      }, ref: this.setTransitionEl }, index.h("div", { "data-focus-fence": true, onFocus: this.focusLastElement, tabindex: "0" }), index.h("div", { class: CSS.header }, this.renderCloseButton(), index.h("header", { class: CSS.title }, index.h("slot", { name: CSS.header }))), index.h("div", { class: {
+        content: true,
+        "content--spaced": !this.noPadding,
+        "content--no-footer": !this.hasFooter
+      }, ref: (el) => (this.modalContent = el) }, index.h("slot", { name: SLOTS.content })), this.renderFooter(), index.h("div", { "data-focus-fence": true, onFocus: this.focusFirstElement, tabindex: "0" }))));
+  }
+  renderFooter() {
+    return this.hasFooter ? (index.h("div", { class: CSS.footer, key: "footer" }, index.h("span", { class: CSS.back }, index.h("slot", { name: SLOTS.back })), index.h("span", { class: CSS.secondary }, index.h("slot", { name: SLOTS.secondary })), index.h("span", { class: CSS.primary }, index.h("slot", { name: SLOTS.primary })))) : null;
+  }
+  renderCloseButton() {
+    return !this.disableCloseButton ? (index.h("button", { "aria-label": this.intlClose, class: CSS.close, key: "button", onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.intlClose }, index.h("calcite-icon", { icon: ICONS.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
+  }
+  renderStyle() {
+    const hasCustomWidth = !isNaN(parseInt(`${this.width}`));
+    return hasCustomWidth ? (index.h("style", null, `
+        .${CSS.modal} {
+          max-width: ${this.width}px !important;
+        }
+        @media screen and (max-width: ${this.width}px) {
+          .${CSS.modal} {
+            height: 100% !important;
+            max-height: 100% !important;
+            width: 100% !important;
+            max-width: 100% !important;
+            margin: 0 !important;
+            border-radius: 0 !important;
+          }
+          .content {
+            flex: 1 1 auto !important;
+            max-height: unset !important;
+          }
+        }
+      `)) : null;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  handleEscape(event) {
+    if (this.open && !this.disableEscape && event.key === "Escape" && !event.defaultPrevented) {
+      this.close();
+      event.preventDefault();
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Focus the first interactive element.
+   *
+   * @param el
+   * @deprecated use `setFocus` instead.
+   */
+  async focusElement(el) {
+    if (el) {
+      el.focus();
+    }
+    return this.setFocus();
+  }
+  /**
+   * Sets focus on the component.
+   *
+   * By default, tries to focus on focusable content. If there is none, it will focus on the close button.
+   * To focus on the close button, use the `close-button` focus ID.
+   *
+   * @param focusId
+   */
+  async setFocus(focusId) {
+    const closeButton = this.closeButtonEl;
+    return dom.focusElement(focusId === "close-button" ? closeButton : getFocusableElements(this.el)[0] || closeButton);
+  }
+  /**
+   * Sets the scroll top of the component's content.
+   *
+   * @param top
+   * @param left
+   */
+  async scrollContent(top = 0, left = 0) {
+    if (this.modalContent) {
+      if (this.modalContent.scrollTo) {
+        this.modalContent.scrollTo({ top, left, behavior: "smooth" });
+      }
+      else {
+        this.modalContent.scrollTop = top;
+        this.modalContent.scrollLeft = left;
+      }
+    }
+  }
+  onBeforeOpen() {
+    this.transitionEl.classList.add(CSS.openingActive);
+    this.calciteModalBeforeOpen.emit();
+  }
+  onOpen() {
+    this.transitionEl.classList.remove(CSS.openingIdle, CSS.openingActive);
+    this.calciteModalOpen.emit();
+  }
+  onBeforeClose() {
+    this.transitionEl.classList.add(CSS.closingActive);
+    this.calciteModalBeforeClose.emit();
+  }
+  onClose() {
+    this.transitionEl.classList.remove(CSS.closingIdle, CSS.closingActive);
+    this.calciteModalClose.emit();
+  }
+  activeHandler(value) {
+    this.open = value;
+  }
+  async toggleModal(value) {
+    var _a, _b;
+    this.active = value;
+    if (value) {
+      (_a = this.transitionEl) === null || _a === void 0 ? void 0 : _a.classList.add(CSS.openingIdle);
+      this.openModal();
+    }
+    else {
+      (_b = this.transitionEl) === null || _b === void 0 ? void 0 : _b.classList.add(CSS.closingIdle);
+      this.close();
+    }
+  }
+  /** Open the modal */
+  openModal() {
+    this.previousActiveElement = document.activeElement;
+    this.el.addEventListener("calciteModalOpen", this.openEnd);
+    this.open = true;
+    this.isOpen = true;
+    const titleEl = dom.getSlotted(this.el, SLOTS.header);
+    const contentEl = dom.getSlotted(this.el, SLOTS.content);
+    this.titleId = dom.ensureId(titleEl);
+    this.contentId = dom.ensureId(contentEl);
+    document.documentElement.classList.add(CSS.overflowHidden);
+  }
+  removeOverflowHiddenClass() {
+    document.documentElement.classList.remove(CSS.overflowHidden);
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "active": ["activeHandler"],
+    "open": ["toggleModal"]
+  }; }
+};
+Modal.style = modalCss;
+
 /** @license
  * Copyright 2022 Esri
  *
@@ -1454,7 +1889,7 @@ const SolutionConfiguration = class {
     this._solutionEditorHasChanges = false;
     this._solutionEditorHasErrors = false;
     this._canSave = false;
-    this.authentication = new UserSession({});
+    this.serializedAuthentication = "";
     this.solutionItemId = "";
     this.showLoading = false;
     this._currentEditItemId = "";
@@ -1465,6 +1900,8 @@ const SolutionConfiguration = class {
     this._templateHierarchy = [];
     this._translations = undefined;
     this._treeOpen = true;
+    this._authentication = this.serializedAuthentication ? UserSession.deserialize(this.serializedAuthentication) : new UserSession({});
+    console.log("CONFIG constructor " + this.solutionItemId); //???
     void this._loadSolution(this.solutionItemId);
     window.addEventListener("solutionStoreHasChanges", (evt) => {
       this._updateSaveability(this._solutionStoreHasChanges = evt.detail, this._solutionEditorHasChanges, this._solutionEditorHasErrors);
@@ -1476,7 +1913,11 @@ const SolutionConfiguration = class {
       this._updateSaveability(this._solutionStoreHasChanges, this._solutionEditorHasChanges, this._solutionEditorHasErrors = evt.detail);
     });
   }
+  async serializedAuthenticationWatchHandler() {
+    this._authentication = this.serializedAuthentication ? UserSession.deserialize(this.serializedAuthentication) : new UserSession({});
+  }
   async valueWatchHandler() {
+    console.log("CONFIG watch " + this.solutionItemId); //???
     await this._loadSolution(this.solutionItemId);
   }
   /**
@@ -1496,11 +1937,12 @@ const SolutionConfiguration = class {
     const solutionData = solutionStore.state.getStoreInfo("solutionData");
     this._solutionVariables = JSON.stringify(getSolutionVariables(solutionData.templates, this._translations));
     this._organizationVariables = JSON.stringify(getOrganizationVariables(this._translations));
+    console.log("CONFIG render " + this.solutionItemId); //???
     return (index.h(index.Host, null, !this._solutionIsLoaded
       ? index.h("calcite-loader", { active: true, label: '' })
       : null, index.h("div", { class: "configuration-container" }, index.h("div", { class: "configuration" }, index.h("calcite-tabs", { class: "config-tabs" }, index.h("calcite-tab-nav", { slot: "tab-nav" }, index.h("calcite-tab-title", null, this._translations.definitionTab), hasServices ?
       index.h("calcite-tab-title", null, this._translations.spatialReferenceTab) :
-      null), index.h("calcite-tab", { active: true, class: "config-tab" }, index.h("div", { class: "config-solution" }, index.h("div", { class: this._treeOpen ? "config-inventory" : "config-inventory-hide" }, index.h("solution-contents", { id: "configInventory", key: `${this.solutionItemId}-contents`, ref: (el) => (this._solutionContentsComponent = el) })), index.h("calcite-button", { appearance: "transparent", class: "collapse-btn", "icon-start": this._treeOpen ? "chevrons-left" : "chevrons-right", id: "collapse-vars", onClick: () => this._toggleTree(), scale: "s", title: this._treeOpen ? this._translations.collapse : this._translations.expand }), index.h("div", { class: "config-item" }, index.h("solution-item", { authentication: this.authentication, "item-id": this._currentEditItemId, key: `${this.solutionItemId}-item`, "organization-variables": this._organizationVariables, "solution-item-id": this.solutionItemId, "solution-variables": this._solutionVariables })))), hasServices
+      null), index.h("calcite-tab", { active: true, class: "config-tab" }, index.h("div", { class: "config-solution" }, index.h("div", { class: this._treeOpen ? "config-inventory" : "config-inventory-hide" }, index.h("solution-contents", { id: "configInventory", key: `${this.solutionItemId}-contents`, ref: (el) => (this._solutionContentsComponent = el) })), index.h("calcite-button", { appearance: "transparent", class: "collapse-btn", "icon-start": this._treeOpen ? "chevrons-left" : "chevrons-right", id: "collapse-vars", onClick: () => this._toggleTree(), scale: "s", title: this._treeOpen ? this._translations.collapse : this._translations.expand }), index.h("div", { class: "config-item" }, index.h("solution-item", { authentication: this._authentication, "item-id": this._currentEditItemId, key: `${this.solutionItemId}-item`, "organization-variables": this._organizationVariables, "solution-item-id": this.solutionItemId, "solution-variables": this._solutionVariables })))), hasServices
       ? index.h("calcite-tab", { class: "config-tab" }, index.h("div", { class: "config-solution" }, index.h("solution-spatial-ref", { defaultWkid: wkid, id: "configure-solution-spatial-ref", key: `${this.solutionItemId}-spatial-ref`, locked: !wkid, services: solutionStore.state.getStoreInfo("featureServices").map(fs => fs.name) })))
       : null)))));
   }
@@ -1568,7 +2010,7 @@ const SolutionConfiguration = class {
         this.modelsSet = false;
         state.reset();
       }
-      getModels(templates, this.authentication, this.solutionItemId).then(models => {
+      getModels(templates, this._authentication, this.solutionItemId).then(models => {
         state.models = models;
 
         state.featureServices = getFeatureServices(templates);
@@ -1617,7 +2059,7 @@ const SolutionConfiguration = class {
   async _loadSolution(solutionItemId) {
     if (solutionItemId) {
       this._solutionIsLoaded = false;
-      await solutionStore.state.loadSolution(solutionItemId, this.authentication);
+      await solutionStore.state.loadSolution(solutionItemId, this._authentication);
       this._initProps();
       this._solutionIsLoaded = true;
     }
@@ -1680,7 +2122,7 @@ const SolutionConfiguration = class {
       this.solutionItemId,
       data,
       state.models,
-      this.authentication,
+      this._authentication,
       this._translations
     ).then(saveResult => {
       // need to trigger re-render...and re-fetch
@@ -1974,9 +2416,13 @@ const SolutionConfiguration = class {
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
+    "serializedAuthentication": ["serializedAuthenticationWatchHandler"],
     "solutionItemId": ["valueWatchHandler"]
   }; }
 };
 SolutionConfiguration.style = solutionConfigurationCss;
 
+exports.calcite_modal = Modal;
 exports.solution_configuration = SolutionConfiguration;
+
+//# sourceMappingURL=calcite-modal_2.cjs.entry.js.map