@esri/solutions-components 0.6.7 → 0.6.8

package/dist/esm/solution-configuration.entry.js

@@ -3,353 +3,353 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-d298aca9.js';
-import { r as request, N as NODEJS_DEFAULT_REFERER_HEADER, c as cleanUrl, e as encodeQueryString, A as ArcGISAuthError, g as getProp, s as state } from './solution-store-c107ca4d.js';
-import { g as getLocaleComponentStrings } from './locale-54cac39a.js';
-import './index-4c4a4f3d.js';
-import './interfaces-bf20e69c.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b5d9d795.js';
+import { r as request, N as NODEJS_DEFAULT_REFERER_HEADER, c as cleanUrl, e as encodeQueryString, A as ArcGISAuthError, g as getProp, s as state } from './solution-store-46bc46a5.js';
+import { g as getLocaleComponentStrings } from './locale-aa3de591.js';
+import './index-b91c174c.js';
+import './interfaces-5a2fe8b4.js';
 import './_commonjsHelpers-d5f9d613.js';
 
-/** @license
- * Copyright 2022 Esri
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-//--------------------------------------------------------------------------
-//
-//  Public Functions
-//
-//--------------------------------------------------------------------------
-/**
- * Sort the solution items
- *
- * @param templates a list of item templates from the solution
- *
- * @returns a sorted list of solution items
- */
-function getInventoryItems(templates) {
-  const hierarchy = getItemHierarchy(templates);
-  const ids = hierarchy.reduce((prev, cur) => {
-    prev.push(cur.id);
-    return prev;
-  }, []);
-  return templates.reduce((prev, cur) => {
-    if (ids.indexOf(cur.itemId) > -1) {
-      const hierarchyItems = hierarchy.filter(hi => hi.id === cur.itemId);
-      prev.push(_getItemFromTemplate(cur, templates, hierarchyItems[0].dependencies));
-    }
-    return prev;
-  }, []);
-}
-/**
- * Create item hierarchy that will avoid issues from cylical dependencies
- *
- * @param templates a list of item templates from the solution
- *
- * @returns a hierarchy for item and item dependency display
- */
-function getItemHierarchy(templates) {
-  const hierarchy = [];
-  // Get the template specified by id out of a list of templates
-  function getTemplateInSolution(templates, id) {
-    const iTemplate = templates.findIndex((template) => id === template.itemId);
-    return iTemplate >= 0 ? templates[iTemplate] : null;
-  }
-  // Hierarchically list the dependencies of specified node
-  function traceItemId(id, accumulatedHierarchy, alreadyVisitedIds = []) {
-    // Get the dependencies of the node
-    const template = getTemplateInSolution(templates, id);
-    /* istanbul ignore else */
-    if (template) {
-      const templateEntry = {
-        id,
-        dependencies: []
-      };
-      // Visit each dependency, but only if this template is not in the alreadyVisitedIds list to avoid infinite loops
-      /* istanbul ignore else */
-      if (alreadyVisitedIds.indexOf(id) < 0) {
-        // Add dependency to alreadyVisitedIds list
-        alreadyVisitedIds.push(id);
-        template.dependencies.forEach((dependencyId) => {
-          // Remove dependency from list of templates to visit in the top-level loop
-          const iDependencyTemplate = templateItemIds.indexOf(dependencyId);
-          /* istanbul ignore else */
-          if (iDependencyTemplate >= 0) {
-            templateItemIds.splice(iDependencyTemplate, 1);
-          }
-          traceItemId(dependencyId, templateEntry.dependencies, alreadyVisitedIds);
-        });
-      }
-      accumulatedHierarchy.push(templateEntry);
-    }
-  }
-  // Start with top-level nodes and add in the rest of the nodes to catch cycles without top-level nodes
-  let templateItemIds = _getTopLevelItemIds(templates);
-  const otherItems = templates
-    .filter((template) => templateItemIds.indexOf(template.itemId) < 0) // only keep non-top-level nodes
-    .sort((a, b) => b.dependencies.length - a.dependencies.length); // sort so that nodes with more dependencies come first--reduces stubs
-  templateItemIds = templateItemIds.concat(otherItems.map((template) => template.itemId));
-  // Step through the list of nodes; we'll also remove nodes as we visit them
-  let itemId = templateItemIds.shift();
-  while (typeof itemId !== "undefined") {
-    traceItemId(itemId, hierarchy);
-    itemId = templateItemIds.shift();
-  }
-  return hierarchy;
-}
-/**
- * Explore the solution item templates for variables we will allow users to insert at runtime
- *
- * @param templates a list of item templates from the solution
- * @param translations nls translation object
- *
- * @returns a list of variables from the solution item templates
- */
-function getSolutionVariables(templates, translations) {
-  const vars = [];
-  templates.forEach(t => {
-    const item = {
-      id: t.itemId,
-      title: t.item.title || t.item.name,
-      type: t.type,
-      value: undefined,
-      dependencies: [{
-          id: t.itemId,
-          title: translations.itemId,
-          value: `{{${t.itemId}.itemId}}`,
-        }]
-    };
-    if (t.item.url) {
-      item.dependencies.push({
-        id: t.itemId,
-        title: translations.url,
-        value: `{{${t.itemId}.url}}`,
-      });
-    }
-    if (t.type === "Feature Service") {
-      // TODO need to set source service name var...
-      // TODO need to set soure service shape field name "{{d05b3cf1ffcb4a4fa677627dfb18609e.name}}.Shape"
-      item.dependencies.push({
-        id: t.itemId,
-        title: translations.solutionExtent,
-        value: `{{${t.itemId}.solutionExtent}}`,
-      });
-      _addLayersOrTables(t.properties.layers || [], item, t, translations);
-      _addLayersOrTables(t.properties.tables || [], item, t, translations);
-    }
-    vars.push(item);
-  });
-  return vars;
-}
-/**
- * Set key organization variables we will allow users to insert at runtime
- *
- * @param translations nls translation object
- *
- * @returns a list of variables for the organization
- */
-function getOrganizationVariables(translations) {
-  const orgVars = [{
-      id: "",
-      title: translations.geocodeUrl,
-      value: "{{organization.helperServices.geocode:getDefaultLocatorURL}}"
-    }, {
-      id: "",
-      title: translations.geometryUrl,
-      value: "{{organization.helperServices.geometry.url}}"
-    }, {
-      id: "",
-      title: translations.portalBaseUrl,
-      value: "{{portalBaseUrl}}"
-    }, {
-      id: "",
-      title: translations.routeUrl,
-      value: "{{organization.helperServices.route.url}}"
-    }, {
-      id: "",
-      title: translations.solutionItemExtent,
-      value: "{{solutionItemExtent}}"
-    }];
-  return orgVars;
-}
-//--------------------------------------------------------------------------
-//
-//  Private Functions
-//
-//--------------------------------------------------------------------------
-/**
- * Explore a solution item template for variables we will allow users to insert at runtime.
- * This function will update the item argument that is passed in with the var details.
- *
- * @param children a list of layers or tables from a template
- * @param item an object that store key details for a given variable
- * @param template one of the templates from the current solution
- * @param translations nls translations object
- *
- */
-function _addLayersOrTables(children, item, template, translations) {
-  children.forEach(l => {
-    const name = l.name && l.name.indexOf("||") > -1 ? l.name.split("||")[1].replace("}}", "").trim() : l.name;
-    item.dependencies.push({
-      id: template.itemId,
-      title: `${name} (${translations.id})`,
-      value: `{{${template.itemId}.layer${l.id}.id}}`,
-    });
-    item.dependencies.push({
-      id: template.itemId,
-      title: `${name} (${translations.name})`,
-      value: `{{${template.itemId}.layer${l.id}.name||${name}}}`,
-    });
-  });
-}
-/**
- * Capture key details from the solution item template
- *
- * @param template one of the templates from the current solution
- * @param templates full list of templates
- * @param dependencies list of hierarchical dependencies
- *
- * @returns an IInventoryItem that is used by other components to work with this template
- */
-function _getItemFromTemplate(template, templates, dependencies) {
-  return {
-    id: template.itemId || "",
-    title: template.item.title || "",
-    dependencies: _getDependencies(dependencies, templates),
-    type: template.item.type || "",
-    typeKeywords: template.item.typeKeywords || [] /*,
-    solutionItem: {
-      itemId: template.itemId,
-      itemDetails: _getItemDetails(template.item, template.type === "Group"),
-      isResource: _getIsResource(template),
-      data: template.data,
-      properties: template.properties,
-      type: template.type,
-      groupDetails: _getGroupDetails(template, templates)
-    }*/
-  };
-}
-/**
- * Capture key details from the solution item template
- *
- * @param dependencies list of dependencies from a template
- * @param templates full list of templates
- *
- * @returns a list of IInventoryItem that are used by other components to work with the templates
- */
-function _getDependencies(dependencies, templates) {
-  const dependencyItems = [];
-  const depIds = dependencies.reduce((prev, cur) => {
-    prev.push(cur.id);
-    dependencyItems.push(cur);
-    return prev;
-  }, []);
-  return templates.reduce((prev, curr) => {
-    const i = depIds.indexOf(curr.itemId);
-    if (i > -1) {
-      prev.push(_getItemFromTemplate(curr, templates, dependencyItems[i].dependencies));
-    }
-    return prev;
-  }, []);
-}
-/**
- * Capture the key item details for a given template
- *
- * @param item the templates item
- * @param isGroup boolean to indicate if the item is a group
- * @param itemId the item id of the template
- *
- * @returns a IItemDetails object for the current item
- */
-/*
-function _getItemDetails(
-  item: any,
-  isGroup: boolean
-): IItemDetails {
-  return {
-    title: item.title || "",
-    snippet: item.snippet || "",
-    description: item.description || "",
-    tags: item.tags || [],
-    accessInformation: !isGroup ? item.accessInformation || "" : "",
-    licenseInfo: !isGroup ? item.licenseInfo || "" : ""
-  };
-}
-*/
-/**
- * Capture the key item details for a given group template
- *
- * @param template one of the templates from the current solution
- * @param templates full list of templates
- *
- * @returns a list of IItemShare objects
- */
-/*
-function _getGroupDetails(
-  template: any,
-  templates: any[]
-): IItemShare[] {
-  return template.type === "Group" ? templates.reduce((prev, cur) => {
-    if (cur.itemId !== template.itemId && cur.type !== "Group") {
-      prev.push({
-        id: cur.itemId,
-        title: cur.item.name || cur.item.title,
-        isShared: (cur.groups || []).indexOf(template.itemId) > -1,
-        shareItem: (cur.groups || []).indexOf(template.itemId) > -1,
-        type: cur.type,
-        typeKeywords: cur.item.typeKeywords
-      });
-    }
-    return prev;
-  }, []) : [];
-}
-*/
-/**
- * Used to understand if we are dealing with a binary object that will support upload/download
- *
- * @param template one of the templates from the current solution
- *
- * @returns true if this item supports upload/download
- */
-/*
-function _getIsResource(
-  template: any
-): boolean {
-  return template.type !== "Group" && template.resources.some(r => r.indexOf("_info_thumbnail") < 0) &&
-    (template.data === null || JSON.stringify(template.data) === "{}");
-}
-*/
-/**
- * Sort the template ids based on their dependencies
- *
- * @param templates full list of templates
- *
- * @returns a list of Itop level item ids
- */
-function _getTopLevelItemIds(templates) {
-  // Find the top-level nodes. Start with all nodes, then remove those that other nodes depend on
-  const topLevelItemCandidateIds = templates.map((template) => template.itemId);
-  templates.forEach((template) => {
-    (template.dependencies || []).forEach((dependencyId) => {
-      const iNode = topLevelItemCandidateIds.indexOf(dependencyId);
-      if (iNode >= 0) {
-        // Node is somebody's dependency, so remove the node from the list of top-level nodes
-        // If iNode == -1, then it's a shared dependency and it has already been removed
-        topLevelItemCandidateIds.splice(iNode, 1);
-      }
-    });
-  });
-  return topLevelItemCandidateIds;
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//--------------------------------------------------------------------------
+//
+//  Public Functions
+//
+//--------------------------------------------------------------------------
+/**
+ * Sort the solution items
+ *
+ * @param templates a list of item templates from the solution
+ *
+ * @returns a sorted list of solution items
+ */
+function getInventoryItems(templates) {
+  const hierarchy = getItemHierarchy(templates);
+  const ids = hierarchy.reduce((prev, cur) => {
+    prev.push(cur.id);
+    return prev;
+  }, []);
+  return templates.reduce((prev, cur) => {
+    if (ids.indexOf(cur.itemId) > -1) {
+      const hierarchyItems = hierarchy.filter(hi => hi.id === cur.itemId);
+      prev.push(_getItemFromTemplate(cur, templates, hierarchyItems[0].dependencies));
+    }
+    return prev;
+  }, []);
+}
+/**
+ * Create item hierarchy that will avoid issues from cylical dependencies
+ *
+ * @param templates a list of item templates from the solution
+ *
+ * @returns a hierarchy for item and item dependency display
+ */
+function getItemHierarchy(templates) {
+  const hierarchy = [];
+  // Get the template specified by id out of a list of templates
+  function getTemplateInSolution(templates, id) {
+    const iTemplate = templates.findIndex((template) => id === template.itemId);
+    return iTemplate >= 0 ? templates[iTemplate] : null;
+  }
+  // Hierarchically list the dependencies of specified node
+  function traceItemId(id, accumulatedHierarchy, alreadyVisitedIds = []) {
+    // Get the dependencies of the node
+    const template = getTemplateInSolution(templates, id);
+    /* istanbul ignore else */
+    if (template) {
+      const templateEntry = {
+        id,
+        dependencies: []
+      };
+      // Visit each dependency, but only if this template is not in the alreadyVisitedIds list to avoid infinite loops
+      /* istanbul ignore else */
+      if (alreadyVisitedIds.indexOf(id) < 0) {
+        // Add dependency to alreadyVisitedIds list
+        alreadyVisitedIds.push(id);
+        template.dependencies.forEach((dependencyId) => {
+          // Remove dependency from list of templates to visit in the top-level loop
+          const iDependencyTemplate = templateItemIds.indexOf(dependencyId);
+          /* istanbul ignore else */
+          if (iDependencyTemplate >= 0) {
+            templateItemIds.splice(iDependencyTemplate, 1);
+          }
+          traceItemId(dependencyId, templateEntry.dependencies, alreadyVisitedIds);
+        });
+      }
+      accumulatedHierarchy.push(templateEntry);
+    }
+  }
+  // Start with top-level nodes and add in the rest of the nodes to catch cycles without top-level nodes
+  let templateItemIds = _getTopLevelItemIds(templates);
+  const otherItems = templates
+    .filter((template) => templateItemIds.indexOf(template.itemId) < 0) // only keep non-top-level nodes
+    .sort((a, b) => b.dependencies.length - a.dependencies.length); // sort so that nodes with more dependencies come first--reduces stubs
+  templateItemIds = templateItemIds.concat(otherItems.map((template) => template.itemId));
+  // Step through the list of nodes; we'll also remove nodes as we visit them
+  let itemId = templateItemIds.shift();
+  while (typeof itemId !== "undefined") {
+    traceItemId(itemId, hierarchy);
+    itemId = templateItemIds.shift();
+  }
+  return hierarchy;
+}
+/**
+ * Explore the solution item templates for variables we will allow users to insert at runtime
+ *
+ * @param templates a list of item templates from the solution
+ * @param translations nls translation object
+ *
+ * @returns a list of variables from the solution item templates
+ */
+function getSolutionVariables(templates, translations) {
+  const vars = [];
+  templates.forEach(t => {
+    const item = {
+      id: t.itemId,
+      title: t.item.title || t.item.name,
+      type: t.type,
+      value: undefined,
+      dependencies: [{
+          id: t.itemId,
+          title: translations.itemId,
+          value: `{{${t.itemId}.itemId}}`,
+        }]
+    };
+    if (t.item.url) {
+      item.dependencies.push({
+        id: t.itemId,
+        title: translations.url,
+        value: `{{${t.itemId}.url}}`,
+      });
+    }
+    if (t.type === "Feature Service") {
+      // TODO need to set source service name var...
+      // TODO need to set soure service shape field name "{{d05b3cf1ffcb4a4fa677627dfb18609e.name}}.Shape"
+      item.dependencies.push({
+        id: t.itemId,
+        title: translations.solutionExtent,
+        value: `{{${t.itemId}.solutionExtent}}`,
+      });
+      _addLayersOrTables(t.properties.layers || [], item, t, translations);
+      _addLayersOrTables(t.properties.tables || [], item, t, translations);
+    }
+    vars.push(item);
+  });
+  return vars;
+}
+/**
+ * Set key organization variables we will allow users to insert at runtime
+ *
+ * @param translations nls translation object
+ *
+ * @returns a list of variables for the organization
+ */
+function getOrganizationVariables(translations) {
+  const orgVars = [{
+      id: "",
+      title: translations.geocodeUrl,
+      value: "{{organization.helperServices.geocode:getDefaultLocatorURL}}"
+    }, {
+      id: "",
+      title: translations.geometryUrl,
+      value: "{{organization.helperServices.geometry.url}}"
+    }, {
+      id: "",
+      title: translations.portalBaseUrl,
+      value: "{{portalBaseUrl}}"
+    }, {
+      id: "",
+      title: translations.routeUrl,
+      value: "{{organization.helperServices.route.url}}"
+    }, {
+      id: "",
+      title: translations.solutionItemExtent,
+      value: "{{solutionItemExtent}}"
+    }];
+  return orgVars;
+}
+//--------------------------------------------------------------------------
+//
+//  Private Functions
+//
+//--------------------------------------------------------------------------
+/**
+ * Explore a solution item template for variables we will allow users to insert at runtime.
+ * This function will update the item argument that is passed in with the var details.
+ *
+ * @param children a list of layers or tables from a template
+ * @param item an object that store key details for a given variable
+ * @param template one of the templates from the current solution
+ * @param translations nls translations object
+ *
+ */
+function _addLayersOrTables(children, item, template, translations) {
+  children.forEach(l => {
+    const name = l.name && l.name.indexOf("||") > -1 ? l.name.split("||")[1].replace("}}", "").trim() : l.name;
+    item.dependencies.push({
+      id: template.itemId,
+      title: `${name} (${translations.id})`,
+      value: `{{${template.itemId}.layer${l.id}.id}}`,
+    });
+    item.dependencies.push({
+      id: template.itemId,
+      title: `${name} (${translations.name})`,
+      value: `{{${template.itemId}.layer${l.id}.name||${name}}}`,
+    });
+  });
+}
+/**
+ * Capture key details from the solution item template
+ *
+ * @param template one of the templates from the current solution
+ * @param templates full list of templates
+ * @param dependencies list of hierarchical dependencies
+ *
+ * @returns an IInventoryItem that is used by other components to work with this template
+ */
+function _getItemFromTemplate(template, templates, dependencies) {
+  return {
+    id: template.itemId || "",
+    title: template.item.title || "",
+    dependencies: _getDependencies(dependencies, templates),
+    type: template.item.type || "",
+    typeKeywords: template.item.typeKeywords || [] /*,
+    solutionItem: {
+      itemId: template.itemId,
+      itemDetails: _getItemDetails(template.item, template.type === "Group"),
+      isResource: _getIsResource(template),
+      data: template.data,
+      properties: template.properties,
+      type: template.type,
+      groupDetails: _getGroupDetails(template, templates)
+    }*/
+  };
+}
+/**
+ * Capture key details from the solution item template
+ *
+ * @param dependencies list of dependencies from a template
+ * @param templates full list of templates
+ *
+ * @returns a list of IInventoryItem that are used by other components to work with the templates
+ */
+function _getDependencies(dependencies, templates) {
+  const dependencyItems = [];
+  const depIds = dependencies.reduce((prev, cur) => {
+    prev.push(cur.id);
+    dependencyItems.push(cur);
+    return prev;
+  }, []);
+  return templates.reduce((prev, curr) => {
+    const i = depIds.indexOf(curr.itemId);
+    if (i > -1) {
+      prev.push(_getItemFromTemplate(curr, templates, dependencyItems[i].dependencies));
+    }
+    return prev;
+  }, []);
+}
+/**
+ * Capture the key item details for a given template
+ *
+ * @param item the templates item
+ * @param isGroup boolean to indicate if the item is a group
+ * @param itemId the item id of the template
+ *
+ * @returns a IItemDetails object for the current item
+ */
+/*
+function _getItemDetails(
+  item: any,
+  isGroup: boolean
+): IItemDetails {
+  return {
+    title: item.title || "",
+    snippet: item.snippet || "",
+    description: item.description || "",
+    tags: item.tags || [],
+    accessInformation: !isGroup ? item.accessInformation || "" : "",
+    licenseInfo: !isGroup ? item.licenseInfo || "" : ""
+  };
+}
+*/
+/**
+ * Capture the key item details for a given group template
+ *
+ * @param template one of the templates from the current solution
+ * @param templates full list of templates
+ *
+ * @returns a list of IItemShare objects
+ */
+/*
+function _getGroupDetails(
+  template: any,
+  templates: any[]
+): IItemShare[] {
+  return template.type === "Group" ? templates.reduce((prev, cur) => {
+    if (cur.itemId !== template.itemId && cur.type !== "Group") {
+      prev.push({
+        id: cur.itemId,
+        title: cur.item.name || cur.item.title,
+        isShared: (cur.groups || []).indexOf(template.itemId) > -1,
+        shareItem: (cur.groups || []).indexOf(template.itemId) > -1,
+        type: cur.type,
+        typeKeywords: cur.item.typeKeywords
+      });
+    }
+    return prev;
+  }, []) : [];
+}
+*/
+/**
+ * Used to understand if we are dealing with a binary object that will support upload/download
+ *
+ * @param template one of the templates from the current solution
+ *
+ * @returns true if this item supports upload/download
+ */
+/*
+function _getIsResource(
+  template: any
+): boolean {
+  return template.type !== "Group" && template.resources.some(r => r.indexOf("_info_thumbnail") < 0) &&
+    (template.data === null || JSON.stringify(template.data) === "{}");
+}
+*/
+/**
+ * Sort the template ids based on their dependencies
+ *
+ * @param templates full list of templates
+ *
+ * @returns a list of Itop level item ids
+ */
+function _getTopLevelItemIds(templates) {
+  // Find the top-level nodes. Start with all nodes, then remove those that other nodes depend on
+  const topLevelItemCandidateIds = templates.map((template) => template.itemId);
+  templates.forEach((template) => {
+    (template.dependencies || []).forEach((dependencyId) => {
+      const iNode = topLevelItemCandidateIds.indexOf(dependencyId);
+      if (iNode >= 0) {
+        // Node is somebody's dependency, so remove the node from the list of top-level nodes
+        // If iNode == -1, then it's a shared dependency and it has already been removed
+        topLevelItemCandidateIds.splice(iNode, 1);
+      }
+    });
+  });
+  return topLevelItemCandidateIds;
 }
 
 /* Copyright (c) 2017-2020 Environmental Systems Research Institute, Inc.
@@ -1438,549 +1438,549 @@ var UserSession = /** @class */ (function () {
 
 const solutionConfigurationCss = ".configuration-container{position:relative;height:100%;width:100%}.configuration{position:absolute;top:0px;right:0px;bottom:0px;left:0px;display:flex;padding:0.5rem;border:1px #808080 solid}.config-tabs{width:100%}.config-tab{width:100%}.config-solution{position:absolute;top:3.5rem;right:-1px;bottom:-1px;left:-1px;display:flex;padding:0.5rem}.config-inventory{display:inline;max-width:-moz-min-content;max-width:min-content;flex-grow:0;overflow-y:auto}.config-inventory-hide{display:none;max-width:-moz-min-content;max-width:min-content;flex-grow:0;overflow-y:auto}.config-item{position:relative;display:inline;flex-grow:1;overflow-y:auto;margin-inline-start:0.5rem}solution-contents{position:relative;height:100%}solution-item{position:relative;height:100%}solution-spatial-ref{position:relative;height:100%;width:100%;overflow-y:auto}";
 
-const SolutionConfiguration = class {
-  async serializedAuthenticationWatchHandler() {
-    this.authentication = this.serializedAuthentication ? UserSession.deserialize(this.serializedAuthentication) : new UserSession({});
-  }
-  async valueWatchHandler() {
-    await this._loadSolution(this.solutionItemId);
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this._solutionStoreHasChanges = false;
-    this._solutionEditorHasChanges = false;
-    this._solutionEditorHasErrors = false;
-    this._canSave = false;
-    this.authentication = new UserSession({});
-    this.serializedAuthentication = "";
-    this.solutionItemId = "";
-    this.showLoading = false;
-    this._currentEditItemId = "";
-    this._organizationVariables = "";
-    this._solutionContentsComponent = undefined;
-    this._solutionIsLoaded = false;
-    this._solutionVariables = "";
-    this._templateHierarchy = [];
-    this._translations = undefined;
-    this._treeOpen = true;
-    if (this.serializedAuthentication) {
-      this.authentication = UserSession.deserialize(this.serializedAuthentication);
-    }
-    void this._loadSolution(this.solutionItemId);
-    window.addEventListener("solutionStoreHasChanges", (evt) => {
-      this._updateSaveability(this._solutionStoreHasChanges = evt.detail, this._solutionEditorHasChanges, this._solutionEditorHasErrors);
-    });
-    window.addEventListener("solutionEditorHasChanges", (evt) => {
-      this._updateSaveability(this._solutionStoreHasChanges, this._solutionEditorHasChanges = evt.detail, this._solutionEditorHasErrors);
-    });
-    window.addEventListener("solutionEditorHasErrors", (evt) => {
-      this._updateSaveability(this._solutionStoreHasChanges, this._solutionEditorHasChanges, this._solutionEditorHasErrors = evt.detail);
-    });
-  }
-  /**
-   * StencilJS: Called once just after the component is first connected to the DOM.
-   *
-   * @returns Promise when complete
-   */
-  async componentWillLoad() {
-    return this._getTranslations();
-  }
-  /**
-   * Renders the component.
-   */
-  render() {
-    const wkid = getProp(state.getStoreInfo("spatialReferenceInfo"), "spatialReference");
-    const hasServices = state.getStoreInfo("featureServices").length > 0;
-    const solutionData = state.getStoreInfo("solutionData");
-    this._solutionVariables = JSON.stringify(getSolutionVariables(solutionData.templates, this._translations));
-    this._organizationVariables = JSON.stringify(getOrganizationVariables(this._translations));
-    return (h(Host, null, !this._solutionIsLoaded
-      ? h("calcite-loader", { label: '' })
-      : null, h("div", { class: "configuration-container" }, h("div", { class: "configuration" }, h("calcite-tabs", { class: "config-tabs" }, h("calcite-tab-nav", { slot: "tab-nav" }, h("calcite-tab-title", null, this._translations.definitionTab), hasServices ?
-      h("calcite-tab-title", null, this._translations.spatialReferenceTab) :
-      null), h("calcite-tab", { class: "config-tab", selected: true }, h("div", { class: "config-solution" }, h("div", { class: this._treeOpen ? "config-inventory" : "config-inventory-hide" }, h("solution-contents", { id: "configInventory", key: `${this.solutionItemId}-contents`, ref: (el) => (this._solutionContentsComponent = el) })), 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 }), h("div", { class: "config-item" }, 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
-      ? h("calcite-tab", { class: "config-tab" }, h("div", { class: "config-solution" }, h("solution-spatial-ref", { defaultWkid: wkid, id: "configure-solution-spatial-ref", key: `${this.solutionItemId}-spatial-ref`, locked: !wkid, services: state.getStoreInfo("featureServices").map(fs => fs.name) })))
-      : null)))));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  _solutionItemSelected(event) {
-    this._currentEditItemId = event.detail;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Events
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  Public Methods (async)
-  //
-  //--------------------------------------------------------------------------
-  /*
-  @Method()
-  async getEditModels(): Promise<ISolutionItems> {
-    return Promise.resolve(state.items);
-  }
-  */
-  async getSpatialReferenceInfo() {
-    return Promise.resolve(state.getStoreInfo("spatialReferenceInfo"));
-  }
-  /*
-  @Method()
-  async getSourceTemplates(): Promise<any> {
-    return Promise.resolve(this._templates);
-  }
-  */
-  async saveSolution() {
-    this._solutionIsLoaded = false;
-    await state.saveSolution();
-    this._solutionIsLoaded = true;
-    this.solutionItemId = null;
-  }
-  async unloadSolution() {
-    this.solutionItemId = null;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Update the store with the initial values
-   *
-   * @param templates the solution items templates
-   * @param isReset (defaults to false) indicates if we are resetting the controls after save
-   */
-  /*
-  protected _initState(
-    templates: any[],
-    isReset = false
-  ): Promise<any> {
-    return new Promise((resolve, reject) => {
-      if (isReset) {
-        // clear models and state so we can refresh after save
-        this.modelsSet = false;
-        state.reset();
-      }
-      getModels(templates, this.authentication, this.solutionItemId).then(models => {
-        state.models = models;
-
-        state.featureServices = getFeatureServices(templates);
-        state.getStoreInfo("spatialReferenceInfo") = getSpatialReferenceInfo(state.featureServices, this._sourceItemData);
-
-        if (isReset) {
-          // reset for undo/redo stack and diff editor tracking
-          const jsonEditors = Array.from(this.el.getElementsByTagName("json-editor"));
-          // eslint-disable-next-line @typescript-eslint/no-floating-promises
-          jsonEditors.forEach(e => void e.reset());
-        }
-
-        this.modelsSet = true;
-        resolve(true);
-      }, () => reject);
-    });
-  }
-  */
-  /**
-   * Set Props with the initial values
-   *
-   * @protected
-   */
-  _initProps() {
-    const solutionData = state.getStoreInfo("solutionData");
-    this._templateHierarchy = [...getInventoryItems(solutionData.templates)];
-    if (this._solutionContentsComponent) {
-      this._solutionContentsComponent.templateHierarchy = this._templateHierarchy;
-    }
-    let firstItem;
-    if (this._templateHierarchy.length > 0) {
-      // Start with the first item in the contents
-      firstItem = state.getItemInfo(this._templateHierarchy[0].id);
-    }
-    this._currentEditItemId = firstItem ? firstItem.itemId : "";
-  }
-  /**
-   * Loads a solution.
-   *
-   * @param solutionItemId AGO id of solution to load
-   *
-   * @returns Resolved promise when task is done
-   *
-   * @protected
-   */
-  async _loadSolution(solutionItemId) {
-    if (solutionItemId) {
-      this._solutionIsLoaded = false;
-      await state.loadSolution(solutionItemId, this.authentication);
-      this._initProps();
-      this._solutionIsLoaded = true;
-    }
-    else {
-      this._reset();
-    }
-    return Promise.resolve();
-  }
-  /**
-   * Resets internal variables.
-   *
-   * @protected
-   */
-  _reset() {
-    this._currentEditItemId = "";
-    this._organizationVariables = "";
-    this._solutionVariables = "";
-    this._templateHierarchy = [];
-  }
-  /**
-   * Toggle _treeOpen prop to show/hide content tree.
-   *
-   * @protected
-   */
-  _toggleTree() {
-    this._treeOpen = !this._treeOpen;
-  }
-  /**
-   * Dispatches an event indicating if the configuration is saveable or not. It's not saveable if there are no
-   * changes or if there's an error in the JSON editor.
-   *
-   * @param solutionStoreHasChanges Are there changes in the configuration editor's internal store?
-   * @param solutionEditorHasChanges Are there changes in the configuration editor's JSON editor?
-   * @param solutionEditorHasErrors Are there errors in the configuration editor's JSON editor?
-   *
-   * @protected
-   */
-  _updateSaveability(solutionStoreHasChanges, solutionEditorHasChanges, solutionEditorHasErrors) {
-    const updateSaveability = (solutionStoreHasChanges || solutionEditorHasChanges) && !solutionEditorHasErrors;
-    if (this._canSave !== updateSaveability) {
-      window.dispatchEvent(new CustomEvent("solutionCanSave", {
-        detail: updateSaveability,
-        bubbles: true,
-        cancelable: false,
-        composed: true
-      }));
-    }
-    this._canSave = updateSaveability;
-  }
-  /**
-   * Save all edits from the current configuration
-   *
-   * @returns a response that will indicate success or failure and any associated messages
-   */
-  /*
-  protected async _save() {
-    const templateUpdates = await this._updateTemplates();
-    const data = this._setSrInfo(templateUpdates.templates);
-    return templateUpdates.errors.length === 0 ? save(
-      this.solutionItemId,
-      data,
-      state.models,
-      this.authentication,
-      this._translations
-    ).then(saveResult => {
-      // need to trigger re-render...and re-fetch
-      this._fetchData = true;
-      this.modelsSet = false;
-      return Promise.resolve(saveResult)
-    }).catch(e => Promise.reject(e)) : Promise.reject({
-      success: false,
-      message: `The following templates have errors: ${templateUpdates.errors.join(", ")}`
-    } as IResponse);
-  }
-  */
-  /**
-   * Update the solutions templates based on the stored changes
-   *
-   * @returns an object that contains the updated templates as well as any errors that were found
-   */
-  /*
-  protected async _updateTemplates(): Promise<IUpdateTemplateResponse> {
-    const errors = [];
-    const models = await this.getEditModels();
-    let templates = this._updateGroupDependencies(models, this._templates);
-    Object.keys(models).forEach(k => {
-      const m = models[k];
-      templates = templates.map(t => {
-        if (t.itemId === m.itemId) {
-          this._setItem(t, m);
-          const hasDataError = this._setData(t, m);
-          const hasPropError = this._setProps(t, m);
-          if (hasDataError || hasPropError) {
-            errors.push(m.itemId);
-          }
-        }
-        return t;
-      });
-    });
-    errors.concat(window.monaco.editor.getModelMarkers({}));
-    return Promise.resolve({
-      templates,
-      errors
-    });
-  }
-  */
-  /**
-   * Review all models and store itemIds that should be added or removed from group dependencies
-   *
-   * @param models the corresponding models for the current templates
-   *
-   * @returns group info (an object with keys of groupIds and
-   * arrays of itemIds that should be added or removed from group dependencies)
-   */
-  /*
-  protected _getGroupInfo(
-    models: any
-  ): any {
-    const groupInfo = {}
-    Object.keys(models).forEach(k => {
-      const m = models[k];
-      if (m.shareInfo) {
-        const groupId = m.shareInfo.groupId;
-        const type = m.shareInfo.shared ? "share" : "unshare";
-        if (groupInfo[groupId]) {
-          groupInfo[groupId][type].push(m.itemId);
-        } else {
-          groupInfo[groupId] = {};
-          groupInfo[groupId][type] = [m.itemId];
-          if (m.shareInfo.shared) {
-            groupInfo[groupId]["unshare"] = [];
-          } else {
-            groupInfo[groupId]["share"] = [];
-          }
-        }
-      }
-    });
-    return groupInfo;
-  }
-  */
-  /**
-   * Updates group dependency arrays by adding or removing itemIds
-   *
-   * @param templates the current templates to update
-   * @param models the corresponding models for the current templates
-   *
-   * @returns updated templates array
-   */
-  /*
-  protected _updateGroupDependencies(
-    models: any,
-    templates: any[]
-  ): any[] {
-    const groupInfo = this._getGroupInfo(models);
-    Object.keys(groupInfo).forEach(k => {
-      templates.some(t => {
-        if (t.itemId === k) {
-          // add share items as deps
-          groupInfo[k].share.forEach(s => {
-            if (t.dependencies.indexOf(s) < 0) {
-              t.dependencies.push(s);
-            }
-          });
-
-          // remove unshare items from deps
-          groupInfo[k].unshare.forEach(s => {
-            const index = t.dependencies.indexOf(s);
-            if (index > -1) {
-              t.dependencies.splice(index, 1);
-            }
-          });
-          return true;
-        } else {
-          return false;
-        }
-      })
-    })
-    return templates;
-  }
-  */
-  /**
-   * Add group IDs to items that should be shared
-   * This function will update the provided template when shareInfo is available
-   *
-   * @param template the current template to update
-   * @param shareInfo the corresponding shareInfo from the model for the current template
-   *
-   */
-  /*
-  protected _updateItemGroups(
-    template: any,
-    shareInfo: any
-  ): void {
-    if (shareInfo) {
-      const groupIndex = template.groups.indexOf(shareInfo.groupId);
-      if (groupIndex < 0 && shareInfo.shared) {
-        template.groups.push(shareInfo.groupId);
-      }
-      if (groupIndex > -1 && !shareInfo.shared) {
-        template.groups.splice(groupIndex, 1);
-      }
-    }
-  }
-  */
-  /**
-   * Set a templates data property with changes from the models
-   *
-   * @param template the current template to update
-   * @param model the corresponding model for the current template (stores any user changes)
-   *
-   * @returns a boolean that indicates if any errors were detected
-   */
-  /*
-  protected _setData(
-    template: any,
-    model: any
-  ): boolean {
-    return this._setTemplateProp(
-      template,
-      model.dataOriginalValue,
-      model.dataCurrentValue,
-      "data"
-    );
-  }
-  */
-  /**
-   * Set a templates properties property with changes from the models
-   *
-   * @param template the current template to update
-   * @param model the corresponding model for the current template (stores any user changes)
-   *
-   * @returns a boolean that indicates if any errors were detected
-   */
-  /*
-  protected _setProps(
-    template: any,
-    model: any
-  ): boolean {
-    return this._setTemplateProp(
-      template,
-      model.propsOriginalValue,
-      model.propsCurrentValue,
-      "properties"
-    );
-  }
-  */
-  /**
-   * Generic function used to set properties or data property on a given template
-   *
-   * @param template the current template to update
-   * @param originValue the original value from the solution template
-   * @param modelValue the current value from the model (will contain any edits that have been made)
-   * @param path the path to the property we should update if any changes are found
-   *
-   * @returns a boolean that indicates if any errors were detected
-   */
-  /*
-  protected _setTemplateProp(
-    template: any,
-    originValue: any,
-    modelValue: any,
-    path: string
-  ): boolean {
-    let hasError = false;
-    try {
-      const _originValue = JSON.parse(originValue);
-      const _modelValue = JSON.parse(modelValue);
-
-      if (_originValue && _modelValue && (JSON.stringify(_originValue) !== JSON.stringify(_modelValue))) {
-        setProp(template, path, _modelValue);
-      }
-    } catch (e) {
-      console.error(e);
-      hasError = true;
-    }
-    return hasError;
-  }
-  */
-  /**
-   * Set a templates item property with changes from the models
-   *
-   * @param template the current template to update
-   * @param model the corresponding model for the current template (stores any user changes)
-   *
-   * This function will update the template argument when edits are found
-   */
-  /*
-  protected _setItem(
-    template: any,
-    model: any
-  ): void {
-    this._updateItemGroups(template, model.shareInfo);
-    if (model.updateItemValues && Object.keys(model.updateItemValues).length > 0) {
-      Object.keys(model.updateItemValues).forEach(k => {
-        template.item[k] = model.updateItemValues[k];
-      });
-    }
-  }
-  */
-  /**
-   * Set spatial reference info in the solutions data
-   *
-   * @param templates a list of item templates from the solution
-   *
-   * @returns a cloned copy of the solutions data that has been updated with spatial reference info
-   *
-   */
-  /*
-  protected _setSrInfo(
-    templates: any[]
-  ): any {
-    const srInfo: any = state.getStoreInfo("spatialReferenceInfo");
-
-    const serviceEnabled = typeof srInfo?.services === "undefined" ?
-      false : Object.keys(srInfo.services).some(k => srInfo.services[k]);
-
-    const data = cloneObject(this._sourceItemData);
-    data.templates = templates;
-    if (srInfo && srInfo.enabled && serviceEnabled) {
-      const wkid = srInfo.spatialReference.wkid.toString();
-
-      const wkidParam = {
-        "label": "Spatial Reference",
-        "default": wkid,
-        "valueType": "spatialReference",
-        "attributes": {
-          "required": "true"
-        }
-      };
-
-      const params = getProp(data, "params");
-      const hasWkid = params && params.wkid;
-      setCreateProp(
-        data,
-        hasWkid ? "params.wkid.default" : "params.wkid",
-        hasWkid ? wkid : params ? wkidParam : wkid
-      );
-    } else if (!srInfo.enabled) {
-      if (getProp(data, "params.wkid")) {
-        delete (data.params.wkid);
-      }
-    }
-    return data;
-  }
-  */
-  /**
-   * Fetches the component's translations
-   *
-   * @protected
-   */
-  async _getTranslations() {
-    const translations = await getLocaleComponentStrings(this.el);
-    this._translations = translations[0];
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "serializedAuthentication": ["serializedAuthenticationWatchHandler"],
-    "solutionItemId": ["valueWatchHandler"]
-  }; }
-};
+const SolutionConfiguration = class {
+  async serializedAuthenticationWatchHandler() {
+    this.authentication = this.serializedAuthentication ? UserSession.deserialize(this.serializedAuthentication) : new UserSession({});
+  }
+  async valueWatchHandler() {
+    await this._loadSolution(this.solutionItemId);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._solutionStoreHasChanges = false;
+    this._solutionEditorHasChanges = false;
+    this._solutionEditorHasErrors = false;
+    this._canSave = false;
+    this.authentication = new UserSession({});
+    this.serializedAuthentication = "";
+    this.solutionItemId = "";
+    this.showLoading = false;
+    this._currentEditItemId = "";
+    this._organizationVariables = "";
+    this._solutionContentsComponent = undefined;
+    this._solutionIsLoaded = false;
+    this._solutionVariables = "";
+    this._templateHierarchy = [];
+    this._translations = undefined;
+    this._treeOpen = true;
+    if (this.serializedAuthentication) {
+      this.authentication = UserSession.deserialize(this.serializedAuthentication);
+    }
+    void this._loadSolution(this.solutionItemId);
+    window.addEventListener("solutionStoreHasChanges", (evt) => {
+      this._updateSaveability(this._solutionStoreHasChanges = evt.detail, this._solutionEditorHasChanges, this._solutionEditorHasErrors);
+    });
+    window.addEventListener("solutionEditorHasChanges", (evt) => {
+      this._updateSaveability(this._solutionStoreHasChanges, this._solutionEditorHasChanges = evt.detail, this._solutionEditorHasErrors);
+    });
+    window.addEventListener("solutionEditorHasErrors", (evt) => {
+      this._updateSaveability(this._solutionStoreHasChanges, this._solutionEditorHasChanges, this._solutionEditorHasErrors = evt.detail);
+    });
+  }
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   *
+   * @returns Promise when complete
+   */
+  async componentWillLoad() {
+    return this._getTranslations();
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    const wkid = getProp(state.getStoreInfo("spatialReferenceInfo"), "spatialReference");
+    const hasServices = state.getStoreInfo("featureServices").length > 0;
+    const solutionData = state.getStoreInfo("solutionData");
+    this._solutionVariables = JSON.stringify(getSolutionVariables(solutionData.templates, this._translations));
+    this._organizationVariables = JSON.stringify(getOrganizationVariables(this._translations));
+    return (h(Host, null, !this._solutionIsLoaded
+      ? h("calcite-loader", { label: '' })
+      : null, h("div", { class: "configuration-container" }, h("div", { class: "configuration" }, h("calcite-tabs", { class: "config-tabs" }, h("calcite-tab-nav", { slot: "tab-nav" }, h("calcite-tab-title", null, this._translations.definitionTab), hasServices ?
+      h("calcite-tab-title", null, this._translations.spatialReferenceTab) :
+      null), h("calcite-tab", { class: "config-tab", selected: true }, h("div", { class: "config-solution" }, h("div", { class: this._treeOpen ? "config-inventory" : "config-inventory-hide" }, h("solution-contents", { id: "configInventory", key: `${this.solutionItemId}-contents`, ref: (el) => (this._solutionContentsComponent = el) })), 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 }), h("div", { class: "config-item" }, 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
+      ? h("calcite-tab", { class: "config-tab" }, h("div", { class: "config-solution" }, h("solution-spatial-ref", { defaultWkid: wkid, id: "configure-solution-spatial-ref", key: `${this.solutionItemId}-spatial-ref`, locked: !wkid, services: state.getStoreInfo("featureServices").map(fs => fs.name) })))
+      : null)))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  _solutionItemSelected(event) {
+    this._currentEditItemId = event.detail;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Events
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods (async)
+  //
+  //--------------------------------------------------------------------------
+  /*
+  @Method()
+  async getEditModels(): Promise<ISolutionItems> {
+    return Promise.resolve(state.items);
+  }
+  */
+  async getSpatialReferenceInfo() {
+    return Promise.resolve(state.getStoreInfo("spatialReferenceInfo"));
+  }
+  /*
+  @Method()
+  async getSourceTemplates(): Promise<any> {
+    return Promise.resolve(this._templates);
+  }
+  */
+  async saveSolution() {
+    this._solutionIsLoaded = false;
+    await state.saveSolution();
+    this._solutionIsLoaded = true;
+    this.solutionItemId = null;
+  }
+  async unloadSolution() {
+    this.solutionItemId = null;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Update the store with the initial values
+   *
+   * @param templates the solution items templates
+   * @param isReset (defaults to false) indicates if we are resetting the controls after save
+   */
+  /*
+  protected _initState(
+    templates: any[],
+    isReset = false
+  ): Promise<any> {
+    return new Promise((resolve, reject) => {
+      if (isReset) {
+        // clear models and state so we can refresh after save
+        this.modelsSet = false;
+        state.reset();
+      }
+      getModels(templates, this.authentication, this.solutionItemId).then(models => {
+        state.models = models;
+
+        state.featureServices = getFeatureServices(templates);
+        state.getStoreInfo("spatialReferenceInfo") = getSpatialReferenceInfo(state.featureServices, this._sourceItemData);
+
+        if (isReset) {
+          // reset for undo/redo stack and diff editor tracking
+          const jsonEditors = Array.from(this.el.getElementsByTagName("json-editor"));
+          // eslint-disable-next-line @typescript-eslint/no-floating-promises
+          jsonEditors.forEach(e => void e.reset());
+        }
+
+        this.modelsSet = true;
+        resolve(true);
+      }, () => reject);
+    });
+  }
+  */
+  /**
+   * Set Props with the initial values
+   *
+   * @protected
+   */
+  _initProps() {
+    const solutionData = state.getStoreInfo("solutionData");
+    this._templateHierarchy = [...getInventoryItems(solutionData.templates)];
+    if (this._solutionContentsComponent) {
+      this._solutionContentsComponent.templateHierarchy = this._templateHierarchy;
+    }
+    let firstItem;
+    if (this._templateHierarchy.length > 0) {
+      // Start with the first item in the contents
+      firstItem = state.getItemInfo(this._templateHierarchy[0].id);
+    }
+    this._currentEditItemId = firstItem ? firstItem.itemId : "";
+  }
+  /**
+   * Loads a solution.
+   *
+   * @param solutionItemId AGO id of solution to load
+   *
+   * @returns Resolved promise when task is done
+   *
+   * @protected
+   */
+  async _loadSolution(solutionItemId) {
+    if (solutionItemId) {
+      this._solutionIsLoaded = false;
+      await state.loadSolution(solutionItemId, this.authentication);
+      this._initProps();
+      this._solutionIsLoaded = true;
+    }
+    else {
+      this._reset();
+    }
+    return Promise.resolve();
+  }
+  /**
+   * Resets internal variables.
+   *
+   * @protected
+   */
+  _reset() {
+    this._currentEditItemId = "";
+    this._organizationVariables = "";
+    this._solutionVariables = "";
+    this._templateHierarchy = [];
+  }
+  /**
+   * Toggle _treeOpen prop to show/hide content tree.
+   *
+   * @protected
+   */
+  _toggleTree() {
+    this._treeOpen = !this._treeOpen;
+  }
+  /**
+   * Dispatches an event indicating if the configuration is saveable or not. It's not saveable if there are no
+   * changes or if there's an error in the JSON editor.
+   *
+   * @param solutionStoreHasChanges Are there changes in the configuration editor's internal store?
+   * @param solutionEditorHasChanges Are there changes in the configuration editor's JSON editor?
+   * @param solutionEditorHasErrors Are there errors in the configuration editor's JSON editor?
+   *
+   * @protected
+   */
+  _updateSaveability(solutionStoreHasChanges, solutionEditorHasChanges, solutionEditorHasErrors) {
+    const updateSaveability = (solutionStoreHasChanges || solutionEditorHasChanges) && !solutionEditorHasErrors;
+    if (this._canSave !== updateSaveability) {
+      window.dispatchEvent(new CustomEvent("solutionCanSave", {
+        detail: updateSaveability,
+        bubbles: true,
+        cancelable: false,
+        composed: true
+      }));
+    }
+    this._canSave = updateSaveability;
+  }
+  /**
+   * Save all edits from the current configuration
+   *
+   * @returns a response that will indicate success or failure and any associated messages
+   */
+  /*
+  protected async _save() {
+    const templateUpdates = await this._updateTemplates();
+    const data = this._setSrInfo(templateUpdates.templates);
+    return templateUpdates.errors.length === 0 ? save(
+      this.solutionItemId,
+      data,
+      state.models,
+      this.authentication,
+      this._translations
+    ).then(saveResult => {
+      // need to trigger re-render...and re-fetch
+      this._fetchData = true;
+      this.modelsSet = false;
+      return Promise.resolve(saveResult)
+    }).catch(e => Promise.reject(e)) : Promise.reject({
+      success: false,
+      message: `The following templates have errors: ${templateUpdates.errors.join(", ")}`
+    } as IResponse);
+  }
+  */
+  /**
+   * Update the solutions templates based on the stored changes
+   *
+   * @returns an object that contains the updated templates as well as any errors that were found
+   */
+  /*
+  protected async _updateTemplates(): Promise<IUpdateTemplateResponse> {
+    const errors = [];
+    const models = await this.getEditModels();
+    let templates = this._updateGroupDependencies(models, this._templates);
+    Object.keys(models).forEach(k => {
+      const m = models[k];
+      templates = templates.map(t => {
+        if (t.itemId === m.itemId) {
+          this._setItem(t, m);
+          const hasDataError = this._setData(t, m);
+          const hasPropError = this._setProps(t, m);
+          if (hasDataError || hasPropError) {
+            errors.push(m.itemId);
+          }
+        }
+        return t;
+      });
+    });
+    errors.concat(window.monaco.editor.getModelMarkers({}));
+    return Promise.resolve({
+      templates,
+      errors
+    });
+  }
+  */
+  /**
+   * Review all models and store itemIds that should be added or removed from group dependencies
+   *
+   * @param models the corresponding models for the current templates
+   *
+   * @returns group info (an object with keys of groupIds and
+   * arrays of itemIds that should be added or removed from group dependencies)
+   */
+  /*
+  protected _getGroupInfo(
+    models: any
+  ): any {
+    const groupInfo = {}
+    Object.keys(models).forEach(k => {
+      const m = models[k];
+      if (m.shareInfo) {
+        const groupId = m.shareInfo.groupId;
+        const type = m.shareInfo.shared ? "share" : "unshare";
+        if (groupInfo[groupId]) {
+          groupInfo[groupId][type].push(m.itemId);
+        } else {
+          groupInfo[groupId] = {};
+          groupInfo[groupId][type] = [m.itemId];
+          if (m.shareInfo.shared) {
+            groupInfo[groupId]["unshare"] = [];
+          } else {
+            groupInfo[groupId]["share"] = [];
+          }
+        }
+      }
+    });
+    return groupInfo;
+  }
+  */
+  /**
+   * Updates group dependency arrays by adding or removing itemIds
+   *
+   * @param templates the current templates to update
+   * @param models the corresponding models for the current templates
+   *
+   * @returns updated templates array
+   */
+  /*
+  protected _updateGroupDependencies(
+    models: any,
+    templates: any[]
+  ): any[] {
+    const groupInfo = this._getGroupInfo(models);
+    Object.keys(groupInfo).forEach(k => {
+      templates.some(t => {
+        if (t.itemId === k) {
+          // add share items as deps
+          groupInfo[k].share.forEach(s => {
+            if (t.dependencies.indexOf(s) < 0) {
+              t.dependencies.push(s);
+            }
+          });
+
+          // remove unshare items from deps
+          groupInfo[k].unshare.forEach(s => {
+            const index = t.dependencies.indexOf(s);
+            if (index > -1) {
+              t.dependencies.splice(index, 1);
+            }
+          });
+          return true;
+        } else {
+          return false;
+        }
+      })
+    })
+    return templates;
+  }
+  */
+  /**
+   * Add group IDs to items that should be shared
+   * This function will update the provided template when shareInfo is available
+   *
+   * @param template the current template to update
+   * @param shareInfo the corresponding shareInfo from the model for the current template
+   *
+   */
+  /*
+  protected _updateItemGroups(
+    template: any,
+    shareInfo: any
+  ): void {
+    if (shareInfo) {
+      const groupIndex = template.groups.indexOf(shareInfo.groupId);
+      if (groupIndex < 0 && shareInfo.shared) {
+        template.groups.push(shareInfo.groupId);
+      }
+      if (groupIndex > -1 && !shareInfo.shared) {
+        template.groups.splice(groupIndex, 1);
+      }
+    }
+  }
+  */
+  /**
+   * Set a templates data property with changes from the models
+   *
+   * @param template the current template to update
+   * @param model the corresponding model for the current template (stores any user changes)
+   *
+   * @returns a boolean that indicates if any errors were detected
+   */
+  /*
+  protected _setData(
+    template: any,
+    model: any
+  ): boolean {
+    return this._setTemplateProp(
+      template,
+      model.dataOriginalValue,
+      model.dataCurrentValue,
+      "data"
+    );
+  }
+  */
+  /**
+   * Set a templates properties property with changes from the models
+   *
+   * @param template the current template to update
+   * @param model the corresponding model for the current template (stores any user changes)
+   *
+   * @returns a boolean that indicates if any errors were detected
+   */
+  /*
+  protected _setProps(
+    template: any,
+    model: any
+  ): boolean {
+    return this._setTemplateProp(
+      template,
+      model.propsOriginalValue,
+      model.propsCurrentValue,
+      "properties"
+    );
+  }
+  */
+  /**
+   * Generic function used to set properties or data property on a given template
+   *
+   * @param template the current template to update
+   * @param originValue the original value from the solution template
+   * @param modelValue the current value from the model (will contain any edits that have been made)
+   * @param path the path to the property we should update if any changes are found
+   *
+   * @returns a boolean that indicates if any errors were detected
+   */
+  /*
+  protected _setTemplateProp(
+    template: any,
+    originValue: any,
+    modelValue: any,
+    path: string
+  ): boolean {
+    let hasError = false;
+    try {
+      const _originValue = JSON.parse(originValue);
+      const _modelValue = JSON.parse(modelValue);
+
+      if (_originValue && _modelValue && (JSON.stringify(_originValue) !== JSON.stringify(_modelValue))) {
+        setProp(template, path, _modelValue);
+      }
+    } catch (e) {
+      console.error(e);
+      hasError = true;
+    }
+    return hasError;
+  }
+  */
+  /**
+   * Set a templates item property with changes from the models
+   *
+   * @param template the current template to update
+   * @param model the corresponding model for the current template (stores any user changes)
+   *
+   * This function will update the template argument when edits are found
+   */
+  /*
+  protected _setItem(
+    template: any,
+    model: any
+  ): void {
+    this._updateItemGroups(template, model.shareInfo);
+    if (model.updateItemValues && Object.keys(model.updateItemValues).length > 0) {
+      Object.keys(model.updateItemValues).forEach(k => {
+        template.item[k] = model.updateItemValues[k];
+      });
+    }
+  }
+  */
+  /**
+   * Set spatial reference info in the solutions data
+   *
+   * @param templates a list of item templates from the solution
+   *
+   * @returns a cloned copy of the solutions data that has been updated with spatial reference info
+   *
+   */
+  /*
+  protected _setSrInfo(
+    templates: any[]
+  ): any {
+    const srInfo: any = state.getStoreInfo("spatialReferenceInfo");
+
+    const serviceEnabled = typeof srInfo?.services === "undefined" ?
+      false : Object.keys(srInfo.services).some(k => srInfo.services[k]);
+
+    const data = cloneObject(this._sourceItemData);
+    data.templates = templates;
+    if (srInfo && srInfo.enabled && serviceEnabled) {
+      const wkid = srInfo.spatialReference.wkid.toString();
+
+      const wkidParam = {
+        "label": "Spatial Reference",
+        "default": wkid,
+        "valueType": "spatialReference",
+        "attributes": {
+          "required": "true"
+        }
+      };
+
+      const params = getProp(data, "params");
+      const hasWkid = params && params.wkid;
+      setCreateProp(
+        data,
+        hasWkid ? "params.wkid.default" : "params.wkid",
+        hasWkid ? wkid : params ? wkidParam : wkid
+      );
+    } else if (!srInfo.enabled) {
+      if (getProp(data, "params.wkid")) {
+        delete (data.params.wkid);
+      }
+    }
+    return data;
+  }
+  */
+  /**
+   * Fetches the component's translations
+   *
+   * @protected
+   */
+  async _getTranslations() {
+    const translations = await getLocaleComponentStrings(this.el);
+    this._translations = translations[0];
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "serializedAuthentication": ["serializedAuthenticationWatchHandler"],
+    "solutionItemId": ["valueWatchHandler"]
+  }; }
+};
 SolutionConfiguration.style = solutionConfigurationCss;
 
 export { SolutionConfiguration as solution_configuration };