@esri/solutions-components 0.2.2 → 0.2.4

package/dist/cjs/{solution-contents_3.cjs.entry.js → solution-contents_7.cjs.entry.js}

@@ -8,9 +8,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a86078a0.js');
-const solutionStore = require('./solution-store-893499a5.js');
+const solutionStore = require('./solution-store-09b3fc53.js');
 const locale = require('./locale-746a095d.js');
-require('./interfaces-ab603e16.js');
+const interfaces = require('./interfaces-ab603e16.js');
 require('./index-d7f9770d.js');
 require('./_commonjsHelpers-6aafa5de.js');
 
@@ -99,7 +99,6 @@ const SolutionItem = class {
     this._translations = undefined;
   }
   itemIdWatchHandler() {
-    console.log("update item; id " + this.itemId); //???
     const itemEdit = solutionStore.state.getItemInfo(this.itemId);
     this.itemType = itemEdit.type;
   }
@@ -118,7 +117,6 @@ const SolutionItem = class {
    * Renders the component.
    */
   render() {
-    console.log("render item " + this.itemId); //???
     return (index.h(index.Host, null, index.h("div", { class: "configuration-container" }, index.h("div", { class: "configuration" }, this._showGroupTabs(this.itemType === "Group"), this._showItemTabs(this.itemType !== "Group")))));
   }
   //--------------------------------------------------------------------------
@@ -173,6 +171,565 @@ const SolutionItem = class {
 };
 SolutionItem.style = solutionItemCss;
 
+const solutionItemDetailsCss = ".inputBottomSeparation{margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:1.5rem}.icon-inline--on-left,.icon-inline--on-right{display:inline;vertical-align:middle;-webkit-margin-end:0.375rem;margin-inline-end:0.375rem;fill:#0079c1}.scale-down{-o-object-fit:scale-down;object-fit:scale-down}.img-container{display:inline;-webkit-margin-end:1rem;margin-inline-end:1rem;max-width:363px}.summary-count-container{display:inline;flex-grow:1;-webkit-margin-start:0.75rem;margin-inline-start:0.75rem}.snippet-count-container{width:calc(100vw - 363px)}.parent-container{max-width:100%;padding:1rem}label{position:relative;margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:1.5rem;display:block;min-width:-moz-min-content;min-width:min-content;box-sizing:border-box;margin-left:0.75rem;margin-right:0.75rem;min-width:0;flex-grow:0;flex-shrink:1}label-group-1-up>.block{flex-basis:calc(100% - 1.5rem);width:calc(100% - 1.5rem)}label-group-2-up>.block{flex-basis:calc(50% - 1.5rem);width:calc(50% - 1.5rem)}label-group-3-up>.block{flex-basis:calc(33.33333% - 1.5rem);width:calc(33.33333% - 1.5rem)}label-group-4-up>.block{flex-basis:calc(25% - 1.5rem);width:calc(25% - 1.5rem)}label-group-5-up>.block{flex-basis:calc(20% - 1.5rem);width:calc(20% - 1.5rem)}label-group-6-up>.block{flex-basis:calc(16.66666% - 1.5rem);width:calc(16.66666% - 1.5rem)}label-group-7-up>.block{flex-basis:calc(14.2857% - 1.5rem);width:calc(14.2857% - 1.5rem)}label-group-8-up>.block{flex-basis:calc(12.5% - 1.5rem);width:calc(12.5% - 1.5rem)}.tablet-block-group-1-up>label{flex-basis:calc(100% - 1.5rem);width:calc(100% - 1.5rem)}.tablet-block-group-2-up>label{flex-basis:calc(50% - 1.5rem);width:calc(50% - 1.5rem)}.tablet-block-group-3-up>label{flex-basis:calc(33.33333% - 1.5rem);width:calc(33.33333% - 1.5rem)}.tablet-block-group-4-up>label{flex-basis:calc(25% - 1.5rem);width:calc(25% - 1.5rem)}.tablet-block-group-5-up>label{flex-basis:calc(20% - 1.5rem);width:calc(20% - 1.5rem)}.tablet-block-group-6-up>label{flex-basis:calc(16.66666% - 1.5rem);width:calc(16.66666% - 1.5rem)}.tablet-block-group-7-up>label{flex-basis:calc(14.2857% - 1.5rem);width:calc(14.2857% - 1.5rem)}.tablet-block-group-8-up>label{flex-basis:calc(12.5% - 1.5rem);width:calc(12.5% - 1.5rem)}.phone-block-group-1-up>label{flex-basis:calc(100% - 1.5rem);width:calc(100% - 1.5rem)}.phone-block-group-2-up>label{flex-basis:calc(50% - 1.5rem);width:calc(50% - 1.5rem)}.phone-block-group-3-up>label{flex-basis:calc(33.33333% - 1.5rem);width:calc(33.33333% - 1.5rem)}.phone-block-group-4-up>label{flex-basis:calc(25% - 1.5rem);width:calc(25% - 1.5rem)}.phone-block-group-5-up>label{flex-basis:calc(20% - 1.5rem);width:calc(20% - 1.5rem)}.phone-block-group-6-up>label{flex-basis:calc(16.66666% - 1.5rem);width:calc(16.66666% - 1.5rem)}.phone-block-group-7-up>label{flex-basis:calc(14.2857% - 1.5rem);width:calc(14.2857% - 1.5rem)}.phone-block-group-8-up>label{flex-basis:calc(12.5% - 1.5rem);width:calc(12.5% - 1.5rem)}.code-face label{letter-spacing:0em;font-family:\"Consolas\", \"Andale Mono\", \"Lucida Console\", \"Monaco\", monospace;font-weight:400;font-style:normal}.code-face label b,.code-face label strong{font-weight:400}.code-italic label{letter-spacing:0em;font-family:\"Consolas\", \"Andale Mono\", \"Lucida Console\", \"Monaco\", monospace;font-weight:400;font-style:italic}.code-italic label b,.code-italic label strong{font-weight:400}";
+
+const SolutionItemDetails = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.itemId = "";
+    this.itemDetails = {
+      accessInformation: "",
+      description: "",
+      licenseInfo: "",
+      snippet: "",
+      tags: [],
+      title: ""
+    };
+    this.itemEdit = undefined;
+    this._translations = undefined;
+    this.thumbnail = undefined;
+    this.thumbnailContainer = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   */
+  async componentWillLoad() {
+    return this._getTranslations();
+  }
+  async componentWillRender() {
+    this.itemEdit = solutionStore.state.getItemInfo(this.itemId);
+    if (this.itemEdit) {
+      this.itemDetails = this.itemEdit.item;
+      this.itemType = this.itemDetails.type;
+    }
+    return Promise.resolve();
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "parent-container" }, index.h("div", { class: "inputBottomSeparation" }, index.h("calcite-input", { id: "item-title", value: this.itemDetails.title })), index.h("div", { class: "inputBottomSeparation" }, index.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" }), index.h("button", { class: "font-size--3 btn-link inline-block trailer-quarter", onClick: () => this._getThumbnail() }, index.h("svg", { class: "icon-inline icon-inline--on-left", height: "16", viewBox: "0 0 16 16", width: "16" }, index.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), index.h("div", { class: "flex" }, index.h("div", { class: "img-container", ref: (el) => (this.thumbnailContainer = el) }, index.h("img", { class: "scale-down", height: "133", id: "item-thumbnail", ref: (el) => (this.thumbnail = el), width: "200" })), index.h("div", { class: "snippet-count-container" }, index.h("calcite-input", { id: "item-snippet", maxlength: 250, type: "textarea", value: this.itemDetails.snippet }), index.h("label", { class: "font-size--3", id: "item-snippet-count", ref: (el) => (this.itemSnippetCount = el) })))), index.h("calcite-label", null, this._translations.description, index.h("label", { id: "item-description-label" }, index.h("calcite-input", { id: "item-description", type: "textarea", value: this.itemDetails.description }))), index.h("calcite-label", null, this._translations.tags, index.h("label", { id: "item-tags-label" }, index.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" ? index.h("calcite-label", null, this._translations.credits, index.h("label", { id: "item-credits-label" }, index.h("calcite-input", { id: "item-credits", value: this.itemDetails.accessInformation }))) : null, this.itemType !== "Group" ? index.h("calcite-label", null, index.h("label", { id: "item-terms-label" }, this._translations.termsOfUse, index.h("calcite-input", { id: "item-terms", type: "textarea", value: this.itemDetails.licenseInfo }))) : null)));
+  }
+  componentDidRender() {
+    this._loadThumb();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Updates the component's value with changes to the input fields.
+   */
+  inputReceivedHandler(event) {
+    switch (event.target.id) {
+      case "item-title":
+        this.itemDetails.title = event.target.value;
+        this._updateStore();
+        break;
+      case "item-snippet":
+        if (event.target.value.length > 250) {
+          event.target.value = event.target.value.substring(0, 250);
+        }
+        this.itemDetails.snippet = event.target.value;
+        this._updateLengthLabel(this.itemDetails.snippet);
+        this._updateStore();
+        break;
+      case "item-description":
+        this.itemDetails.description = event.target.value;
+        this._updateStore();
+        break;
+      case "item-tags":
+        this.itemDetails.tags = event.target.value;
+        this._updateStore();
+        break;
+      case "item-credits":
+        this.itemDetails.accessInformation = event.target.value;
+        this._updateStore();
+        break;
+      case "item-terms":
+        this.itemDetails.licenseInfo = event.target.value;
+        this._updateStore();
+        break;
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Events
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods (async)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Opens image file browse dialog.
+   *
+   */
+  _getThumbnail() {
+    this.browseForThumbnail.click();
+  }
+  /**
+   * Load the templates thumbnail
+   *
+   */
+  _loadThumb() {
+    var _a;
+    if (this.thumbnail && ((_a = this.itemEdit) === null || _a === void 0 ? void 0 : _a.thumbnail)) {
+      // Show the thumbnail
+      this.thumbnail.src = URL.createObjectURL(this.itemEdit.thumbnail);
+      this.thumbnailContainer.classList.remove("empty-box");
+      this.thumbnail.classList.remove("display-none");
+    }
+    else {
+      // Replace the thumbnail with an empty box
+      this.thumbnailContainer.classList.add("empty-box");
+      this.thumbnail.classList.add("display-none");
+    }
+  }
+  /**
+   * Updates the length label to reflect the current number of characters
+   * relative to the max number of characters supported.
+   *
+   * @param phrase the current phrase from the control
+   */
+  _updateLengthLabel(phrase) {
+    this.itemSnippetCount.innerText =
+      this._translations.snippetCountPattern.replace("{{n}}", phrase.length.toString());
+  }
+  /**
+   * Add or remove the value from the store
+   */
+  _updateStore() {
+    this.itemEdit = solutionStore.state.getItemInfo(this.itemId);
+    this.itemEdit.item = this.itemDetails;
+    solutionStore.state.setItemInfo(this.itemEdit);
+  }
+  /**
+   * Gets and displays image result from browse and updates the item in the store.
+   *
+   * @param event The input controls event that contains the new file
+   * @param updateStore boolean that controls if the new value is written to the store
+   *  should be false on the initial load but true the rest of the time
+   */
+  _updateThumbnail(event) {
+    const files = event.target.files;
+    if (files && files[0]) {
+      if (this.thumbnail) {
+        // Update UI
+        this.thumbnail.src = URL.createObjectURL(files[0]);
+        // Update info in store
+        this.itemEdit = solutionStore.state.getItemInfo(this.itemId);
+        this.itemEdit.thumbnail = files[0];
+        solutionStore.state.replaceItemThumbnail(this.itemEdit);
+      }
+    }
+  }
+  /**
+   * Fetches the component's translations
+   *
+   * @protected
+   */
+  async _getTranslations() {
+    const translations = await locale.getLocaleComponentStrings(this.el);
+    this._translations = translations[0];
+  }
+  get el() { return index.getElement(this); }
+};
+SolutionItemDetails.style = solutionItemDetailsCss;
+
+const solutionItemSharingCss = ":host{display:block;box-sizing:border-box;margin-left:0.75rem;margin-right:0.75rem;min-width:0;flex-grow:0;flex-shrink:1}:host-group-1-up>.block{flex-basis:calc(100% - 1.5rem);width:calc(100% - 1.5rem)}:host-group-2-up>.block{flex-basis:calc(50% - 1.5rem);width:calc(50% - 1.5rem)}:host-group-3-up>.block{flex-basis:calc(33.33333% - 1.5rem);width:calc(33.33333% - 1.5rem)}:host-group-4-up>.block{flex-basis:calc(25% - 1.5rem);width:calc(25% - 1.5rem)}:host-group-5-up>.block{flex-basis:calc(20% - 1.5rem);width:calc(20% - 1.5rem)}:host-group-6-up>.block{flex-basis:calc(16.66666% - 1.5rem);width:calc(16.66666% - 1.5rem)}:host-group-7-up>.block{flex-basis:calc(14.2857% - 1.5rem);width:calc(14.2857% - 1.5rem)}:host-group-8-up>.block{flex-basis:calc(12.5% - 1.5rem);width:calc(12.5% - 1.5rem)}.tablet-block-group-1-up>:host{flex-basis:calc(100% - 1.5rem);width:calc(100% - 1.5rem)}.tablet-block-group-2-up>:host{flex-basis:calc(50% - 1.5rem);width:calc(50% - 1.5rem)}.tablet-block-group-3-up>:host{flex-basis:calc(33.33333% - 1.5rem);width:calc(33.33333% - 1.5rem)}.tablet-block-group-4-up>:host{flex-basis:calc(25% - 1.5rem);width:calc(25% - 1.5rem)}.tablet-block-group-5-up>:host{flex-basis:calc(20% - 1.5rem);width:calc(20% - 1.5rem)}.tablet-block-group-6-up>:host{flex-basis:calc(16.66666% - 1.5rem);width:calc(16.66666% - 1.5rem)}.tablet-block-group-7-up>:host{flex-basis:calc(14.2857% - 1.5rem);width:calc(14.2857% - 1.5rem)}.tablet-block-group-8-up>:host{flex-basis:calc(12.5% - 1.5rem);width:calc(12.5% - 1.5rem)}.phone-block-group-1-up>:host{flex-basis:calc(100% - 1.5rem);width:calc(100% - 1.5rem)}.phone-block-group-2-up>:host{flex-basis:calc(50% - 1.5rem);width:calc(50% - 1.5rem)}.phone-block-group-3-up>:host{flex-basis:calc(33.33333% - 1.5rem);width:calc(33.33333% - 1.5rem)}.phone-block-group-4-up>:host{flex-basis:calc(25% - 1.5rem);width:calc(25% - 1.5rem)}.phone-block-group-5-up>:host{flex-basis:calc(20% - 1.5rem);width:calc(20% - 1.5rem)}.phone-block-group-6-up>:host{flex-basis:calc(16.66666% - 1.5rem);width:calc(16.66666% - 1.5rem)}.phone-block-group-7-up>:host{flex-basis:calc(14.2857% - 1.5rem);width:calc(14.2857% - 1.5rem)}.phone-block-group-8-up>:host{flex-basis:calc(12.5% - 1.5rem);width:calc(12.5% - 1.5rem)}.code-face :host{letter-spacing:0em;font-family:\"Consolas\", \"Andale Mono\", \"Lucida Console\", \"Monaco\", monospace;font-weight:400;font-style:normal}.code-face :host b,.code-face :host strong{font-weight:400}.code-italic :host{letter-spacing:0em;font-family:\"Consolas\", \"Andale Mono\", \"Lucida Console\", \"Monaco\", monospace;font-weight:400;font-style:italic}.code-italic :host b,.code-italic :host strong{font-weight:400}.container-border{padding:1rem}.icon-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
+
+const SolutionItemSharing = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.groupId = "";
+    this._translations = undefined;
+    this.sharing = [];
+  }
+  itemIdWatchHandler() {
+    const itemEdit = solutionStore.state.getItemInfo(this.groupId);
+    this.sharing = itemEdit.groupDetails;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   */
+  async componentWillLoad() {
+    return this._getTranslations();
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "container-border" }, index.h("calcite-label", null, this._translations.groupInfo), this._renderItems(this.sharing))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods (async)
+  //
+  //--------------------------------------------------------------------------
+  async getShareInfo() {
+    return this.sharing;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Render share options based on the list of share details
+   *
+   * @param objs list of IItemShare objects that are used to expose and store share info for the solutions items
+   */
+  _renderItems(objs) {
+    return objs && objs.length > 0
+      ? objs.map(item => {
+        return (index.h("calcite-label", { layout: "inline" }, index.h("calcite-switch", { id: item.id, name: "setting", onCalciteSwitchChange: (event) => this._updateItem(event), scale: "m", switched: item.shareItem, value: "enabled" }), index.h("solution-item-icon", { type: item.type, typeKeywords: item.typeKeywords }), index.h("span", { class: "icon-text", title: item.title }, item.title)));
+      })
+      : null;
+  }
+  /**
+   * Update the items share prop based on the switch state
+   *
+   * @param event onCalciteSwitchChange event
+   */
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  _updateItem(event) {
+    const id = event.target.id;
+    this.sharing = this.sharing.map((itemShare) => {
+      if (itemShare.id === id) {
+        // update the item
+        itemShare.shareItem = event.detail.switched;
+        // update the item in the store
+        const itemEdit = solutionStore.state.getItemInfo(id);
+        if (itemShare.shareItem) {
+          // Add the group to the item if it's not already there
+          if (!itemEdit.groups) {
+            itemEdit.groups = [this.groupId];
+          }
+          else if (itemEdit.groups.indexOf(this.groupId) < 0) {
+            itemEdit.groups.push(this.groupId);
+          }
+        }
+        else {
+          // Remove the group from the item if it's there
+          if (itemEdit.groups) {
+            const i = itemEdit.groups.indexOf(this.groupId);
+            if (i > -1) {
+              itemEdit.groups.splice(i, 1);
+            }
+          }
+        }
+        solutionStore.state.setItemInfo(itemEdit);
+      }
+      return itemShare;
+    });
+  }
+  /**
+   * Fetches the component's translations
+   *
+   * @protected
+   */
+  async _getTranslations() {
+    const translations = await locale.getLocaleComponentStrings(this.el);
+    this._translations = translations[0];
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "groupId": ["itemIdWatchHandler"]
+  }; }
+};
+SolutionItemSharing.style = solutionItemSharingCss;
+
+const solutionResourceItemCss = ":host{display:block;box-sizing:border-box;margin-left:0.75rem;margin-right:0.75rem;min-width:0;flex-grow:0;flex-shrink:1}:host-group-1-up>.block{flex-basis:calc(100% - 1.5rem);width:calc(100% - 1.5rem)}:host-group-2-up>.block{flex-basis:calc(50% - 1.5rem);width:calc(50% - 1.5rem)}:host-group-3-up>.block{flex-basis:calc(33.33333% - 1.5rem);width:calc(33.33333% - 1.5rem)}:host-group-4-up>.block{flex-basis:calc(25% - 1.5rem);width:calc(25% - 1.5rem)}:host-group-5-up>.block{flex-basis:calc(20% - 1.5rem);width:calc(20% - 1.5rem)}:host-group-6-up>.block{flex-basis:calc(16.66666% - 1.5rem);width:calc(16.66666% - 1.5rem)}:host-group-7-up>.block{flex-basis:calc(14.2857% - 1.5rem);width:calc(14.2857% - 1.5rem)}:host-group-8-up>.block{flex-basis:calc(12.5% - 1.5rem);width:calc(12.5% - 1.5rem)}.tablet-block-group-1-up>:host{flex-basis:calc(100% - 1.5rem);width:calc(100% - 1.5rem)}.tablet-block-group-2-up>:host{flex-basis:calc(50% - 1.5rem);width:calc(50% - 1.5rem)}.tablet-block-group-3-up>:host{flex-basis:calc(33.33333% - 1.5rem);width:calc(33.33333% - 1.5rem)}.tablet-block-group-4-up>:host{flex-basis:calc(25% - 1.5rem);width:calc(25% - 1.5rem)}.tablet-block-group-5-up>:host{flex-basis:calc(20% - 1.5rem);width:calc(20% - 1.5rem)}.tablet-block-group-6-up>:host{flex-basis:calc(16.66666% - 1.5rem);width:calc(16.66666% - 1.5rem)}.tablet-block-group-7-up>:host{flex-basis:calc(14.2857% - 1.5rem);width:calc(14.2857% - 1.5rem)}.tablet-block-group-8-up>:host{flex-basis:calc(12.5% - 1.5rem);width:calc(12.5% - 1.5rem)}.phone-block-group-1-up>:host{flex-basis:calc(100% - 1.5rem);width:calc(100% - 1.5rem)}.phone-block-group-2-up>:host{flex-basis:calc(50% - 1.5rem);width:calc(50% - 1.5rem)}.phone-block-group-3-up>:host{flex-basis:calc(33.33333% - 1.5rem);width:calc(33.33333% - 1.5rem)}.phone-block-group-4-up>:host{flex-basis:calc(25% - 1.5rem);width:calc(25% - 1.5rem)}.phone-block-group-5-up>:host{flex-basis:calc(20% - 1.5rem);width:calc(20% - 1.5rem)}.phone-block-group-6-up>:host{flex-basis:calc(16.66666% - 1.5rem);width:calc(16.66666% - 1.5rem)}.phone-block-group-7-up>:host{flex-basis:calc(14.2857% - 1.5rem);width:calc(14.2857% - 1.5rem)}.phone-block-group-8-up>:host{flex-basis:calc(12.5% - 1.5rem);width:calc(12.5% - 1.5rem)}.code-face :host{letter-spacing:0em;font-family:\"Consolas\", \"Andale Mono\", \"Lucida Console\", \"Monaco\", monospace;font-weight:400;font-style:normal}.code-face :host b,.code-face :host strong{font-weight:400}.code-italic :host{letter-spacing:0em;font-family:\"Consolas\", \"Andale Mono\", \"Lucida Console\", \"Monaco\", monospace;font-weight:400;font-style:italic}.code-italic :host b,.code-italic :host strong{font-weight:400}.resource-item{padding:1rem}.resource-button{-webkit-margin-end:1rem;margin-inline-end:1rem}.resource-progress{padding-top:1rem}.resources-container{border:1px #808080 solid}.margin-bottom-1{margin-bottom:1rem}";
+
+const SolutionResourceItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this._removedResources = {};
+    this.authentication = undefined;
+    this.itemId = "";
+    this.resourceFilePaths = [];
+    this.resources = [];
+    this._translations = undefined;
+  }
+  itemIdWatchHandler() {
+    const item = solutionStore.state.getItemInfo(this.itemId);
+    this.resourceFilePaths = item.resourceFilePaths;
+    this.resources = item.resources.map(
+    // False linting error
+    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+    (path) => path.substring(path.lastIndexOf("/") + 1));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   */
+  componentWillLoad() {
+    return this._getTranslations();
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    const hasValidResources = this._hasValidResources();
+    return (index.h(index.Host, null, index.h("div", { class: "resource-item" }, index.h("div", { class: "margin-bottom-1" }, index.h("calcite-button", { appearance: "solid", class: "resource-button", color: "blue", onClick: () => this._addNewResource() }, this._translations.addResource), index.h("calcite-button", { appearance: "solid", color: "blue", disabled: !hasValidResources, onClick: () => this._downloadAll() }, this._translations.downloadAll)), index.h("div", { class: "resources-container", style: { display: hasValidResources ? "inherit" : "none" } }, this._renderResourceList()))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods (async)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Render resources while avoiding thumbnail resoures that are managed by solution-item
+   *
+   */
+  _renderResourceList() {
+    return (index.h("calcite-value-list", { multiple: true }, this.resourceFilePaths.reduce((prev, cur) => {
+      if (cur.type !== solutionStore.EFileType.Thumbnail) {
+        prev.push(this._renderResource(cur));
+      }
+      return prev;
+    }, [])));
+  }
+  /**
+   * Render the resource and supporting actions for download/update/delete/(reset..if deleted)
+   *
+   * @param resource the filename and url used to interact with the resource
+   */
+  _renderResource(resource) {
+    const resettable = resource.updateType === interfaces.EUpdateType.Remove;
+    const fullname = resource.folder ? resource.folder + "/" + resource.filename : resource.filename;
+    return (index.h("calcite-value-list-item", { class: resettable ? "disabled" : "", label: fullname, nonInteractive: true, value: resource.url }, index.h("calcite-action-group", { "expand-disabled": "true", layout: "horizontal", slot: "actions-end" }, index.h("calcite-action", { disabled: resettable, icon: "download", label: this._translations.download, onClick: () => this._download(resource.url, resource.filename), scale: "m", text: this._translations.download, title: this._translations.download }), index.h("calcite-action", { disabled: resettable, icon: "upload-to", label: this._translations.update, onClick: () => this._upload(resource), scale: "m", text: this._translations.update, title: this._translations.update }), index.h("calcite-action", { disabled: resettable, icon: "trash", label: this._translations.delete, onClick: () => this._delete(resource), scale: "m", text: this._translations.delete, title: this._translations.delete }), resettable ? index.h("calcite-action", { icon: "reset", label: this._translations.reset, onClick: () => this._reset(resource.filename), scale: "m", text: this._translations.reset, title: this._translations.reset }) : index.h("div", { class: "display-none" }))));
+  }
+  /**
+   * Adds the name to the deleted array so it will be skipped while rendering
+   *  but still exist if the user chooses to reset
+   *
+   * @param resource the resource to be updated
+   */
+  _delete(resource) {
+    resource.updateType = interfaces.EUpdateType.Remove;
+    this.resourceFilePaths = [...this.resourceFilePaths]; // to trigger refresh
+    this._updateStore();
+  }
+  /**
+   * Remove the name from the deleted array so it will again be rendered
+   *
+   * @param name the name to be added to the deleted array
+   */
+  _reset(name) {
+    // need to make sure I know if this reset is from the source or a new one
+    // Because the item's `resources` array is not updated until (and if) the solution is saved,
+    // we can use it for the reset info
+    this.resources.some(resourceName => resourceName === name) ?
+      // Undo removing an existing resource
+      this.resourceFilePaths = this.resourceFilePaths.map(p => {
+        if (p.filename === name) {
+          p.updateType = interfaces.EUpdateType.None;
+        }
+        return p;
+      }) :
+      // Undo cancelling the adding of a resource
+      this.resourceFilePaths = this.resourceFilePaths.map(p => {
+        if (p.filename === name) {
+          p.updateType = interfaces.EUpdateType.Add;
+        }
+        return p;
+      });
+    this._updateStore();
+  }
+  /**
+   * Download all of the templates resources
+   *
+   */
+  _downloadAll() {
+    this.resourceFilePaths.forEach((resource) => {
+      this._download(resource.url, resource.filename);
+    });
+  }
+  /**
+   * Download the current resource
+   *
+   * @param url the resource url
+   * @param name the resource name
+   */
+  _download(url, name) {
+    // files that have been added manually do not need to be requested from the item
+    if (url.startsWith("blob")) {
+      this.downloadFile(url, name);
+    }
+    else {
+      const _url = `${url}?token=${this.authentication.token}`;
+      void this.fetchAndDownload(_url, name);
+    }
+  }
+  /**
+   * Dynamically creates an anchor and downloads the file
+   *
+   * @param url the url of the resource
+   * @param name the name of the resource
+   */
+  downloadFile(url, name) {
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = name;
+    link.target = "_blank";
+    link.click();
+  }
+  /**
+   * Check if the template resources have any non-thumbnail resources
+   *
+   * @returns true if we have data resources and false if only thumbnail
+   */
+  _hasValidResources() {
+    return this.resourceFilePaths.some(r => r.url.indexOf("_info_thumbnail") < 0);
+  }
+  /**
+   * Fetches and downloads the resource from the solution
+   *
+   * @param url the url of the resource
+   * @param name the name of the resource
+   */
+  async fetchAndDownload(url, name) {
+    const image = await fetch(url);
+    const b = await image.blob();
+    const bURL = URL.createObjectURL(b);
+    this.downloadFile(bURL, name);
+  }
+  /**
+   * Create an input element to support the uploading of the resource and upload the resource
+   *
+   * @param resource the resource to be updated
+   */
+  _upload(resource) {
+    const _input = document.createElement("input");
+    _input.classList.add("display-none");
+    _input.onchange = this._updateResource.bind(this, resource);
+    _input.type = "file";
+    _input.click();
+  }
+  /**
+   * Create an input element to support the uploading of a resource and add the new resource
+   *
+   */
+  _addNewResource() {
+    const _input = document.createElement("input");
+    _input.classList.add("display-none");
+    _input.onchange = this._add.bind(this);
+    _input.type = "file";
+    _input.click();
+  }
+  /**
+   * Replace the resource file path when update action is used
+   *
+   * @param resourcePath the resource to be updated
+   * @param event the input event that contains the file
+   */
+  _updateResource(resourcePath, event) {
+    const files = event.target.files;
+    if (files && files[0]) {
+      resourcePath.blob = files[0];
+      resourcePath.updateType = interfaces.EUpdateType.Update;
+      this._updateStore();
+    }
+  }
+  /**
+   * Add the new resource to the resource file paths
+   *
+   * @param event the inputs event that contains the new file
+   */
+  _add(event) {
+    const files = event.target.files;
+    if (files && files[0]) {
+      const url = URL.createObjectURL(files[0]);
+      const filename = files[0].name;
+      // Add the item if it's not already in the resource file paths list
+      if (!this.resourceFilePaths.some(r => r.filename === filename && r.url === url)) {
+        this.resourceFilePaths = [
+          ...this.resourceFilePaths,
+          {
+            url,
+            type: solutionStore.EFileType.Data,
+            folder: undefined,
+            filename,
+            blob: files[0],
+            updateType: interfaces.EUpdateType.Add
+          }
+        ];
+        this._updateStore();
+      }
+    }
+  }
+  /**
+   * Add or remove the value from the store
+   */
+  _updateStore() {
+    const item = solutionStore.state.getItemInfo(this.itemId);
+    item.resourceFilePaths = this.resourceFilePaths;
+    solutionStore.state.setItemInfo(item);
+  }
+  /**
+   * Fetches the component's translations
+   *
+   * @protected
+   */
+  async _getTranslations() {
+    const translations = await locale.getLocaleComponentStrings(this.el);
+    this._translations = translations[0];
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "itemId": ["itemIdWatchHandler"]
+  }; }
+};
+SolutionResourceItem.style = solutionResourceItemCss;
+
 /** @license
  * Copyright 2022 Esri
  *
@@ -21533,8 +22090,110 @@ const SolutionSpatialRef = class {
 };
 SolutionSpatialRef.style = solutionSpatialRefCss;
 
+const solutionTemplateDataCss = ":host{display:flexbox}.solution-data-container{position:absolute;height:-moz-available;height:calc(100% - 48px);height:-webkit-fill-available;height:stretch;width:-moz-available;width:100%;width:-webkit-fill-available;width:stretch}.solution-data-child-container{display:flex;height:100%;width:100%;flex-direction:column;overflow-y:auto}.solution-data-editor-container{height:100%}.solution-data-child-container-collapsed{display:flex;height:100%;flex-direction:column;overflow:auto;width:50px}.inputBottomSeparation{margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:1.5rem}.json-editor{margin:1rem;width:auto;width:-webkit-fill-available -moz-available}.collapse-btn{padding-left:1rem;padding-right:1rem;padding-top:1rem;padding-bottom:0px}.org-vars{padding-left:1rem;padding-right:1rem;padding-top:1rem;padding-bottom:0px}.sol-vars{padding-top:0px;padding-bottom:0px;padding-left:1rem;padding-right:1rem;min-height:45%}.padding-1{padding:1rem}.light{background-color:#F4F4F4}";
+
+const SolutionTemplateData = class {
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this._initializing = false;
+    this.instanceid = "";
+    this.itemId = "";
+    this.organizationVariables = "";
+    this.solutionVariables = "";
+    this.varsOpen = true;
+    this._translations = undefined;
+    this.value = "";
+    window.addEventListener("solutionEditorContentChanged", (evt) => {
+      if (this.itemId) {
+        const { id, contents } = evt.detail;
+        const [itemId, instanceId] = id.split("|");
+        if (itemId == this.itemId && instanceId === this.instanceid) {
+          if (!this._initializing && contents.length > 0) {
+            const itemEdit = solutionStore.state.getItemInfo(itemId);
+            if (instanceId === "data") {
+              itemEdit.data = JSON.parse(contents);
+            }
+            else {
+              itemEdit.properties = JSON.parse(contents);
+            }
+            solutionStore.state.setItemInfo(itemEdit);
+          }
+          this._initializing = false;
+        }
+      }
+    });
+  }
+  itemIdWatchHandler() {
+    this._initializing = true;
+    this.value = JSON.stringify(this.instanceid === "data"
+      ? solutionStore.state.getItemInfo(this.itemId).data
+      : solutionStore.state.getItemInfo(this.itemId).properties, null, 2);
+  }
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   */
+  componentWillLoad() {
+    return this._getTranslations();
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "solution-data-container" }, index.h("calcite-shell", { class: "light var-container", dir: "ltr" }, index.h("calcite-panel", { class: "json-editor" }, index.h("div", { class: "solution-data-child-container calcite-match-height" }, index.h("json-editor", { class: "solution-data-editor-container", instanceid: this.itemId + "|" + this.instanceid, value: this.value }))), index.h("calcite-shell-panel", { "height-scale": "l", position: "end", slot: "contextual-panel", "width-scale": "xs" }, index.h("div", { class: this.varsOpen ? "solution-data-child-container" : "solution-data-child-container-collapsed" }, index.h("calcite-button", { appearance: "transparent", class: "collapse-btn", "icon-start": this.varsOpen ? "chevrons-right" : "chevrons-left", id: "collapse-vars", onClick: () => this._toggleVars(), scale: "s", title: this.varsOpen ? this._translations.collapse : this._translations.expand }), index.h("div", { class: this.varsOpen ? "org-vars" : "org-vars display-none", id: "orgVars" }, index.h("solution-organization-variables", { value: this.organizationVariables })), index.h("div", { class: this.varsOpen ? "sol-vars" : "sol-vars display-none", id: "solVars" }, index.h("solution-variables", { value: this.solutionVariables }))))))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods (async)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Toggle varsOpen prop to show/hide variable containers
+   */
+  _toggleVars() {
+    this.varsOpen = !this.varsOpen;
+  }
+  /**
+   * Fetches the component's translations
+   *
+   * @protected
+   */
+  async _getTranslations() {
+    const translations = await locale.getLocaleComponentStrings(this.el);
+    this._translations = translations[0];
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "itemId": ["itemIdWatchHandler"]
+  }; }
+};
+SolutionTemplateData.style = solutionTemplateDataCss;
+
 exports.solution_contents = SolutionContents;
 exports.solution_item = SolutionItem;
+exports.solution_item_details = SolutionItemDetails;
+exports.solution_item_sharing = SolutionItemSharing;
+exports.solution_resource_item = SolutionResourceItem;
 exports.solution_spatial_ref = SolutionSpatialRef;
+exports.solution_template_data = SolutionTemplateData;
 
-//# sourceMappingURL=solution-contents_3.cjs.entry.js.map
+//# sourceMappingURL=solution-contents_7.cjs.entry.js.map