@esri/solutions-components 0.2.0 → 0.2.2

package/dist/collection/components/solution-configuration/solution-configuration.js

@@ -21,7 +21,7 @@
 import { h, Host } from "@stencil/core";
 import * as utils from "../../utils/templates";
 import state from "../../utils/solution-store";
-import { getProp } from "@esri/solution-common";
+import { getProp, UserSession } from "@esri/solution-common";
 import "@esri/calcite-components";
 import { getLocaleComponentStrings } from "../../utils/locale";
 export class SolutionConfiguration {
@@ -35,7 +35,7 @@ export class SolutionConfiguration {
     this._solutionEditorHasChanges = false;
     this._solutionEditorHasErrors = false;
     this._canSave = false;
-    this.authentication = undefined;
+    this.authentication = new UserSession({});
     this.solutionItemId = "";
     this.showLoading = false;
     this._currentEditItemId = "";
@@ -58,6 +58,7 @@ export class SolutionConfiguration {
     });
   }
   async valueWatchHandler() {
+    console.log("update solution config " + this.solutionItemId); //???
     await this._loadSolution(this.solutionItemId);
   }
   /**
@@ -72,8 +73,12 @@ export class SolutionConfiguration {
    * Renders the component.
    */
   render() {
+    console.log("render solution config " + this.solutionItemId); //???
     const wkid = getProp(state.getStoreInfo("spatialReferenceInfo"), "spatialReference");
     const hasServices = state.getStoreInfo("featureServices").length > 0;
+    const solutionData = state.getStoreInfo("solutionData");
+    this._solutionVariables = JSON.stringify(utils.getSolutionVariables(solutionData.templates, this._translations));
+    this._organizationVariables = JSON.stringify(utils.getOrganizationVariables(this._translations));
     return (h(Host, null, !this._solutionIsLoaded
       ? h("calcite-loader", { active: true, 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 ?
@@ -172,8 +177,6 @@ export class SolutionConfiguration {
    */
   _initProps() {
     const solutionData = state.getStoreInfo("solutionData");
-    this._solutionVariables = JSON.stringify(utils.getSolutionVariables(solutionData.templates, this._translations));
-    this._organizationVariables = JSON.stringify(utils.getOrganizationVariables(this._translations));
     this._templateHierarchy = [...utils.getInventoryItems(solutionData.templates)];
     if (this._solutionContentsComponent) {
       this._solutionContentsComponent.templateHierarchy = this._templateHierarchy;
@@ -182,6 +185,10 @@ export class SolutionConfiguration {
     if (this._templateHierarchy.length > 0) {
       // Start with the first item in the contents
       firstItem = state.getItemInfo(this._templateHierarchy[0].id);
+      console.log("init with first item " + firstItem.itemId); //???
+    }
+    else {
+      console.log("no initial first item"); //???
     }
     this._currentEditItemId = firstItem ? firstItem.itemId : "";
   }
@@ -571,19 +578,15 @@ export class SolutionConfiguration {
         "complexType": {
           "original": "UserSession",
           "resolved": "UserSession",
-          "references": {
-            "UserSession": {
-              "location": "import",
-              "path": "@esri/solution-common"
-            }
-          }
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
           "text": "Credentials for requests"
-        }
+        },
+        "defaultValue": "new UserSession({})"
       },
       "solutionItemId": {
         "type": "string",

package/dist/collection/components/solution-configuration/solution-configuration.js.map

@@ -1 +1 @@
-{"version":3,"file":"solution-configuration.js","sourceRoot":"","sources":["../../../src/components/solution-configuration/solution-configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["/** @license\r\n * Copyright 2022 Esri\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the \"License\");\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n *    http://www.apache.org/licenses/LICENSE-2.0\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an \"AS IS\" BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\n\r\nimport { Component, Element, h, Host, Listen, Method, Prop, State, VNode, Watch } from \"@stencil/core\";\r\nimport { IInventoryItem, IItemTemplateEdit, ISolutionSpatialReferenceInfo } from \"../../utils/interfaces\";\r\nimport * as utils from \"../../utils/templates\";\r\nimport state from \"../../utils/solution-store\";\r\nimport { getProp, UserSession } from \"@esri/solution-common\";\r\nimport \"@esri/calcite-components\";\r\nimport SolutionConfiguration_T9n from \"../../assets/t9n/solution-configuration/resources.json\";\r\nimport { getLocaleComponentStrings } from \"../../utils/locale\";\r\n\r\n@Component({\r\n  tag: \"solution-configuration\",\r\n  styleUrl: \"solution-configuration.scss\",\r\n  shadow: false\r\n})\r\nexport class SolutionConfiguration {\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Host element access\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  @Element() el: HTMLSolutionConfigurationElement;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Credentials for requests\r\n   */\r\n  @Prop({ mutable: true }) authentication: UserSession;\r\n\r\n  /**\r\n   * Contains the current solution item id\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) solutionItemId = \"\";\r\n\r\n  @Watch(\"solutionItemId\") async valueWatchHandler(): Promise<void> {\r\n    await this._loadSolution(this.solutionItemId);\r\n  }\r\n\r\n  /**\r\n  * Used to show/hide loading indicator\r\n  */\r\n  @Prop({ mutable: true, reflect: true }) showLoading = false;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Lifecycle\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  constructor() {\r\n    void this._loadSolution(this.solutionItemId);\r\n\r\n    window.addEventListener(\"solutionStoreHasChanges\",\r\n      (evt) => {\r\n        this._updateSaveability(\r\n          this._solutionStoreHasChanges = (evt as any).detail, this._solutionEditorHasChanges, this._solutionEditorHasErrors);\r\n      }\r\n    );\r\n    window.addEventListener(\"solutionEditorHasChanges\",\r\n      (evt) => {\r\n        this._updateSaveability(\r\n          this._solutionStoreHasChanges, this._solutionEditorHasChanges = (evt as any).detail, this._solutionEditorHasErrors);\r\n      }\r\n    );\r\n    window.addEventListener(\"solutionEditorHasErrors\",\r\n      (evt) => {\r\n        this._updateSaveability(\r\n          this._solutionStoreHasChanges, this._solutionEditorHasChanges, this._solutionEditorHasErrors = (evt as any).detail);\r\n      }\r\n    );\r\n  }\r\n\r\n  /**\r\n   * StencilJS: Called once just after the component is first connected to the DOM.\r\n   *\r\n   * @returns Promise when complete\r\n   */\r\n  async componentWillLoad(): Promise<void> {\r\n    return this._getTranslations();\r\n  }\r\n\r\n  /**\r\n   * Renders the component.\r\n   */\r\n  render(): VNode {\r\n    const wkid = getProp(state.getStoreInfo(\"spatialReferenceInfo\"), \"spatialReference\");\r\n    const hasServices: boolean = state.getStoreInfo(\"featureServices\").length > 0;\r\n    return (\r\n      <Host>\r\n        {\r\n          !this._solutionIsLoaded\r\n            ? <calcite-loader active label='' />\r\n            : null\r\n        }\r\n        <div class=\"configuration-container\">\r\n          <div class=\"configuration\">\r\n            <calcite-tabs class=\"config-tabs\">\r\n              <calcite-tab-nav slot=\"tab-nav\">\r\n                <calcite-tab-title>{this._translations.definitionTab}</calcite-tab-title>\r\n                {hasServices ?\r\n                  <calcite-tab-title>{this._translations.spatialReferenceTab}</calcite-tab-title> :\r\n                  null\r\n                }\r\n              </calcite-tab-nav>\r\n              <calcite-tab active class=\"config-tab\">\r\n                <div class=\"config-solution\">\r\n                  <div class={this._treeOpen ? \"config-inventory\" : \"config-inventory-hide\"}>\r\n                    <solution-contents\r\n                      id=\"configInventory\"\r\n                      key={`${this.solutionItemId}-contents`}\r\n                      ref={(el) => (this._solutionContentsComponent = el)}\r\n                    />\r\n                  </div>\r\n                  <calcite-button\r\n                    appearance=\"transparent\"\r\n                    class=\"collapse-btn\"\r\n                    icon-start={this._treeOpen ? \"chevrons-left\" : \"chevrons-right\"}\r\n                    id=\"collapse-vars\"\r\n                    onClick={() => this._toggleTree()}\r\n                    scale=\"s\"\r\n                    title={this._treeOpen ? this._translations.collapse : this._translations.expand}\r\n                  />\r\n                  <div class=\"config-item\">\r\n                    <solution-item\r\n                      authentication={this.authentication}\r\n                      item-id={this._currentEditItemId}\r\n                      key={`${this.solutionItemId}-item`}\r\n                      organization-variables={this._organizationVariables}\r\n                      solution-item-id={this.solutionItemId}\r\n                      solution-variables={this._solutionVariables}\r\n                    />\r\n                  </div>\r\n                </div>\r\n              </calcite-tab>\r\n              {\r\n                hasServices\r\n                  ? <calcite-tab class=\"config-tab\">\r\n                      <div class=\"config-solution\">\r\n                        <solution-spatial-ref\r\n                          defaultWkid={wkid}\r\n                          id=\"configure-solution-spatial-ref\"\r\n                          key={`${this.solutionItemId}-spatial-ref`}\r\n                          locked={!wkid}\r\n                          services={state.getStoreInfo(\"featureServices\").map(fs => fs.name)}\r\n                        />\r\n                      </div>\r\n                    </calcite-tab>\r\n                  : null\r\n              }\r\n            </calcite-tabs>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (protected)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Contains the current item we are working with\r\n   */\r\n  @State() protected _currentEditItemId = \"\";\r\n\r\n  @State() protected _organizationVariables = \"\";\r\n\r\n  @State() protected _solutionContentsComponent: HTMLSolutionContentsElement;\r\n\r\n  @State() protected _solutionIsLoaded = false;\r\n\r\n  @State() protected _solutionVariables = \"\";\r\n\r\n  /**\r\n   * Contains the hierarchy of template items for the current solution.\r\n   */\r\n  @State() protected _templateHierarchy: IInventoryItem[] = [];\r\n\r\n  /**\r\n   * Contains the _translations for this component.\r\n   * All UI strings should be defined here.\r\n   */\r\n  @State() protected _translations: typeof SolutionConfiguration_T9n;\r\n\r\n  /**\r\n   * Used to show/hide the content tree\r\n   */\r\n  @State() protected _treeOpen = true;\r\n\r\n  protected _solutionStoreHasChanges = false;\r\n\r\n  protected _solutionEditorHasChanges = false;\r\n\r\n  protected _solutionEditorHasErrors = false;\r\n\r\n  protected _canSave = false;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Event Listeners\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  @Listen(\"solutionItemSelected\", { target: \"window\" })\r\n  _solutionItemSelected(event: CustomEvent): void {\r\n    this._currentEditItemId = event.detail;\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Events\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Public Methods (async)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /*\r\n  @Method()\r\n  async getEditModels(): Promise<ISolutionItems> {\r\n    return Promise.resolve(state.items);\r\n  }\r\n  */\r\n\r\n  @Method()\r\n  async getSpatialReferenceInfo(): Promise<ISolutionSpatialReferenceInfo> {\r\n    return Promise.resolve(state.getStoreInfo(\"spatialReferenceInfo\"));\r\n  }\r\n\r\n  /*\r\n  @Method()\r\n  async getSourceTemplates(): Promise<any> {\r\n    return Promise.resolve(this._templates);\r\n  }\r\n  */\r\n\r\n  @Method()\r\n  async saveSolution(): Promise<void> {\r\n    this._solutionIsLoaded = false;\r\n    await state.saveSolution();\r\n    this._solutionIsLoaded = true;\r\n    this.solutionItemId = null;\r\n  }\r\n\r\n  @Method()\r\n  async unloadSolution(): Promise<void> {\r\n    this.solutionItemId = null;\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Private Methods\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Update the store with the initial values\r\n   *\r\n   * @param templates the solution items templates\r\n   * @param isReset (defaults to false) indicates if we are resetting the controls after save\r\n   */\r\n  /*\r\n  protected _initState(\r\n    templates: any[],\r\n    isReset = false\r\n  ): Promise<any> {\r\n    return new Promise((resolve, reject) => {\r\n      if (isReset) {\r\n        // clear models and state so we can refresh after save\r\n        this.modelsSet = false;\r\n        state.reset();\r\n      }\r\n      getModels(templates, this.authentication, this.solutionItemId).then(models => {\r\n        state.models = models;\r\n\r\n        state.featureServices = getFeatureServices(templates);\r\n        state.getStoreInfo(\"spatialReferenceInfo\") = getSpatialReferenceInfo(state.featureServices, this._sourceItemData);\r\n\r\n        if (isReset) {\r\n          // reset for undo/redo stack and diff editor tracking\r\n          const jsonEditors = Array.from(this.el.getElementsByTagName(\"json-editor\"));\r\n          // eslint-disable-next-line @typescript-eslint/no-floating-promises\r\n          jsonEditors.forEach(e => void e.reset());\r\n        }\r\n\r\n        this.modelsSet = true;\r\n        resolve(true);\r\n      }, () => reject);\r\n    });\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Set Props with the initial values\r\n   *\r\n   * @protected\r\n   */\r\n  protected _initProps(): void {\r\n    const solutionData = state.getStoreInfo(\"solutionData\");\r\n\r\n    this._solutionVariables = JSON.stringify(utils.getSolutionVariables(solutionData.templates, this._translations));\r\n    this._organizationVariables = JSON.stringify(utils.getOrganizationVariables(this._translations));\r\n\r\n    this._templateHierarchy = [...utils.getInventoryItems(solutionData.templates)];\r\n\r\n    if (this._solutionContentsComponent) {\r\n      this._solutionContentsComponent.templateHierarchy = this._templateHierarchy;\r\n    }\r\n\r\n    let firstItem: IItemTemplateEdit;\r\n    if (this._templateHierarchy.length > 0) {\r\n      // Start with the first item in the contents\r\n      firstItem = state.getItemInfo(this._templateHierarchy[0].id);\r\n    }\r\n    this._currentEditItemId = firstItem ? firstItem.itemId : \"\";\r\n  }\r\n\r\n  /**\r\n   * Loads a solution.\r\n   *\r\n   * @param solutionItemId AGO id of solution to load\r\n   *\r\n   * @returns Resolved promise when task is done\r\n   *\r\n   * @protected\r\n   */\r\n  protected async _loadSolution(solutionItemId: string): Promise<void> {\r\n    if (solutionItemId) {\r\n      this._solutionIsLoaded = false;\r\n      await state.loadSolution(solutionItemId, this.authentication);\r\n      this._initProps();\r\n      this._solutionIsLoaded = true;\r\n    } else {\r\n      this._reset();\r\n    }\r\n    return Promise.resolve();\r\n  }\r\n\r\n  /**\r\n   * Resets internal variables.\r\n   *\r\n   * @protected\r\n   */\r\n  protected _reset(): void {\r\n    this._currentEditItemId = \"\";\r\n    this._organizationVariables = \"\";\r\n    this._solutionVariables = \"\";\r\n    this._templateHierarchy = [];\r\n  }\r\n\r\n  /**\r\n   * Toggle _treeOpen prop to show/hide content tree.\r\n   *\r\n   * @protected\r\n   */\r\n  protected _toggleTree(): void {\r\n    this._treeOpen = !this._treeOpen;\r\n  }\r\n\r\n  /**\r\n   * Dispatches an event indicating if the configuration is saveable or not. It's not saveable if there are no\r\n   * changes or if there's an error in the JSON editor.\r\n   *\r\n   * @param solutionStoreHasChanges Are there changes in the configuration editor's internal store?\r\n   * @param solutionEditorHasChanges Are there changes in the configuration editor's JSON editor?\r\n   * @param solutionEditorHasErrors Are there errors in the configuration editor's JSON editor?\r\n   *\r\n   * @protected\r\n   */\r\n  protected _updateSaveability(\r\n    solutionStoreHasChanges: boolean,\r\n    solutionEditorHasChanges: boolean,\r\n    solutionEditorHasErrors: boolean\r\n  ): void {\r\n    const updateSaveability = (solutionStoreHasChanges || solutionEditorHasChanges) && !solutionEditorHasErrors;\r\n\r\n    if (this._canSave !== updateSaveability) {\r\n      window.dispatchEvent(new CustomEvent(\"solutionCanSave\", {\r\n        detail: updateSaveability,\r\n        bubbles: true,\r\n        cancelable: false,\r\n        composed: true\r\n      }));\r\n    }\r\n\r\n    this._canSave = updateSaveability;\r\n  }\r\n\r\n  /**\r\n   * Save all edits from the current configuration\r\n   *\r\n   * @returns a response that will indicate success or failure and any associated messages\r\n   */\r\n  /*\r\n  protected async _save() {\r\n    const templateUpdates = await this._updateTemplates();\r\n    const data = this._setSrInfo(templateUpdates.templates);\r\n    return templateUpdates.errors.length === 0 ? save(\r\n      this.solutionItemId,\r\n      data,\r\n      state.models,\r\n      this.authentication,\r\n      this._translations\r\n    ).then(saveResult => {\r\n      // need to trigger re-render...and re-fetch\r\n      this._fetchData = true;\r\n      this.modelsSet = false;\r\n      return Promise.resolve(saveResult)\r\n    }).catch(e => Promise.reject(e)) : Promise.reject({\r\n      success: false,\r\n      message: `The following templates have errors: ${templateUpdates.errors.join(\", \")}`\r\n    } as IResponse);\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Update the solutions templates based on the stored changes\r\n   *\r\n   * @returns an object that contains the updated templates as well as any errors that were found\r\n   */\r\n  /*\r\n  protected async _updateTemplates(): Promise<IUpdateTemplateResponse> {\r\n    const errors = [];\r\n    const models = await this.getEditModels();\r\n    let templates = this._updateGroupDependencies(models, this._templates);\r\n    Object.keys(models).forEach(k => {\r\n      const m = models[k];\r\n      templates = templates.map(t => {\r\n        if (t.itemId === m.itemId) {\r\n          this._setItem(t, m);\r\n          const hasDataError = this._setData(t, m);\r\n          const hasPropError = this._setProps(t, m);\r\n          if (hasDataError || hasPropError) {\r\n            errors.push(m.itemId);\r\n          }\r\n        }\r\n        return t;\r\n      });\r\n    });\r\n    errors.concat(window.monaco.editor.getModelMarkers({}));\r\n    return Promise.resolve({\r\n      templates,\r\n      errors\r\n    });\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Review all models and store itemIds that should be added or removed from group dependencies\r\n   *\r\n   * @param models the corresponding models for the current templates\r\n   *\r\n   * @returns group info (an object with keys of groupIds and\r\n   * arrays of itemIds that should be added or removed from group dependencies)\r\n   */\r\n  /*\r\n  protected _getGroupInfo(\r\n    models: any\r\n  ): any {\r\n    const groupInfo = {}\r\n    Object.keys(models).forEach(k => {\r\n      const m = models[k];\r\n      if (m.shareInfo) {\r\n        const groupId = m.shareInfo.groupId;\r\n        const type = m.shareInfo.shared ? \"share\" : \"unshare\";\r\n        if (groupInfo[groupId]) {\r\n          groupInfo[groupId][type].push(m.itemId);\r\n        } else {\r\n          groupInfo[groupId] = {};\r\n          groupInfo[groupId][type] = [m.itemId];\r\n          if (m.shareInfo.shared) {\r\n            groupInfo[groupId][\"unshare\"] = [];\r\n          } else {\r\n            groupInfo[groupId][\"share\"] = [];\r\n          }\r\n        }\r\n      }\r\n    });\r\n    return groupInfo;\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Updates group dependency arrays by adding or removing itemIds\r\n   *\r\n   * @param templates the current templates to update\r\n   * @param models the corresponding models for the current templates\r\n   *\r\n   * @returns updated templates array\r\n   */\r\n  /*\r\n  protected _updateGroupDependencies(\r\n    models: any,\r\n    templates: any[]\r\n  ): any[] {\r\n    const groupInfo = this._getGroupInfo(models);\r\n    Object.keys(groupInfo).forEach(k => {\r\n      templates.some(t => {\r\n        if (t.itemId === k) {\r\n          // add share items as deps\r\n          groupInfo[k].share.forEach(s => {\r\n            if (t.dependencies.indexOf(s) < 0) {\r\n              t.dependencies.push(s);\r\n            }\r\n          });\r\n\r\n          // remove unshare items from deps\r\n          groupInfo[k].unshare.forEach(s => {\r\n            const index = t.dependencies.indexOf(s);\r\n            if (index > -1) {\r\n              t.dependencies.splice(index, 1);\r\n            }\r\n          });\r\n          return true;\r\n        } else {\r\n          return false;\r\n        }\r\n      })\r\n    })\r\n    return templates;\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Add group IDs to items that should be shared\r\n   * This function will update the provided template when shareInfo is available\r\n   *\r\n   * @param template the current template to update\r\n   * @param shareInfo the corresponding shareInfo from the model for the current template\r\n   *\r\n   */\r\n  /*\r\n  protected _updateItemGroups(\r\n    template: any,\r\n    shareInfo: any\r\n  ): void {\r\n    if (shareInfo) {\r\n      const groupIndex = template.groups.indexOf(shareInfo.groupId);\r\n      if (groupIndex < 0 && shareInfo.shared) {\r\n        template.groups.push(shareInfo.groupId);\r\n      }\r\n      if (groupIndex > -1 && !shareInfo.shared) {\r\n        template.groups.splice(groupIndex, 1);\r\n      }\r\n    }\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Set a templates data property with changes from the models\r\n   *\r\n   * @param template the current template to update\r\n   * @param model the corresponding model for the current template (stores any user changes)\r\n   *\r\n   * @returns a boolean that indicates if any errors were detected\r\n   */\r\n  /*\r\n  protected _setData(\r\n    template: any,\r\n    model: any\r\n  ): boolean {\r\n    return this._setTemplateProp(\r\n      template,\r\n      model.dataOriginalValue,\r\n      model.dataCurrentValue,\r\n      \"data\"\r\n    );\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Set a templates properties property with changes from the models\r\n   *\r\n   * @param template the current template to update\r\n   * @param model the corresponding model for the current template (stores any user changes)\r\n   *\r\n   * @returns a boolean that indicates if any errors were detected\r\n   */\r\n  /*\r\n  protected _setProps(\r\n    template: any,\r\n    model: any\r\n  ): boolean {\r\n    return this._setTemplateProp(\r\n      template,\r\n      model.propsOriginalValue,\r\n      model.propsCurrentValue,\r\n      \"properties\"\r\n    );\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Generic function used to set properties or data property on a given template\r\n   *\r\n   * @param template the current template to update\r\n   * @param originValue the original value from the solution template\r\n   * @param modelValue the current value from the model (will contain any edits that have been made)\r\n   * @param path the path to the property we should update if any changes are found\r\n   *\r\n   * @returns a boolean that indicates if any errors were detected\r\n   */\r\n  /*\r\n  protected _setTemplateProp(\r\n    template: any,\r\n    originValue: any,\r\n    modelValue: any,\r\n    path: string\r\n  ): boolean {\r\n    let hasError = false;\r\n    try {\r\n      const _originValue = JSON.parse(originValue);\r\n      const _modelValue = JSON.parse(modelValue);\r\n\r\n      if (_originValue && _modelValue && (JSON.stringify(_originValue) !== JSON.stringify(_modelValue))) {\r\n        setProp(template, path, _modelValue);\r\n      }\r\n    } catch (e) {\r\n      console.error(e);\r\n      hasError = true;\r\n    }\r\n    return hasError;\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Set a templates item property with changes from the models\r\n   *\r\n   * @param template the current template to update\r\n   * @param model the corresponding model for the current template (stores any user changes)\r\n   *\r\n   * This function will update the template argument when edits are found\r\n   */\r\n  /*\r\n  protected _setItem(\r\n    template: any,\r\n    model: any\r\n  ): void {\r\n    this._updateItemGroups(template, model.shareInfo);\r\n    if (model.updateItemValues && Object.keys(model.updateItemValues).length > 0) {\r\n      Object.keys(model.updateItemValues).forEach(k => {\r\n        template.item[k] = model.updateItemValues[k];\r\n      });\r\n    }\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Set spatial reference info in the solutions data\r\n   *\r\n   * @param templates a list of item templates from the solution\r\n   *\r\n   * @returns a cloned copy of the solutions data that has been updated with spatial reference info\r\n   *\r\n   */\r\n  /*\r\n  protected _setSrInfo(\r\n    templates: any[]\r\n  ): any {\r\n    const srInfo: any = state.getStoreInfo(\"spatialReferenceInfo\");\r\n\r\n    const serviceEnabled = typeof srInfo?.services === \"undefined\" ?\r\n      false : Object.keys(srInfo.services).some(k => srInfo.services[k]);\r\n\r\n    const data = cloneObject(this._sourceItemData);\r\n    data.templates = templates;\r\n    if (srInfo && srInfo.enabled && serviceEnabled) {\r\n      const wkid = srInfo.spatialReference.wkid.toString();\r\n\r\n      const wkidParam = {\r\n        \"label\": \"Spatial Reference\",\r\n        \"default\": wkid,\r\n        \"valueType\": \"spatialReference\",\r\n        \"attributes\": {\r\n          \"required\": \"true\"\r\n        }\r\n      };\r\n\r\n      const params = getProp(data, \"params\");\r\n      const hasWkid = params && params.wkid;\r\n      setCreateProp(\r\n        data,\r\n        hasWkid ? \"params.wkid.default\" : \"params.wkid\",\r\n        hasWkid ? wkid : params ? wkidParam : wkid\r\n      );\r\n    } else if (!srInfo.enabled) {\r\n      if (getProp(data, \"params.wkid\")) {\r\n        delete (data.params.wkid);\r\n      }\r\n    }\r\n    return data;\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Fetches the component's translations\r\n   *\r\n   * @protected\r\n   */\r\n  protected async _getTranslations(): Promise<void> {\r\n    const translations = await getLocaleComponentStrings(this.el);\r\n    this._translations = translations[0] as typeof SolutionConfiguration_T9n;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"solution-configuration.js","sourceRoot":"","sources":["../../../src/components/solution-configuration/solution-configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["/** @license\r\n * Copyright 2022 Esri\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the \"License\");\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n *    http://www.apache.org/licenses/LICENSE-2.0\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an \"AS IS\" BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\n\r\nimport { Component, Element, h, Host, Listen, Method, Prop, State, VNode, Watch } from \"@stencil/core\";\r\nimport { IInventoryItem, IItemTemplateEdit, ISolutionSpatialReferenceInfo } from \"../../utils/interfaces\";\r\nimport * as utils from \"../../utils/templates\";\r\nimport state from \"../../utils/solution-store\";\r\nimport { getProp, UserSession } from \"@esri/solution-common\";\r\nimport \"@esri/calcite-components\";\r\nimport SolutionConfiguration_T9n from \"../../assets/t9n/solution-configuration/resources.json\";\r\nimport { getLocaleComponentStrings } from \"../../utils/locale\";\r\n\r\n@Component({\r\n  tag: \"solution-configuration\",\r\n  styleUrl: \"solution-configuration.scss\",\r\n  shadow: false\r\n})\r\nexport class SolutionConfiguration {\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Host element access\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  @Element() el: HTMLSolutionConfigurationElement;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Credentials for requests\r\n   */\r\n  @Prop({ mutable: true }) authentication = new UserSession({});\r\n\r\n  /**\r\n   * Contains the current solution item id\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) solutionItemId = \"\";\r\n\r\n  @Watch(\"solutionItemId\") async valueWatchHandler(): Promise<void> {\r\n    console.log(\"update solution config \" + this.solutionItemId);//???\r\n    await this._loadSolution(this.solutionItemId);\r\n  }\r\n\r\n  /**\r\n  * Used to show/hide loading indicator\r\n  */\r\n  @Prop({ mutable: true, reflect: true }) showLoading = false;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Lifecycle\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  constructor() {\r\n    void this._loadSolution(this.solutionItemId);\r\n\r\n    window.addEventListener(\"solutionStoreHasChanges\",\r\n      (evt) => {\r\n        this._updateSaveability(\r\n          this._solutionStoreHasChanges = (evt as any).detail, this._solutionEditorHasChanges, this._solutionEditorHasErrors);\r\n      }\r\n    );\r\n    window.addEventListener(\"solutionEditorHasChanges\",\r\n      (evt) => {\r\n        this._updateSaveability(\r\n          this._solutionStoreHasChanges, this._solutionEditorHasChanges = (evt as any).detail, this._solutionEditorHasErrors);\r\n      }\r\n    );\r\n    window.addEventListener(\"solutionEditorHasErrors\",\r\n      (evt) => {\r\n        this._updateSaveability(\r\n          this._solutionStoreHasChanges, this._solutionEditorHasChanges, this._solutionEditorHasErrors = (evt as any).detail);\r\n      }\r\n    );\r\n  }\r\n\r\n  /**\r\n   * StencilJS: Called once just after the component is first connected to the DOM.\r\n   *\r\n   * @returns Promise when complete\r\n   */\r\n  async componentWillLoad(): Promise<void> {\r\n    return this._getTranslations();\r\n  }\r\n\r\n  /**\r\n   * Renders the component.\r\n   */\r\n  render(): VNode {\r\n    console.log(\"render solution config \" + this.solutionItemId);//???\r\n    const wkid = getProp(state.getStoreInfo(\"spatialReferenceInfo\"), \"spatialReference\");\r\n    const hasServices: boolean = state.getStoreInfo(\"featureServices\").length > 0;\r\n\r\n    const solutionData = state.getStoreInfo(\"solutionData\");\r\n    this._solutionVariables = JSON.stringify(utils.getSolutionVariables(solutionData.templates, this._translations));\r\n    this._organizationVariables = JSON.stringify(utils.getOrganizationVariables(this._translations));\r\n\r\n    return (\r\n      <Host>\r\n        {\r\n          !this._solutionIsLoaded\r\n            ? <calcite-loader active label='' />\r\n            : null\r\n        }\r\n        <div class=\"configuration-container\">\r\n          <div class=\"configuration\">\r\n            <calcite-tabs class=\"config-tabs\">\r\n              <calcite-tab-nav slot=\"tab-nav\">\r\n                <calcite-tab-title>{this._translations.definitionTab}</calcite-tab-title>\r\n                {hasServices ?\r\n                  <calcite-tab-title>{this._translations.spatialReferenceTab}</calcite-tab-title> :\r\n                  null\r\n                }\r\n              </calcite-tab-nav>\r\n              <calcite-tab active class=\"config-tab\">\r\n                <div class=\"config-solution\">\r\n                  <div class={this._treeOpen ? \"config-inventory\" : \"config-inventory-hide\"}>\r\n                    <solution-contents\r\n                      id=\"configInventory\"\r\n                      key={`${this.solutionItemId}-contents`}\r\n                      ref={(el) => (this._solutionContentsComponent = el)}\r\n                    />\r\n                  </div>\r\n                  <calcite-button\r\n                    appearance=\"transparent\"\r\n                    class=\"collapse-btn\"\r\n                    icon-start={this._treeOpen ? \"chevrons-left\" : \"chevrons-right\"}\r\n                    id=\"collapse-vars\"\r\n                    onClick={() => this._toggleTree()}\r\n                    scale=\"s\"\r\n                    title={this._treeOpen ? this._translations.collapse : this._translations.expand}\r\n                  />\r\n                  <div class=\"config-item\">\r\n                    <solution-item\r\n                      authentication={this.authentication}\r\n                      item-id={this._currentEditItemId}\r\n                      key={`${this.solutionItemId}-item`}\r\n                      organization-variables={this._organizationVariables}\r\n                      solution-item-id={this.solutionItemId}\r\n                      solution-variables={this._solutionVariables}\r\n                    />\r\n                  </div>\r\n                </div>\r\n              </calcite-tab>\r\n              {\r\n                hasServices\r\n                  ? <calcite-tab class=\"config-tab\">\r\n                      <div class=\"config-solution\">\r\n                        <solution-spatial-ref\r\n                          defaultWkid={wkid}\r\n                          id=\"configure-solution-spatial-ref\"\r\n                          key={`${this.solutionItemId}-spatial-ref`}\r\n                          locked={!wkid}\r\n                          services={state.getStoreInfo(\"featureServices\").map(fs => fs.name)}\r\n                        />\r\n                      </div>\r\n                    </calcite-tab>\r\n                  : null\r\n              }\r\n            </calcite-tabs>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (protected)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Contains the current item we are working with\r\n   */\r\n  @State() protected _currentEditItemId = \"\";\r\n\r\n  @State() protected _organizationVariables = \"\";\r\n\r\n  @State() protected _solutionContentsComponent: HTMLSolutionContentsElement;\r\n\r\n  @State() protected _solutionIsLoaded = false;\r\n\r\n  @State() protected _solutionVariables = \"\";\r\n\r\n  /**\r\n   * Contains the hierarchy of template items for the current solution.\r\n   */\r\n  @State() protected _templateHierarchy: IInventoryItem[] = [];\r\n\r\n  /**\r\n   * Contains the _translations for this component.\r\n   * All UI strings should be defined here.\r\n   */\r\n  @State() protected _translations: typeof SolutionConfiguration_T9n;\r\n\r\n  /**\r\n   * Used to show/hide the content tree\r\n   */\r\n  @State() protected _treeOpen = true;\r\n\r\n  protected _solutionStoreHasChanges = false;\r\n\r\n  protected _solutionEditorHasChanges = false;\r\n\r\n  protected _solutionEditorHasErrors = false;\r\n\r\n  protected _canSave = false;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Event Listeners\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  @Listen(\"solutionItemSelected\", { target: \"window\" })\r\n  _solutionItemSelected(event: CustomEvent): void {\r\n    this._currentEditItemId = event.detail;\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Events\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Public Methods (async)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /*\r\n  @Method()\r\n  async getEditModels(): Promise<ISolutionItems> {\r\n    return Promise.resolve(state.items);\r\n  }\r\n  */\r\n\r\n  @Method()\r\n  async getSpatialReferenceInfo(): Promise<ISolutionSpatialReferenceInfo> {\r\n    return Promise.resolve(state.getStoreInfo(\"spatialReferenceInfo\"));\r\n  }\r\n\r\n  /*\r\n  @Method()\r\n  async getSourceTemplates(): Promise<any> {\r\n    return Promise.resolve(this._templates);\r\n  }\r\n  */\r\n\r\n  @Method()\r\n  async saveSolution(): Promise<void> {\r\n    this._solutionIsLoaded = false;\r\n    await state.saveSolution();\r\n    this._solutionIsLoaded = true;\r\n    this.solutionItemId = null;\r\n  }\r\n\r\n  @Method()\r\n  async unloadSolution(): Promise<void> {\r\n    this.solutionItemId = null;\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Private Methods\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Update the store with the initial values\r\n   *\r\n   * @param templates the solution items templates\r\n   * @param isReset (defaults to false) indicates if we are resetting the controls after save\r\n   */\r\n  /*\r\n  protected _initState(\r\n    templates: any[],\r\n    isReset = false\r\n  ): Promise<any> {\r\n    return new Promise((resolve, reject) => {\r\n      if (isReset) {\r\n        // clear models and state so we can refresh after save\r\n        this.modelsSet = false;\r\n        state.reset();\r\n      }\r\n      getModels(templates, this.authentication, this.solutionItemId).then(models => {\r\n        state.models = models;\r\n\r\n        state.featureServices = getFeatureServices(templates);\r\n        state.getStoreInfo(\"spatialReferenceInfo\") = getSpatialReferenceInfo(state.featureServices, this._sourceItemData);\r\n\r\n        if (isReset) {\r\n          // reset for undo/redo stack and diff editor tracking\r\n          const jsonEditors = Array.from(this.el.getElementsByTagName(\"json-editor\"));\r\n          // eslint-disable-next-line @typescript-eslint/no-floating-promises\r\n          jsonEditors.forEach(e => void e.reset());\r\n        }\r\n\r\n        this.modelsSet = true;\r\n        resolve(true);\r\n      }, () => reject);\r\n    });\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Set Props with the initial values\r\n   *\r\n   * @protected\r\n   */\r\n  protected _initProps(): void {\r\n    const solutionData = state.getStoreInfo(\"solutionData\");\r\n\r\n    this._templateHierarchy = [...utils.getInventoryItems(solutionData.templates)];\r\n\r\n    if (this._solutionContentsComponent) {\r\n      this._solutionContentsComponent.templateHierarchy = this._templateHierarchy;\r\n    }\r\n\r\n    let firstItem: IItemTemplateEdit;\r\n    if (this._templateHierarchy.length > 0) {\r\n      // Start with the first item in the contents\r\n      firstItem = state.getItemInfo(this._templateHierarchy[0].id);\r\n      console.log(\"init with first item \" + firstItem.itemId);//???\r\n    } else { console.log(\"no initial first item\");//???\r\n    }\r\n    this._currentEditItemId = firstItem ? firstItem.itemId : \"\";\r\n  }\r\n\r\n  /**\r\n   * Loads a solution.\r\n   *\r\n   * @param solutionItemId AGO id of solution to load\r\n   *\r\n   * @returns Resolved promise when task is done\r\n   *\r\n   * @protected\r\n   */\r\n  protected async _loadSolution(solutionItemId: string): Promise<void> {\r\n    if (solutionItemId) {\r\n      this._solutionIsLoaded = false;\r\n      await state.loadSolution(solutionItemId, this.authentication);\r\n      this._initProps();\r\n      this._solutionIsLoaded = true;\r\n    } else {\r\n      this._reset();\r\n    }\r\n    return Promise.resolve();\r\n  }\r\n\r\n  /**\r\n   * Resets internal variables.\r\n   *\r\n   * @protected\r\n   */\r\n  protected _reset(): void {\r\n    this._currentEditItemId = \"\";\r\n    this._organizationVariables = \"\";\r\n    this._solutionVariables = \"\";\r\n    this._templateHierarchy = [];\r\n  }\r\n\r\n  /**\r\n   * Toggle _treeOpen prop to show/hide content tree.\r\n   *\r\n   * @protected\r\n   */\r\n  protected _toggleTree(): void {\r\n    this._treeOpen = !this._treeOpen;\r\n  }\r\n\r\n  /**\r\n   * Dispatches an event indicating if the configuration is saveable or not. It's not saveable if there are no\r\n   * changes or if there's an error in the JSON editor.\r\n   *\r\n   * @param solutionStoreHasChanges Are there changes in the configuration editor's internal store?\r\n   * @param solutionEditorHasChanges Are there changes in the configuration editor's JSON editor?\r\n   * @param solutionEditorHasErrors Are there errors in the configuration editor's JSON editor?\r\n   *\r\n   * @protected\r\n   */\r\n  protected _updateSaveability(\r\n    solutionStoreHasChanges: boolean,\r\n    solutionEditorHasChanges: boolean,\r\n    solutionEditorHasErrors: boolean\r\n  ): void {\r\n    const updateSaveability = (solutionStoreHasChanges || solutionEditorHasChanges) && !solutionEditorHasErrors;\r\n\r\n    if (this._canSave !== updateSaveability) {\r\n      window.dispatchEvent(new CustomEvent(\"solutionCanSave\", {\r\n        detail: updateSaveability,\r\n        bubbles: true,\r\n        cancelable: false,\r\n        composed: true\r\n      }));\r\n    }\r\n\r\n    this._canSave = updateSaveability;\r\n  }\r\n\r\n  /**\r\n   * Save all edits from the current configuration\r\n   *\r\n   * @returns a response that will indicate success or failure and any associated messages\r\n   */\r\n  /*\r\n  protected async _save() {\r\n    const templateUpdates = await this._updateTemplates();\r\n    const data = this._setSrInfo(templateUpdates.templates);\r\n    return templateUpdates.errors.length === 0 ? save(\r\n      this.solutionItemId,\r\n      data,\r\n      state.models,\r\n      this.authentication,\r\n      this._translations\r\n    ).then(saveResult => {\r\n      // need to trigger re-render...and re-fetch\r\n      this._fetchData = true;\r\n      this.modelsSet = false;\r\n      return Promise.resolve(saveResult)\r\n    }).catch(e => Promise.reject(e)) : Promise.reject({\r\n      success: false,\r\n      message: `The following templates have errors: ${templateUpdates.errors.join(\", \")}`\r\n    } as IResponse);\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Update the solutions templates based on the stored changes\r\n   *\r\n   * @returns an object that contains the updated templates as well as any errors that were found\r\n   */\r\n  /*\r\n  protected async _updateTemplates(): Promise<IUpdateTemplateResponse> {\r\n    const errors = [];\r\n    const models = await this.getEditModels();\r\n    let templates = this._updateGroupDependencies(models, this._templates);\r\n    Object.keys(models).forEach(k => {\r\n      const m = models[k];\r\n      templates = templates.map(t => {\r\n        if (t.itemId === m.itemId) {\r\n          this._setItem(t, m);\r\n          const hasDataError = this._setData(t, m);\r\n          const hasPropError = this._setProps(t, m);\r\n          if (hasDataError || hasPropError) {\r\n            errors.push(m.itemId);\r\n          }\r\n        }\r\n        return t;\r\n      });\r\n    });\r\n    errors.concat(window.monaco.editor.getModelMarkers({}));\r\n    return Promise.resolve({\r\n      templates,\r\n      errors\r\n    });\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Review all models and store itemIds that should be added or removed from group dependencies\r\n   *\r\n   * @param models the corresponding models for the current templates\r\n   *\r\n   * @returns group info (an object with keys of groupIds and\r\n   * arrays of itemIds that should be added or removed from group dependencies)\r\n   */\r\n  /*\r\n  protected _getGroupInfo(\r\n    models: any\r\n  ): any {\r\n    const groupInfo = {}\r\n    Object.keys(models).forEach(k => {\r\n      const m = models[k];\r\n      if (m.shareInfo) {\r\n        const groupId = m.shareInfo.groupId;\r\n        const type = m.shareInfo.shared ? \"share\" : \"unshare\";\r\n        if (groupInfo[groupId]) {\r\n          groupInfo[groupId][type].push(m.itemId);\r\n        } else {\r\n          groupInfo[groupId] = {};\r\n          groupInfo[groupId][type] = [m.itemId];\r\n          if (m.shareInfo.shared) {\r\n            groupInfo[groupId][\"unshare\"] = [];\r\n          } else {\r\n            groupInfo[groupId][\"share\"] = [];\r\n          }\r\n        }\r\n      }\r\n    });\r\n    return groupInfo;\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Updates group dependency arrays by adding or removing itemIds\r\n   *\r\n   * @param templates the current templates to update\r\n   * @param models the corresponding models for the current templates\r\n   *\r\n   * @returns updated templates array\r\n   */\r\n  /*\r\n  protected _updateGroupDependencies(\r\n    models: any,\r\n    templates: any[]\r\n  ): any[] {\r\n    const groupInfo = this._getGroupInfo(models);\r\n    Object.keys(groupInfo).forEach(k => {\r\n      templates.some(t => {\r\n        if (t.itemId === k) {\r\n          // add share items as deps\r\n          groupInfo[k].share.forEach(s => {\r\n            if (t.dependencies.indexOf(s) < 0) {\r\n              t.dependencies.push(s);\r\n            }\r\n          });\r\n\r\n          // remove unshare items from deps\r\n          groupInfo[k].unshare.forEach(s => {\r\n            const index = t.dependencies.indexOf(s);\r\n            if (index > -1) {\r\n              t.dependencies.splice(index, 1);\r\n            }\r\n          });\r\n          return true;\r\n        } else {\r\n          return false;\r\n        }\r\n      })\r\n    })\r\n    return templates;\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Add group IDs to items that should be shared\r\n   * This function will update the provided template when shareInfo is available\r\n   *\r\n   * @param template the current template to update\r\n   * @param shareInfo the corresponding shareInfo from the model for the current template\r\n   *\r\n   */\r\n  /*\r\n  protected _updateItemGroups(\r\n    template: any,\r\n    shareInfo: any\r\n  ): void {\r\n    if (shareInfo) {\r\n      const groupIndex = template.groups.indexOf(shareInfo.groupId);\r\n      if (groupIndex < 0 && shareInfo.shared) {\r\n        template.groups.push(shareInfo.groupId);\r\n      }\r\n      if (groupIndex > -1 && !shareInfo.shared) {\r\n        template.groups.splice(groupIndex, 1);\r\n      }\r\n    }\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Set a templates data property with changes from the models\r\n   *\r\n   * @param template the current template to update\r\n   * @param model the corresponding model for the current template (stores any user changes)\r\n   *\r\n   * @returns a boolean that indicates if any errors were detected\r\n   */\r\n  /*\r\n  protected _setData(\r\n    template: any,\r\n    model: any\r\n  ): boolean {\r\n    return this._setTemplateProp(\r\n      template,\r\n      model.dataOriginalValue,\r\n      model.dataCurrentValue,\r\n      \"data\"\r\n    );\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Set a templates properties property with changes from the models\r\n   *\r\n   * @param template the current template to update\r\n   * @param model the corresponding model for the current template (stores any user changes)\r\n   *\r\n   * @returns a boolean that indicates if any errors were detected\r\n   */\r\n  /*\r\n  protected _setProps(\r\n    template: any,\r\n    model: any\r\n  ): boolean {\r\n    return this._setTemplateProp(\r\n      template,\r\n      model.propsOriginalValue,\r\n      model.propsCurrentValue,\r\n      \"properties\"\r\n    );\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Generic function used to set properties or data property on a given template\r\n   *\r\n   * @param template the current template to update\r\n   * @param originValue the original value from the solution template\r\n   * @param modelValue the current value from the model (will contain any edits that have been made)\r\n   * @param path the path to the property we should update if any changes are found\r\n   *\r\n   * @returns a boolean that indicates if any errors were detected\r\n   */\r\n  /*\r\n  protected _setTemplateProp(\r\n    template: any,\r\n    originValue: any,\r\n    modelValue: any,\r\n    path: string\r\n  ): boolean {\r\n    let hasError = false;\r\n    try {\r\n      const _originValue = JSON.parse(originValue);\r\n      const _modelValue = JSON.parse(modelValue);\r\n\r\n      if (_originValue && _modelValue && (JSON.stringify(_originValue) !== JSON.stringify(_modelValue))) {\r\n        setProp(template, path, _modelValue);\r\n      }\r\n    } catch (e) {\r\n      console.error(e);\r\n      hasError = true;\r\n    }\r\n    return hasError;\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Set a templates item property with changes from the models\r\n   *\r\n   * @param template the current template to update\r\n   * @param model the corresponding model for the current template (stores any user changes)\r\n   *\r\n   * This function will update the template argument when edits are found\r\n   */\r\n  /*\r\n  protected _setItem(\r\n    template: any,\r\n    model: any\r\n  ): void {\r\n    this._updateItemGroups(template, model.shareInfo);\r\n    if (model.updateItemValues && Object.keys(model.updateItemValues).length > 0) {\r\n      Object.keys(model.updateItemValues).forEach(k => {\r\n        template.item[k] = model.updateItemValues[k];\r\n      });\r\n    }\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Set spatial reference info in the solutions data\r\n   *\r\n   * @param templates a list of item templates from the solution\r\n   *\r\n   * @returns a cloned copy of the solutions data that has been updated with spatial reference info\r\n   *\r\n   */\r\n  /*\r\n  protected _setSrInfo(\r\n    templates: any[]\r\n  ): any {\r\n    const srInfo: any = state.getStoreInfo(\"spatialReferenceInfo\");\r\n\r\n    const serviceEnabled = typeof srInfo?.services === \"undefined\" ?\r\n      false : Object.keys(srInfo.services).some(k => srInfo.services[k]);\r\n\r\n    const data = cloneObject(this._sourceItemData);\r\n    data.templates = templates;\r\n    if (srInfo && srInfo.enabled && serviceEnabled) {\r\n      const wkid = srInfo.spatialReference.wkid.toString();\r\n\r\n      const wkidParam = {\r\n        \"label\": \"Spatial Reference\",\r\n        \"default\": wkid,\r\n        \"valueType\": \"spatialReference\",\r\n        \"attributes\": {\r\n          \"required\": \"true\"\r\n        }\r\n      };\r\n\r\n      const params = getProp(data, \"params\");\r\n      const hasWkid = params && params.wkid;\r\n      setCreateProp(\r\n        data,\r\n        hasWkid ? \"params.wkid.default\" : \"params.wkid\",\r\n        hasWkid ? wkid : params ? wkidParam : wkid\r\n      );\r\n    } else if (!srInfo.enabled) {\r\n      if (getProp(data, \"params.wkid\")) {\r\n        delete (data.params.wkid);\r\n      }\r\n    }\r\n    return data;\r\n  }\r\n  */\r\n\r\n  /**\r\n   * Fetches the component's translations\r\n   *\r\n   * @protected\r\n   */\r\n  protected async _getTranslations(): Promise<void> {\r\n    const translations = await getLocaleComponentStrings(this.el);\r\n    this._translations = translations[0] as typeof SolutionConfiguration_T9n;\r\n  }\r\n}\r\n"]}

package/dist/collection/components/solution-item/solution-item.js

@@ -32,6 +32,7 @@ export class SolutionItem {
     this._translations = undefined;
   }
   itemIdWatchHandler() {
+    console.log("update item; id " + this.itemId); //???
     const itemEdit = state.getItemInfo(this.itemId);
     this.itemType = itemEdit.type;
   }
@@ -50,6 +51,7 @@ export class SolutionItem {
    * Renders the component.
    */
   render() {
+    console.log("render item " + this.itemId); //???
     return (h(Host, null, h("div", { class: "configuration-container" }, h("div", { class: "configuration" }, this._showGroupTabs(this.itemType === "Group"), this._showItemTabs(this.itemType !== "Group")))));
   }
   //--------------------------------------------------------------------------

package/dist/collection/components/solution-item/solution-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"solution-item.js","sourceRoot":"","sources":["../../../src/components/solution-item/solution-item.tsx"],"names":[],"mappings":"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","sourcesContent":["/** @license\r\n * Copyright 2022 Esri\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the \"License\");\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n *    http://www.apache.org/licenses/LICENSE-2.0\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an \"AS IS\" BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\n\r\nimport { Component, Element, h, Host, Prop, State, VNode, Watch } from '@stencil/core';\r\nimport '@esri/calcite-components';\r\nimport state from \"../../utils/solution-store\";\r\nimport { UserSession } from '@esri/solution-common';\r\nimport SolutionItem_T9n from '../../assets/t9n/solution-item/resources.json';\r\nimport { getLocaleComponentStrings } from '../../utils/locale';\r\n\r\n@Component({\r\n  tag: 'solution-item',\r\n  styleUrl: 'solution-item.scss',\r\n  shadow: false\r\n})\r\nexport class SolutionItem {\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Host element access\r\n  //\r\n  //--------------------------------------------------------------------------\r\n  @Element() el: HTMLSolutionItemElement;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Credentials for requests\r\n   */\r\n  @Prop({ mutable: true }) authentication: UserSession;\r\n\r\n  /**\r\n   * A template's itemId.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) itemId = \"\";\r\n\r\n  @Watch(\"itemId\") itemIdWatchHandler(): void {\r\n    const itemEdit = state.getItemInfo(this.itemId);\r\n    this.itemType = itemEdit.type;\r\n  }\r\n\r\n  /**\r\n   * Contains the solution based variables\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) solutionVariables = \"\";\r\n\r\n  /**\r\n   * Contains the organization based variables\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) organizationVariables = \"\";\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Lifecycle\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * StencilJS: Called once just after the component is first connected to the DOM.\r\n   */\r\n  async componentWillLoad(): Promise<void> {\r\n    return this._getTranslations();\r\n  }\r\n\r\n  /**\r\n   * Renders the component.\r\n   */\r\n  render(): VNode {\r\n    return (\r\n      <Host>\r\n        <div class=\"configuration-container\">\r\n          <div class=\"configuration\">\r\n            {/* Using this rather than ternary operator as I was getting a tabIndex error\r\n                when switching between item and group type tab.\r\n                It was also not a smooth transition when the 3rd tab of an item was selected and you would switch to a group.\r\n             */}\r\n            {this._showGroupTabs(this.itemType === \"Group\")}\r\n            {this._showItemTabs(this.itemType !== \"Group\")}\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (protected)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  @State() itemType: string;\r\n\r\n  /**\r\n   * Contains the translations for this component.\r\n   * All UI strings should be defined here.\r\n   */\r\n  @State() protected _translations: typeof SolutionItem_T9n;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Event Listeners\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Events\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Public Methods (async)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Public Methods\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Render tabs based on group item types\r\n   *\r\n   * @param visible Should the current tab be visible\r\n   */\r\n  _showGroupTabs(\r\n    visible: boolean\r\n  ): VNode {\r\n    return <calcite-tabs class=\"config-tabs\" style={{ display: visible ? \"inherit\" : \"none\" }}>\r\n      <calcite-tab-nav slot=\"tab-nav\">\r\n        <calcite-tab-title>{this._translations.groupDetailsTab}</calcite-tab-title>\r\n        <calcite-tab-title>{this._translations.sharingTab}</calcite-tab-title>\r\n      </calcite-tab-nav>\r\n\r\n      <calcite-tab active class=\"config-tab\" id=\"group-tab\">\r\n        <solution-item-details\r\n          item-id={this.itemId}\r\n        />\r\n      </calcite-tab>\r\n      <calcite-tab class=\"config-tab\" id=\"share-tab\">\r\n        <solution-item-sharing\r\n          group-id={this.itemId}\r\n        />\r\n      </calcite-tab>\r\n    </calcite-tabs>\r\n  }\r\n\r\n  /**\r\n   * Render tabs based for an items details, data, and props section from a template\r\n   *\r\n   * @param visible Should the current tab be visible\r\n   */\r\n  _showItemTabs(\r\n    visible: boolean\r\n  ): VNode {\r\n    return <calcite-tabs class=\"config-tabs\" style={{ display: visible ? \"inherit\" : \"none\" }}>\r\n      <calcite-tab-nav slot=\"tab-nav\">\r\n        <calcite-tab-title>{this._translations.itemDetailsTab}</calcite-tab-title>\r\n        <calcite-tab-title>{this._translations.dataTab}</calcite-tab-title>\r\n        <calcite-tab-title>{this._translations.propertiesTab}</calcite-tab-title>\r\n        <calcite-tab-title>{this._translations.resourcesTab}</calcite-tab-title>\r\n      </calcite-tab-nav>\r\n\r\n      <calcite-tab active class=\"config-tab\">\r\n        <solution-item-details\r\n          item-id={this.itemId}\r\n        />\r\n      </calcite-tab>\r\n      <calcite-tab class=\"config-tab\" id=\"data-tab\">\r\n        <solution-template-data\r\n          instanceid=\"data\"\r\n          item-id={this.itemId}\r\n          organization-variables={this.organizationVariables}\r\n          solution-variables={this.solutionVariables}\r\n        />\r\n      </calcite-tab>\r\n      <calcite-tab class=\"config-tab\" id=\"props-tab\">\r\n        <solution-template-data\r\n          instanceid=\"properties\"\r\n          item-id={this.itemId}\r\n          organization-variables={this.organizationVariables}\r\n          solution-variables={this.solutionVariables}\r\n        />\r\n      </calcite-tab>\r\n      <calcite-tab class=\"config-tab\" id=\"resources-tab\">\r\n        <solution-resource-item\r\n          authentication={this.authentication}\r\n          class=\"solutions-resource-container\"\r\n          item-id={this.itemId}\r\n        />\r\n      </calcite-tab>\r\n    </calcite-tabs>\r\n  }\r\n\r\n  /**\r\n   * Fetches the component's translations\r\n   *\r\n   * @protected\r\n   */\r\n  protected async _getTranslations(): Promise<void> {\r\n    const translations = await getLocaleComponentStrings(this.el);\r\n    this._translations = translations[0] as typeof SolutionItem_T9n;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"solution-item.js","sourceRoot":"","sources":["../../../src/components/solution-item/solution-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAS,KAAK,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,MAAM,4BAA4B,CAAC;AAG/C,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAO/D,MAAM,OAAO,YAAY;;;kBAuB0B,EAAE;6BAWS,EAAE;iCAKE,EAAE;;;;EAdjD,kBAAkB;IACjC,OAAO,CAAC,GAAG,CAAC,kBAAkB,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA,KAAK;IACnD,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC;EAChC,CAAC;EAYD,4EAA4E;EAC5E,EAAE;EACF,aAAa;EACb,EAAE;EACF,4EAA4E;EAE5E;;KAEG;EACH,KAAK,CAAC,iBAAiB;IACrB,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC;EACjC,CAAC;EAED;;KAEG;EACH,MAAM;IACJ,OAAO,CAAC,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA,KAAK;IAC/C,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,yBAAyB;QAClC,WAAK,KAAK,EAAC,eAAe;UAKvB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC;UAC9C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC,CAC1C,CACF,CACD,CACR,CAAC;EACJ,CAAC;EAgBD,4EAA4E;EAC5E,EAAE;EACF,mBAAmB;EACnB,EAAE;EACF,4EAA4E;EAE5E,4EAA4E;EAC5E,EAAE;EACF,UAAU;EACV,EAAE;EACF,4EAA4E;EAE5E,4EAA4E;EAC5E,EAAE;EACF,0BAA0B;EAC1B,EAAE;EACF,4EAA4E;EAE5E,4EAA4E;EAC5E,EAAE;EACF,kBAAkB;EAClB,EAAE;EACF,4EAA4E;EAE5E;;;;KAIG;EACH,cAAc,CACZ,OAAgB;IAEhB,OAAO,oBAAc,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EAAE;MACvF,uBAAiB,IAAI,EAAC,SAAS;QAC7B,6BAAoB,IAAI,CAAC,aAAa,CAAC,eAAe,CAAqB;QAC3E,6BAAoB,IAAI,CAAC,aAAa,CAAC,UAAU,CAAqB,CACtD;MAElB,mBAAa,MAAM,QAAC,KAAK,EAAC,YAAY,EAAC,EAAE,EAAC,WAAW;QACnD,wCACW,IAAI,CAAC,MAAM,GACpB,CACU;MACd,mBAAa,KAAK,EAAC,YAAY,EAAC,EAAE,EAAC,WAAW;QAC5C,yCACY,IAAI,CAAC,MAAM,GACrB,CACU,CACD,CAAA;EACjB,CAAC;EAED;;;;KAIG;EACH,aAAa,CACX,OAAgB;IAEhB,OAAO,oBAAc,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EAAE;MACvF,uBAAiB,IAAI,EAAC,SAAS;QAC7B,6BAAoB,IAAI,CAAC,aAAa,CAAC,cAAc,CAAqB;QAC1E,6BAAoB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAqB;QACnE,6BAAoB,IAAI,CAAC,aAAa,CAAC,aAAa,CAAqB;QACzE,6BAAoB,IAAI,CAAC,aAAa,CAAC,YAAY,CAAqB,CACxD;MAElB,mBAAa,MAAM,QAAC,KAAK,EAAC,YAAY;QACpC,wCACW,IAAI,CAAC,MAAM,GACpB,CACU;MACd,mBAAa,KAAK,EAAC,YAAY,EAAC,EAAE,EAAC,UAAU;QAC3C,8BACE,UAAU,EAAC,MAAM,aACR,IAAI,CAAC,MAAM,4BACI,IAAI,CAAC,qBAAqB,wBAC9B,IAAI,CAAC,iBAAiB,GAC1C,CACU;MACd,mBAAa,KAAK,EAAC,YAAY,EAAC,EAAE,EAAC,WAAW;QAC5C,8BACE,UAAU,EAAC,YAAY,aACd,IAAI,CAAC,MAAM,4BACI,IAAI,CAAC,qBAAqB,wBAC9B,IAAI,CAAC,iBAAiB,GAC1C,CACU;MACd,mBAAa,KAAK,EAAC,YAAY,EAAC,EAAE,EAAC,eAAe;QAChD,8BACE,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,KAAK,EAAC,8BAA8B,aAC3B,IAAI,CAAC,MAAM,GACpB,CACU,CACD,CAAA;EACjB,CAAC;EAED;;;;KAIG;EACO,KAAK,CAAC,gBAAgB;IAC9B,MAAM,YAAY,GAAG,MAAM,yBAAyB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9D,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC,CAAC,CAA4B,CAAC;EAClE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/** @license\r\n * Copyright 2022 Esri\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the \"License\");\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n *    http://www.apache.org/licenses/LICENSE-2.0\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an \"AS IS\" BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\n\r\nimport { Component, Element, h, Host, Prop, State, VNode, Watch } from '@stencil/core';\r\nimport '@esri/calcite-components';\r\nimport state from \"../../utils/solution-store\";\r\nimport { UserSession } from '@esri/solution-common';\r\nimport SolutionItem_T9n from '../../assets/t9n/solution-item/resources.json';\r\nimport { getLocaleComponentStrings } from '../../utils/locale';\r\n\r\n@Component({\r\n  tag: 'solution-item',\r\n  styleUrl: 'solution-item.scss',\r\n  shadow: false\r\n})\r\nexport class SolutionItem {\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Host element access\r\n  //\r\n  //--------------------------------------------------------------------------\r\n  @Element() el: HTMLSolutionItemElement;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Credentials for requests\r\n   */\r\n  @Prop({ mutable: true }) authentication: UserSession;\r\n\r\n  /**\r\n   * A template's itemId.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) itemId = \"\";\r\n\r\n  @Watch(\"itemId\") itemIdWatchHandler(): void {\r\n    console.log(\"update item; id \" + this.itemId);//???\r\n    const itemEdit = state.getItemInfo(this.itemId);\r\n    this.itemType = itemEdit.type;\r\n  }\r\n\r\n  /**\r\n   * Contains the solution based variables\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) solutionVariables = \"\";\r\n\r\n  /**\r\n   * Contains the organization based variables\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) organizationVariables = \"\";\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Lifecycle\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * StencilJS: Called once just after the component is first connected to the DOM.\r\n   */\r\n  async componentWillLoad(): Promise<void> {\r\n    return this._getTranslations();\r\n  }\r\n\r\n  /**\r\n   * Renders the component.\r\n   */\r\n  render(): VNode {\r\n    console.log(\"render item \" + this.itemId);//???\r\n    return (\r\n      <Host>\r\n        <div class=\"configuration-container\">\r\n          <div class=\"configuration\">\r\n            {/* Using this rather than ternary operator as I was getting a tabIndex error\r\n                when switching between item and group type tab.\r\n                It was also not a smooth transition when the 3rd tab of an item was selected and you would switch to a group.\r\n             */}\r\n            {this._showGroupTabs(this.itemType === \"Group\")}\r\n            {this._showItemTabs(this.itemType !== \"Group\")}\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (protected)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  @State() itemType: string;\r\n\r\n  /**\r\n   * Contains the translations for this component.\r\n   * All UI strings should be defined here.\r\n   */\r\n  @State() protected _translations: typeof SolutionItem_T9n;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Event Listeners\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Events\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Public Methods (async)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Public Methods\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Render tabs based on group item types\r\n   *\r\n   * @param visible Should the current tab be visible\r\n   */\r\n  _showGroupTabs(\r\n    visible: boolean\r\n  ): VNode {\r\n    return <calcite-tabs class=\"config-tabs\" style={{ display: visible ? \"inherit\" : \"none\" }}>\r\n      <calcite-tab-nav slot=\"tab-nav\">\r\n        <calcite-tab-title>{this._translations.groupDetailsTab}</calcite-tab-title>\r\n        <calcite-tab-title>{this._translations.sharingTab}</calcite-tab-title>\r\n      </calcite-tab-nav>\r\n\r\n      <calcite-tab active class=\"config-tab\" id=\"group-tab\">\r\n        <solution-item-details\r\n          item-id={this.itemId}\r\n        />\r\n      </calcite-tab>\r\n      <calcite-tab class=\"config-tab\" id=\"share-tab\">\r\n        <solution-item-sharing\r\n          group-id={this.itemId}\r\n        />\r\n      </calcite-tab>\r\n    </calcite-tabs>\r\n  }\r\n\r\n  /**\r\n   * Render tabs based for an items details, data, and props section from a template\r\n   *\r\n   * @param visible Should the current tab be visible\r\n   */\r\n  _showItemTabs(\r\n    visible: boolean\r\n  ): VNode {\r\n    return <calcite-tabs class=\"config-tabs\" style={{ display: visible ? \"inherit\" : \"none\" }}>\r\n      <calcite-tab-nav slot=\"tab-nav\">\r\n        <calcite-tab-title>{this._translations.itemDetailsTab}</calcite-tab-title>\r\n        <calcite-tab-title>{this._translations.dataTab}</calcite-tab-title>\r\n        <calcite-tab-title>{this._translations.propertiesTab}</calcite-tab-title>\r\n        <calcite-tab-title>{this._translations.resourcesTab}</calcite-tab-title>\r\n      </calcite-tab-nav>\r\n\r\n      <calcite-tab active class=\"config-tab\">\r\n        <solution-item-details\r\n          item-id={this.itemId}\r\n        />\r\n      </calcite-tab>\r\n      <calcite-tab class=\"config-tab\" id=\"data-tab\">\r\n        <solution-template-data\r\n          instanceid=\"data\"\r\n          item-id={this.itemId}\r\n          organization-variables={this.organizationVariables}\r\n          solution-variables={this.solutionVariables}\r\n        />\r\n      </calcite-tab>\r\n      <calcite-tab class=\"config-tab\" id=\"props-tab\">\r\n        <solution-template-data\r\n          instanceid=\"properties\"\r\n          item-id={this.itemId}\r\n          organization-variables={this.organizationVariables}\r\n          solution-variables={this.solutionVariables}\r\n        />\r\n      </calcite-tab>\r\n      <calcite-tab class=\"config-tab\" id=\"resources-tab\">\r\n        <solution-resource-item\r\n          authentication={this.authentication}\r\n          class=\"solutions-resource-container\"\r\n          item-id={this.itemId}\r\n        />\r\n      </calcite-tab>\r\n    </calcite-tabs>\r\n  }\r\n\r\n  /**\r\n   * Fetches the component's translations\r\n   *\r\n   * @protected\r\n   */\r\n  protected async _getTranslations(): Promise<void> {\r\n    const translations = await getLocaleComponentStrings(this.el);\r\n    this._translations = translations[0] as typeof SolutionItem_T9n;\r\n  }\r\n}\r\n"]}

package/dist/collection/components/solution-item-details/solution-item-details.js

@@ -39,9 +39,7 @@ export class SolutionItemDetails {
     this.thumbnailContainer = undefined;
   }
   itemIdWatchHandler() {
-    this.itemEdit = state.getItemInfo(this.itemId);
-    this.itemDetails = this.itemEdit.item;
-    this.itemType = this.itemDetails.type;
+    console.log("update item details; id " + this.itemId); //???
   }
   //--------------------------------------------------------------------------
   //
@@ -54,15 +52,27 @@ export class SolutionItemDetails {
   async componentWillLoad() {
     return this._getTranslations();
   }
-  componentDidRender() {
-    this._loadThumb();
+  async componentWillRender() {
+    console.log("update item details " + this.itemId); //???
+    this.itemEdit = state.getItemInfo(this.itemId);
+    if (this.itemEdit) {
+      this.itemDetails = this.itemEdit.item;
+      this.itemType = this.itemDetails.type;
+    }
+    return Promise.resolve();
   }
   /**
    * Renders the component.
    */
   render() {
+    console.log("render item details " + this.itemId); //???
+    console.log("              title " + this.itemDetails.title); //???
+    console.log("            snippet " + this.itemDetails.snippet); //???
     return (h(Host, null, h("div", { class: "parent-container" }, h("div", { class: "inputBottomSeparation" }, h("calcite-input", { id: "item-title", value: this.itemDetails.title })), h("div", { class: "inputBottomSeparation" }, h("input", { accept: ".jpg,.gif,.png,image/jpg,image/gif,image/png", class: "display-none", onChange: (event) => (this._updateThumbnail(event)), ref: (el) => (this.browseForThumbnail = el), type: "file" }), h("button", { class: "font-size--3 btn-link inline-block trailer-quarter", onClick: () => this._getThumbnail() }, h("svg", { class: "icon-inline icon-inline--on-left", height: "16", viewBox: "0 0 16 16", width: "16" }, h("path", { d: "M14.792 2.666l-1.414-1.413a.965.965 0 0 0-1.385-.03l-1.444 1.444-8.763 8.72L.03 15.481a.371.371 0 0 0 .488.488l4.096-1.756 8.763-8.72-.001-.001.002.002 1.443-1.444a.965.965 0 0 0-.03-1.385zM1.569 14.431l.554-1.293.74.739zm2.338-.924l-1.414-1.414 7.963-7.92 1.414 1.415zm8.67-8.626l-1.413-1.414 1.29-1.29a.306.306 0 0 1 .433 0l.981.98a.306.306 0 0 1 0 .433z" })), this._translations.editThumbnail), h("div", { class: "flex" }, h("div", { class: "img-container", ref: (el) => (this.thumbnailContainer = el) }, h("img", { class: "scale-down", height: "133", id: "item-thumbnail", ref: (el) => (this.thumbnail = el), width: "200" })), h("div", { class: "snippet-count-container" }, h("calcite-input", { id: "item-snippet", maxlength: 250, type: "textarea", value: this.itemDetails.snippet }), h("label", { class: "font-size--3", id: "item-snippet-count", ref: (el) => (this.itemSnippetCount = el) })))), h("calcite-label", null, this._translations.description, h("label", { id: "item-description-label" }, h("calcite-input", { id: "item-description", type: "textarea", value: this.itemDetails.description }))), h("calcite-label", null, this._translations.tags, h("label", { id: "item-tags-label" }, h("calcite-input", { id: "item-tags", value: (this.itemDetails.tags && Array.isArray(this.itemDetails.tags) ? this.itemDetails.tags : [this.itemDetails.tags]).join(",") }))), this.itemType !== "Group" ? h("calcite-label", null, this._translations.credits, h("label", { id: "item-credits-label" }, h("calcite-input", { id: "item-credits", value: this.itemDetails.accessInformation }))) : null, this.itemType !== "Group" ? h("calcite-label", null, h("label", { id: "item-terms-label" }, this._translations.termsOfUse, h("calcite-input", { id: "item-terms", type: "textarea", value: this.itemDetails.licenseInfo }))) : null)));
   }
+  componentDidRender() {
+    this._loadThumb();
+  }
   //--------------------------------------------------------------------------
   //
   //  Event Listeners

package/dist/collection/components/solution-item-details/solution-item-details.js.map

@@ -1 +1 @@
-{"version":3,"file":"solution-item-details.js","sourceRoot":"","sources":["../../../src/components/solution-item-details/solution-item-details.tsx"],"names":[],"mappings":"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","sourcesContent":["/** @license\r\n * Copyright 2022 Esri\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the \"License\");\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n *    http://www.apache.org/licenses/LICENSE-2.0\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an \"AS IS\" BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\n\r\nimport { Component, Element, h, Host, Listen, Prop, State, VNode, Watch } from '@stencil/core';\r\nimport '@esri/calcite-components';\r\nimport state from \"../../utils/solution-store\";\r\nimport SolutionItemDetails_T9n from '../../assets/t9n/solution-item-details/resources.json';\r\nimport { getLocaleComponentStrings } from '../../utils/locale';\r\nimport { IItemGeneralized } from '@esri/solution-common';\r\nimport { IItemTemplateEdit } from '../../utils/interfaces';\r\n\r\n@Component({\r\n  tag: 'solution-item-details',\r\n  styleUrl: 'solution-item-details.scss',\r\n  shadow: false,\r\n})\r\nexport class SolutionItemDetails {\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Host element access\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  @Element() el: HTMLSolutionItemDetailsElement;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * A template's itemId.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) itemId = \"\";\r\n\r\n  @Watch(\"itemId\") itemIdWatchHandler(): void {\r\n    this.itemEdit = state.getItemInfo(this.itemId);\r\n    this.itemDetails = this.itemEdit.item;\r\n    this.itemType = this.itemDetails.type;\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Lifecycle\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * StencilJS: Called once just after the component is first connected to the DOM.\r\n   */\r\n  async componentWillLoad(): Promise<void> {\r\n    return this._getTranslations();\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    this._loadThumb()\r\n  }\r\n\r\n  /**\r\n   * Renders the component.\r\n   */\r\n  render(): VNode {\r\n    return (\r\n      <Host>\r\n        <div class=\"parent-container\">\r\n          <div class=\"inputBottomSeparation\">\r\n            <calcite-input id=\"item-title\" value={this.itemDetails.title} />\r\n          </div>\r\n\r\n          <div class=\"inputBottomSeparation\">\r\n\r\n            <input accept=\".jpg,.gif,.png,image/jpg,image/gif,image/png\" class=\"display-none\" onChange={(event) => (this._updateThumbnail(event))} ref={(el) => (this.browseForThumbnail = el)} type=\"file\" />\r\n\r\n            <button class=\"font-size--3 btn-link inline-block trailer-quarter\" onClick={() => this._getThumbnail()}>\r\n              <svg class=\"icon-inline icon-inline--on-left\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\">\r\n                <path d=\"M14.792 2.666l-1.414-1.413a.965.965 0 0 0-1.385-.03l-1.444 1.444-8.763 8.72L.03 15.481a.371.371 0 0 0 .488.488l4.096-1.756 8.763-8.72-.001-.001.002.002 1.443-1.444a.965.965 0 0 0-.03-1.385zM1.569 14.431l.554-1.293.74.739zm2.338-.924l-1.414-1.414 7.963-7.92 1.414 1.415zm8.67-8.626l-1.413-1.414 1.29-1.29a.306.306 0 0 1 .433 0l.981.98a.306.306 0 0 1 0 .433z\" />\r\n              </svg>{this._translations.editThumbnail}\r\n            </button>\r\n\r\n            <div class=\"flex\">\r\n              <div class=\"img-container\" ref={(el) => (this.thumbnailContainer = el)}>\r\n                <img class=\"scale-down\" height=\"133\" id=\"item-thumbnail\" ref={(el) => (this.thumbnail = el)} width=\"200\" />\r\n              </div>\r\n              <div class=\"snippet-count-container\">\r\n                <calcite-input id=\"item-snippet\" maxlength={250} type=\"textarea\" value={this.itemDetails.snippet} />\r\n                <label class=\"font-size--3\" id=\"item-snippet-count\" ref={(el) => (this.itemSnippetCount = el)} />\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <calcite-label>{this._translations.description}\r\n            <label id=\"item-description-label\">\r\n              <calcite-input id=\"item-description\" type=\"textarea\" value={this.itemDetails.description} />\r\n            </label>\r\n          </calcite-label>\r\n\r\n          <calcite-label>{this._translations.tags}\r\n            <label id=\"item-tags-label\">\r\n              <calcite-input id=\"item-tags\" value={(this.itemDetails.tags && Array.isArray(this.itemDetails.tags) ? this.itemDetails.tags : [this.itemDetails.tags]).join(\",\")} />\r\n            </label>\r\n          </calcite-label>\r\n\r\n          {this.itemType !== \"Group\" ? <calcite-label>{this._translations.credits}\r\n            <label id=\"item-credits-label\">\r\n              <calcite-input id=\"item-credits\" value={this.itemDetails.accessInformation} />\r\n            </label>\r\n          </calcite-label> : null}\r\n\r\n          {this.itemType !== \"Group\" ? <calcite-label>\r\n            <label id=\"item-terms-label\">{this._translations.termsOfUse}\r\n              <calcite-input id=\"item-terms\" type=\"textarea\" value={this.itemDetails.licenseInfo} />\r\n            </label>\r\n          </calcite-label> : null}\r\n\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (protected)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Handle to the element for browsing for a file.\r\n   */\r\n  protected browseForThumbnail: HTMLInputElement;\r\n\r\n  @State() itemDetails: IItemGeneralized = {\r\n    accessInformation: \"\",\r\n    description: \"\",\r\n    licenseInfo: \"\",\r\n    snippet: \"\",\r\n    tags: [],\r\n    title: \"\"\r\n  } as any;\r\n\r\n  @State() protected itemEdit: IItemTemplateEdit;\r\n\r\n  protected itemType: string;\r\n\r\n  /**\r\n   * Contains the translations for this component.\r\n   * All UI strings should be defined here.\r\n   */\r\n  @State() _translations: typeof SolutionItemDetails_T9n;\r\n\r\n  /**\r\n   * Handle to the snippet character-count feedback.\r\n   */\r\n  protected itemSnippetCount: HTMLLabelElement;\r\n\r\n  /**\r\n   * Handle to the thumbnail image display.\r\n   */\r\n  @State() protected thumbnail: HTMLImageElement;\r\n\r\n  /**\r\n   * Handle to the thumbnail image container.\r\n   */\r\n  @State() protected thumbnailContainer: HTMLElement;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Event Listeners\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Updates the component's value with changes to the input fields.\r\n   */\r\n  @Listen(\"calciteInputInput\")\r\n  inputReceivedHandler(event: any): void {\r\n    switch (event.target.id) {\r\n      case \"item-title\":\r\n        this.itemDetails.title = event.target.value;\r\n        this._updateStore();\r\n        break;\r\n      case \"item-snippet\":\r\n        if (event.target.value.length > 250) {\r\n          event.target.value = event.target.value.substring(0, 250);\r\n        }\r\n        this.itemDetails.snippet = event.target.value;\r\n        this._updateLengthLabel(this.itemDetails.snippet);\r\n        this._updateStore();\r\n        break;\r\n      case \"item-description\":\r\n        this.itemDetails.description = event.target.value;\r\n        this._updateStore();\r\n        break;\r\n      case \"item-tags\":\r\n        this.itemDetails.tags = event.target.value;\r\n        this._updateStore();\r\n        break;\r\n      case \"item-credits\":\r\n        this.itemDetails.accessInformation = event.target.value;\r\n        this._updateStore();\r\n        break;\r\n      case \"item-terms\":\r\n        this.itemDetails.licenseInfo = event.target.value;\r\n        this._updateStore();\r\n        break;\r\n    }\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Events\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Public Methods (async)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Private Methods\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Opens image file browse dialog.\r\n   *\r\n   */\r\n  protected _getThumbnail(): void {\r\n    this.browseForThumbnail.click();\r\n  }\r\n\r\n  /**\r\n   * Load the templates thumbnail\r\n   *\r\n   */\r\n  protected _loadThumb(): void {\r\n    if (this.thumbnail && this.itemEdit?.thumbnail) {\r\n      // Show the thumbnail\r\n      this.thumbnail.src = URL.createObjectURL(this.itemEdit.thumbnail);\r\n      this.thumbnailContainer.classList.remove(\"empty-box\");\r\n      this.thumbnail.classList.remove(\"display-none\");\r\n    } else {\r\n      // Replace the thumbnail with an empty box\r\n      this.thumbnailContainer.classList.add(\"empty-box\");\r\n      this.thumbnail.classList.add(\"display-none\");\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Updates the length label to reflect the current number of characters\r\n   * relative to the max number of characters supported.\r\n   *\r\n   * @param phrase the current phrase from the control\r\n   */\r\n  protected _updateLengthLabel(phrase: string): void {\r\n    this.itemSnippetCount.innerText =\r\n      this._translations.snippetCountPattern.replace(\"{{n}}\", phrase.length.toString());\r\n  }\r\n\r\n  /**\r\n   * Add or remove the value from the store\r\n   */\r\n  protected _updateStore(\r\n  ): void {\r\n    this.itemEdit = state.getItemInfo(this.itemId);\r\n    this.itemEdit.item = this.itemDetails;\r\n    state.setItemInfo(this.itemEdit);\r\n  }\r\n\r\n  /**\r\n   * Gets and displays image result from browse and updates the item in the store.\r\n   *\r\n   * @param event The input controls event that contains the new file\r\n   * @param updateStore boolean that controls if the new value is written to the store\r\n   *  should be false on the initial load but true the rest of the time\r\n   */\r\n  protected _updateThumbnail(\r\n    event: any\r\n  ): void {\r\n    const files = event.target.files;\r\n    if (files && files[0]) {\r\n      if (this.thumbnail) {\r\n        // Update UI\r\n        this.thumbnail.src = URL.createObjectURL(files[0]);\r\n\r\n        // Update info in store\r\n        this.itemEdit = state.getItemInfo(this.itemId);\r\n        this.itemEdit.thumbnail = files[0];\r\n        state.replaceItemThumbnail(this.itemEdit);\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Fetches the component's translations\r\n   *\r\n   * @protected\r\n   */\r\n  protected async _getTranslations(): Promise<void> {\r\n    const translations = await getLocaleComponentStrings(this.el);\r\n    this._translations = translations[0] as typeof SolutionItemDetails_T9n;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"solution-item-details.js","sourceRoot":"","sources":["../../../src/components/solution-item-details/solution-item-details.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAS,KAAK,EAAE,MAAM,eAAe,CAAC;AAC/F,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,MAAM,4BAA4B,CAAC;AAE/C,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAS/D,MAAM,OAAO,mBAAmB;;kBAmBmB,EAAE;uBA4GV;MACvC,iBAAiB,EAAE,EAAE;MACrB,WAAW,EAAE,EAAE;MACf,WAAW,EAAE,EAAE;MACf,OAAO,EAAE,EAAE;MACX,IAAI,EAAE,EAAE;MACR,KAAK,EAAE,EAAE;KACH;;;;;;EAjHS,kBAAkB;IACjC,OAAO,CAAC,GAAG,CAAC,0BAA0B,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA,KAAK;EAC7D,CAAC;EAED,4EAA4E;EAC5E,EAAE;EACF,aAAa;EACb,EAAE;EACF,4EAA4E;EAE5E;;KAEG;EACH,KAAK,CAAC,iBAAiB;IACrB,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC;EACjC,CAAC;EAED,KAAK,CAAC,mBAAmB;IACvB,OAAO,CAAC,GAAG,CAAC,sBAAsB,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA,KAAK;IACvD,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/C,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;MACtC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;KACvC;IACD,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;EAC3B,CAAC;EAED;;KAEG;EACH,MAAM;IACJ,OAAO,CAAC,GAAG,CAAC,sBAAsB,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA,KAAK;IACvD,OAAO,CAAC,GAAG,CAAC,sBAAsB,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAA,KAAK;IAClE,OAAO,CAAC,GAAG,CAAC,sBAAsB,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAA,KAAK;IACpE,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,kBAAkB;QAC3B,WAAK,KAAK,EAAC,uBAAuB;UAChC,qBAAe,EAAE,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,GAAI,CAC5D;QAEN,WAAK,KAAK,EAAC,uBAAuB;UAEhC,aAAO,MAAM,EAAC,8CAA8C,EAAC,KAAK,EAAC,cAAc,EAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,GAAG;UAElM,cAAQ,KAAK,EAAC,oDAAoD,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;YACpG,WAAK,KAAK,EAAC,kCAAkC,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI;cACtF,YAAM,CAAC,EAAC,sWAAsW,GAAG,CAC7W;YAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAChC;UAET,WAAK,KAAK,EAAC,MAAM;YACf,WAAK,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC;cACpE,WAAK,KAAK,EAAC,YAAY,EAAC,MAAM,EAAC,KAAK,EAAC,EAAE,EAAC,gBAAgB,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAAE,KAAK,EAAC,KAAK,GAAG,CACvG;YACN,WAAK,KAAK,EAAC,yBAAyB;cAClC,qBAAe,EAAE,EAAC,cAAc,EAAC,SAAS,EAAE,GAAG,EAAE,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,GAAI;cACpG,aAAO,KAAK,EAAC,cAAc,EAAC,EAAE,EAAC,oBAAoB,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,GAAI,CAC7F,CACF,CACF;QAEN;UAAgB,IAAI,CAAC,aAAa,CAAC,WAAW;UAC5C,aAAO,EAAE,EAAC,wBAAwB;YAChC,qBAAe,EAAE,EAAC,kBAAkB,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,WAAW,GAAI,CACtF,CACM;QAEhB;UAAgB,IAAI,CAAC,aAAa,CAAC,IAAI;UACrC,aAAO,EAAE,EAAC,iBAAiB;YACzB,qBAAe,EAAE,EAAC,WAAW,EAAC,KAAK,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAI,CAC9J,CACM;QAEf,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC;UAAgB,IAAI,CAAC,aAAa,CAAC,OAAO;UACrE,aAAO,EAAE,EAAC,oBAAoB;YAC5B,qBAAe,EAAE,EAAC,cAAc,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,iBAAiB,GAAI,CACxE,CACM,CAAC,CAAC,CAAC,IAAI;QAEtB,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC;UAC3B,aAAO,EAAE,EAAC,kBAAkB;YAAE,IAAI,CAAC,aAAa,CAAC,UAAU;YACzD,qBAAe,EAAE,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,WAAW,GAAI,CAChF,CACM,CAAC,CAAC,CAAC,IAAI,CAEnB,CACD,CACR,CAAC;EACJ,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,UAAU,EAAE,CAAA;EACnB,CAAC;EA+CD,4EAA4E;EAC5E,EAAE;EACF,mBAAmB;EACnB,EAAE;EACF,4EAA4E;EAE5E;;KAEG;EAEH,oBAAoB,CAAC,KAAU;IAC7B,QAAQ,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE;MACvB,KAAK,YAAY;QACf,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAC5C,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,MAAM;MACR,KAAK,cAAc;QACjB,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE;UACnC,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;SAC3D;QACD,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAC9C,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAClD,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,MAAM;MACR,KAAK,kBAAkB;QACrB,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAClD,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,MAAM;MACR,KAAK,WAAW;QACd,IAAI,CAAC,WAAW,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAC3C,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,MAAM;MACR,KAAK,cAAc;QACjB,IAAI,CAAC,WAAW,CAAC,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACxD,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,MAAM;MACR,KAAK,YAAY;QACf,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAClD,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,MAAM;KACT;EACH,CAAC;EAED,4EAA4E;EAC5E,EAAE;EACF,UAAU;EACV,EAAE;EACF,4EAA4E;EAE5E,4EAA4E;EAC5E,EAAE;EACF,0BAA0B;EAC1B,EAAE;EACF,4EAA4E;EAE5E,4EAA4E;EAC5E,EAAE;EACF,mBAAmB;EACnB,EAAE;EACF,4EAA4E;EAE5E;;;KAGG;EACO,aAAa;IACrB,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,CAAC;EAClC,CAAC;EAED;;;KAGG;EACO,UAAU;;IAClB,IAAI,IAAI,CAAC,SAAS,KAAI,MAAA,IAAI,CAAC,QAAQ,0CAAE,SAAS,CAAA,EAAE;MAC9C,qBAAqB;MACrB,IAAI,CAAC,SAAS,CAAC,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;MAClE,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;MACtD,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;KACjD;SAAM;MACL,0CAA0C;MAC1C,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;MACnD,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;KAC9C;EACH,CAAC;EAED;;;;;KAKG;EACO,kBAAkB,CAAC,MAAc;IACzC,IAAI,CAAC,gBAAgB,CAAC,SAAS;MAC7B,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,OAAO,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;EACtF,CAAC;EAED;;KAEG;EACO,YAAY;IAEpB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/C,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC;IACtC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EACnC,CAAC;EAED;;;;;;KAMG;EACO,gBAAgB,CACxB,KAAU;IAEV,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;IACjC,IAAI,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE;MACrB,IAAI,IAAI,CAAC,SAAS,EAAE;QAClB,YAAY;QACZ,IAAI,CAAC,SAAS,CAAC,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAEnD,uBAAuB;QACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/C,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QACnC,KAAK,CAAC,oBAAoB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;OAC3C;KACF;EACH,CAAC;EAED;;;;KAIG;EACO,KAAK,CAAC,gBAAgB;IAC9B,MAAM,YAAY,GAAG,MAAM,yBAAyB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9D,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC,CAAC,CAAmC,CAAC;EACzE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/** @license\r\n * Copyright 2022 Esri\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the \"License\");\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n *    http://www.apache.org/licenses/LICENSE-2.0\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an \"AS IS\" BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\n\r\nimport { Component, Element, h, Host, Listen, Prop, State, VNode, Watch } from '@stencil/core';\r\nimport '@esri/calcite-components';\r\nimport state from \"../../utils/solution-store\";\r\nimport SolutionItemDetails_T9n from '../../assets/t9n/solution-item-details/resources.json';\r\nimport { getLocaleComponentStrings } from '../../utils/locale';\r\nimport { IItemGeneralized } from '@esri/solution-common';\r\nimport { IItemTemplateEdit } from '../../utils/interfaces';\r\n\r\n@Component({\r\n  tag: 'solution-item-details',\r\n  styleUrl: 'solution-item-details.scss',\r\n  shadow: false,\r\n})\r\nexport class SolutionItemDetails {\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Host element access\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  @Element() el: HTMLSolutionItemDetailsElement;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * A template's itemId.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) itemId = \"\";\r\n\r\n  @Watch(\"itemId\") itemIdWatchHandler(): void {\r\n    console.log(\"update item details; id \" + this.itemId);//???\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Lifecycle\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * StencilJS: Called once just after the component is first connected to the DOM.\r\n   */\r\n  async componentWillLoad(): Promise<void> {\r\n    return this._getTranslations();\r\n  }\r\n\r\n  async componentWillRender(): Promise<void> {\r\n    console.log(\"update item details \" + this.itemId);//???\r\n    this.itemEdit = state.getItemInfo(this.itemId);\r\n    if (this.itemEdit) {\r\n      this.itemDetails = this.itemEdit.item;\r\n      this.itemType = this.itemDetails.type;\r\n    }\r\n    return Promise.resolve();\r\n  }\r\n\r\n  /**\r\n   * Renders the component.\r\n   */\r\n  render(): VNode {\r\n    console.log(\"render item details \" + this.itemId);//???\r\n    console.log(\"              title \" + this.itemDetails.title);//???\r\n    console.log(\"            snippet \" + this.itemDetails.snippet);//???\r\n    return (\r\n      <Host>\r\n        <div class=\"parent-container\">\r\n          <div class=\"inputBottomSeparation\">\r\n            <calcite-input id=\"item-title\" value={this.itemDetails.title} />\r\n          </div>\r\n\r\n          <div class=\"inputBottomSeparation\">\r\n\r\n            <input accept=\".jpg,.gif,.png,image/jpg,image/gif,image/png\" class=\"display-none\" onChange={(event) => (this._updateThumbnail(event))} ref={(el) => (this.browseForThumbnail = el)} type=\"file\" />\r\n\r\n            <button class=\"font-size--3 btn-link inline-block trailer-quarter\" onClick={() => this._getThumbnail()}>\r\n              <svg class=\"icon-inline icon-inline--on-left\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\">\r\n                <path d=\"M14.792 2.666l-1.414-1.413a.965.965 0 0 0-1.385-.03l-1.444 1.444-8.763 8.72L.03 15.481a.371.371 0 0 0 .488.488l4.096-1.756 8.763-8.72-.001-.001.002.002 1.443-1.444a.965.965 0 0 0-.03-1.385zM1.569 14.431l.554-1.293.74.739zm2.338-.924l-1.414-1.414 7.963-7.92 1.414 1.415zm8.67-8.626l-1.413-1.414 1.29-1.29a.306.306 0 0 1 .433 0l.981.98a.306.306 0 0 1 0 .433z\" />\r\n              </svg>{this._translations.editThumbnail}\r\n            </button>\r\n\r\n            <div class=\"flex\">\r\n              <div class=\"img-container\" ref={(el) => (this.thumbnailContainer = el)}>\r\n                <img class=\"scale-down\" height=\"133\" id=\"item-thumbnail\" ref={(el) => (this.thumbnail = el)} width=\"200\" />\r\n              </div>\r\n              <div class=\"snippet-count-container\">\r\n                <calcite-input id=\"item-snippet\" maxlength={250} type=\"textarea\" value={this.itemDetails.snippet} />\r\n                <label class=\"font-size--3\" id=\"item-snippet-count\" ref={(el) => (this.itemSnippetCount = el)} />\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <calcite-label>{this._translations.description}\r\n            <label id=\"item-description-label\">\r\n              <calcite-input id=\"item-description\" type=\"textarea\" value={this.itemDetails.description} />\r\n            </label>\r\n          </calcite-label>\r\n\r\n          <calcite-label>{this._translations.tags}\r\n            <label id=\"item-tags-label\">\r\n              <calcite-input id=\"item-tags\" value={(this.itemDetails.tags && Array.isArray(this.itemDetails.tags) ? this.itemDetails.tags : [this.itemDetails.tags]).join(\",\")} />\r\n            </label>\r\n          </calcite-label>\r\n\r\n          {this.itemType !== \"Group\" ? <calcite-label>{this._translations.credits}\r\n            <label id=\"item-credits-label\">\r\n              <calcite-input id=\"item-credits\" value={this.itemDetails.accessInformation} />\r\n            </label>\r\n          </calcite-label> : null}\r\n\r\n          {this.itemType !== \"Group\" ? <calcite-label>\r\n            <label id=\"item-terms-label\">{this._translations.termsOfUse}\r\n              <calcite-input id=\"item-terms\" type=\"textarea\" value={this.itemDetails.licenseInfo} />\r\n            </label>\r\n          </calcite-label> : null}\r\n\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    this._loadThumb()\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (protected)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Handle to the element for browsing for a file.\r\n   */\r\n  protected browseForThumbnail: HTMLInputElement;\r\n\r\n  @State() itemDetails: IItemGeneralized = {\r\n    accessInformation: \"\",\r\n    description: \"\",\r\n    licenseInfo: \"\",\r\n    snippet: \"\",\r\n    tags: [],\r\n    title: \"\"\r\n  } as any;\r\n\r\n  @State() protected itemEdit: IItemTemplateEdit;\r\n\r\n  protected itemType: string;\r\n\r\n  /**\r\n   * Contains the translations for this component.\r\n   * All UI strings should be defined here.\r\n   */\r\n  @State() _translations: typeof SolutionItemDetails_T9n;\r\n\r\n  /**\r\n   * Handle to the snippet character-count feedback.\r\n   */\r\n  protected itemSnippetCount: HTMLLabelElement;\r\n\r\n  /**\r\n   * Handle to the thumbnail image display.\r\n   */\r\n  @State() protected thumbnail: HTMLImageElement;\r\n\r\n  /**\r\n   * Handle to the thumbnail image container.\r\n   */\r\n  @State() protected thumbnailContainer: HTMLElement;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Event Listeners\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Updates the component's value with changes to the input fields.\r\n   */\r\n  @Listen(\"calciteInputInput\")\r\n  inputReceivedHandler(event: any): void {\r\n    switch (event.target.id) {\r\n      case \"item-title\":\r\n        this.itemDetails.title = event.target.value;\r\n        this._updateStore();\r\n        break;\r\n      case \"item-snippet\":\r\n        if (event.target.value.length > 250) {\r\n          event.target.value = event.target.value.substring(0, 250);\r\n        }\r\n        this.itemDetails.snippet = event.target.value;\r\n        this._updateLengthLabel(this.itemDetails.snippet);\r\n        this._updateStore();\r\n        break;\r\n      case \"item-description\":\r\n        this.itemDetails.description = event.target.value;\r\n        this._updateStore();\r\n        break;\r\n      case \"item-tags\":\r\n        this.itemDetails.tags = event.target.value;\r\n        this._updateStore();\r\n        break;\r\n      case \"item-credits\":\r\n        this.itemDetails.accessInformation = event.target.value;\r\n        this._updateStore();\r\n        break;\r\n      case \"item-terms\":\r\n        this.itemDetails.licenseInfo = event.target.value;\r\n        this._updateStore();\r\n        break;\r\n    }\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Events\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Public Methods (async)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Private Methods\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Opens image file browse dialog.\r\n   *\r\n   */\r\n  protected _getThumbnail(): void {\r\n    this.browseForThumbnail.click();\r\n  }\r\n\r\n  /**\r\n   * Load the templates thumbnail\r\n   *\r\n   */\r\n  protected _loadThumb(): void {\r\n    if (this.thumbnail && this.itemEdit?.thumbnail) {\r\n      // Show the thumbnail\r\n      this.thumbnail.src = URL.createObjectURL(this.itemEdit.thumbnail);\r\n      this.thumbnailContainer.classList.remove(\"empty-box\");\r\n      this.thumbnail.classList.remove(\"display-none\");\r\n    } else {\r\n      // Replace the thumbnail with an empty box\r\n      this.thumbnailContainer.classList.add(\"empty-box\");\r\n      this.thumbnail.classList.add(\"display-none\");\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Updates the length label to reflect the current number of characters\r\n   * relative to the max number of characters supported.\r\n   *\r\n   * @param phrase the current phrase from the control\r\n   */\r\n  protected _updateLengthLabel(phrase: string): void {\r\n    this.itemSnippetCount.innerText =\r\n      this._translations.snippetCountPattern.replace(\"{{n}}\", phrase.length.toString());\r\n  }\r\n\r\n  /**\r\n   * Add or remove the value from the store\r\n   */\r\n  protected _updateStore(\r\n  ): void {\r\n    this.itemEdit = state.getItemInfo(this.itemId);\r\n    this.itemEdit.item = this.itemDetails;\r\n    state.setItemInfo(this.itemEdit);\r\n  }\r\n\r\n  /**\r\n   * Gets and displays image result from browse and updates the item in the store.\r\n   *\r\n   * @param event The input controls event that contains the new file\r\n   * @param updateStore boolean that controls if the new value is written to the store\r\n   *  should be false on the initial load but true the rest of the time\r\n   */\r\n  protected _updateThumbnail(\r\n    event: any\r\n  ): void {\r\n    const files = event.target.files;\r\n    if (files && files[0]) {\r\n      if (this.thumbnail) {\r\n        // Update UI\r\n        this.thumbnail.src = URL.createObjectURL(files[0]);\r\n\r\n        // Update info in store\r\n        this.itemEdit = state.getItemInfo(this.itemId);\r\n        this.itemEdit.thumbnail = files[0];\r\n        state.replaceItemThumbnail(this.itemEdit);\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Fetches the component's translations\r\n   *\r\n   * @protected\r\n   */\r\n  protected async _getTranslations(): Promise<void> {\r\n    const translations = await getLocaleComponentStrings(this.el);\r\n    this._translations = translations[0] as typeof SolutionItemDetails_T9n;\r\n  }\r\n}\r\n"]}

package/dist/collection/utils/solution-store.js

@@ -59,6 +59,7 @@ class SolutionStore {
    * @returns Item information or `undefined` if not found
    */
   getItemInfo(itemId) {
+    console.log("getItemInfo for " + itemId); //???
     const templates = this._store.get("solutionData").templates;
     let template;
     templates.some((t) => {
@@ -90,6 +91,7 @@ class SolutionStore {
    */
   async loadSolution(solutionItemId, authentication) {
     this._authentication = authentication;
+    console.log("load solution " + solutionItemId); //???
     const solutionData = await getItemDataAsJson(solutionItemId, authentication);
     if (solutionData) {
       const defaultWkid = getProp(solutionData, "params.wkid.default");