@esri/solutions-components 0.8.6-6.3 → 0.8.6

package/dist/components/solution-configuration.js

@@ -4,7 +4,6 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { g as getSolutionVariables, a as getOrganizationVariables, b as getInventoryItems } from './templates.js';
 import { s as state } from './solution-store.js';
 import './solution-resource.js';
 import { r as request, N as NODEJS_DEFAULT_REFERER_HEADER, c as cleanUrl, e as encodeQueryString, A as ArcGISAuthError, a as getProp } from './restHelpersGet.js';
@@ -1132,8 +1131,349 @@ var UserSession = /** @class */ (function () {
     return UserSession;
 }());
 
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//--------------------------------------------------------------------------
+//
+//  Public Functions
+//
+//--------------------------------------------------------------------------
+/**
+ * Sort the solution items
+ *
+ * @param templates a list of item templates from the solution
+ *
+ * @returns a sorted list of solution items
+ */
+function getInventoryItems(templates) {
+    const hierarchy = getItemHierarchy(templates);
+    const ids = hierarchy.reduce((prev, cur) => {
+        prev.push(cur.id);
+        return prev;
+    }, []);
+    return templates.reduce((prev, cur) => {
+        if (ids.indexOf(cur.itemId) > -1) {
+            const hierarchyItems = hierarchy.filter(hi => hi.id === cur.itemId);
+            prev.push(_getItemFromTemplate(cur, templates, hierarchyItems[0].dependencies));
+        }
+        return prev;
+    }, []);
+}
+/**
+ * Create item hierarchy that will avoid issues from cylical dependencies
+ *
+ * @param templates a list of item templates from the solution
+ *
+ * @returns a hierarchy for item and item dependency display
+ */
+function getItemHierarchy(templates) {
+    const hierarchy = [];
+    // Get the template specified by id out of a list of templates
+    function getTemplateInSolution(templates, id) {
+        const iTemplate = templates.findIndex((template) => id === template.itemId);
+        return iTemplate >= 0 ? templates[iTemplate] : null;
+    }
+    // Hierarchically list the dependencies of specified node
+    function traceItemId(id, accumulatedHierarchy, alreadyVisitedIds = []) {
+        // Get the dependencies of the node
+        const template = getTemplateInSolution(templates, id);
+        /* istanbul ignore else */
+        if (template) {
+            const templateEntry = {
+                id,
+                dependencies: []
+            };
+            // Visit each dependency, but only if this template is not in the alreadyVisitedIds list to avoid infinite loops
+            /* istanbul ignore else */
+            if (alreadyVisitedIds.indexOf(id) < 0) {
+                // Add dependency to alreadyVisitedIds list
+                alreadyVisitedIds.push(id);
+                template.dependencies.forEach((dependencyId) => {
+                    // Remove dependency from list of templates to visit in the top-level loop
+                    const iDependencyTemplate = templateItemIds.indexOf(dependencyId);
+                    /* istanbul ignore else */
+                    if (iDependencyTemplate >= 0) {
+                        templateItemIds.splice(iDependencyTemplate, 1);
+                    }
+                    traceItemId(dependencyId, templateEntry.dependencies, alreadyVisitedIds);
+                });
+            }
+            accumulatedHierarchy.push(templateEntry);
+        }
+    }
+    // Start with top-level nodes and add in the rest of the nodes to catch cycles without top-level nodes
+    let templateItemIds = _getTopLevelItemIds(templates);
+    const otherItems = templates
+        .filter((template) => templateItemIds.indexOf(template.itemId) < 0) // only keep non-top-level nodes
+        .sort((a, b) => b.dependencies.length - a.dependencies.length); // sort so that nodes with more dependencies come first--reduces stubs
+    templateItemIds = templateItemIds.concat(otherItems.map((template) => template.itemId));
+    // Step through the list of nodes; we'll also remove nodes as we visit them
+    let itemId = templateItemIds.shift();
+    while (typeof itemId !== "undefined") {
+        traceItemId(itemId, hierarchy);
+        itemId = templateItemIds.shift();
+    }
+    return hierarchy;
+}
+/**
+ * Explore the solution item templates for variables we will allow users to insert at runtime
+ *
+ * @param templates a list of item templates from the solution
+ * @param translations nls translation object
+ *
+ * @returns a list of variables from the solution item templates
+ */
+function getSolutionVariables(templates, translations) {
+    const vars = [];
+    templates.forEach(t => {
+        const item = {
+            id: t.itemId,
+            title: t.item.title || t.item.name,
+            type: t.type,
+            value: undefined,
+            dependencies: [{
+                    id: t.itemId,
+                    title: translations.itemId,
+                    value: `{{${t.itemId}.itemId}}`,
+                }]
+        };
+        if (t.item.url) {
+            item.dependencies.push({
+                id: t.itemId,
+                title: translations.url,
+                value: `{{${t.itemId}.url}}`,
+            });
+        }
+        if (t.type === "Feature Service") {
+            // TODO need to set source service name var...
+            // TODO need to set soure service shape field name "{{d05b3cf1ffcb4a4fa677627dfb18609e.name}}.Shape"
+            item.dependencies.push({
+                id: t.itemId,
+                title: translations.solutionExtent,
+                value: `{{${t.itemId}.solutionExtent}}`,
+            });
+            _addLayersOrTables(t.properties.layers || [], item, t, translations);
+            _addLayersOrTables(t.properties.tables || [], item, t, translations);
+        }
+        vars.push(item);
+    });
+    return vars;
+}
+/**
+ * Set key organization variables we will allow users to insert at runtime
+ *
+ * @param translations nls translation object
+ *
+ * @returns a list of variables for the organization
+ */
+function getOrganizationVariables(translations) {
+    const orgVars = [{
+            id: "",
+            title: translations.geocodeUrl,
+            value: "{{organization.helperServices.geocode:getDefaultLocatorURL}}"
+        }, {
+            id: "",
+            title: translations.geometryUrl,
+            value: "{{organization.helperServices.geometry.url}}"
+        }, {
+            id: "",
+            title: translations.portalBaseUrl,
+            value: "{{portalBaseUrl}}"
+        }, {
+            id: "",
+            title: translations.routeUrl,
+            value: "{{organization.helperServices.route.url}}"
+        }, {
+            id: "",
+            title: translations.solutionItemExtent,
+            value: "{{solutionItemExtent}}"
+        }];
+    return orgVars;
+}
+//--------------------------------------------------------------------------
+//
+//  Private Functions
+//
+//--------------------------------------------------------------------------
+/**
+ * Explore a solution item template for variables we will allow users to insert at runtime.
+ * This function will update the item argument that is passed in with the var details.
+ *
+ * @param children a list of layers or tables from a template
+ * @param item an object that store key details for a given variable
+ * @param template one of the templates from the current solution
+ * @param translations nls translations object
+ *
+ */
+function _addLayersOrTables(children, item, template, translations) {
+    children.forEach(l => {
+        const name = l.name && l.name.indexOf("||") > -1 ? l.name.split("||")[1].replace("}}", "").trim() : l.name;
+        item.dependencies.push({
+            id: template.itemId,
+            title: `${name} (${translations.id})`,
+            value: `{{${template.itemId}.layer${l.id}.id}}`,
+        });
+        item.dependencies.push({
+            id: template.itemId,
+            title: `${name} (${translations.name})`,
+            value: `{{${template.itemId}.layer${l.id}.name||${name}}}`,
+        });
+    });
+}
+/**
+ * Capture key details from the solution item template
+ *
+ * @param template one of the templates from the current solution
+ * @param templates full list of templates
+ * @param dependencies list of hierarchical dependencies
+ *
+ * @returns an IInventoryItem that is used by other components to work with this template
+ */
+function _getItemFromTemplate(template, templates, dependencies) {
+    return {
+        id: template.itemId || "",
+        title: template.item.title || "",
+        dependencies: _getDependencies(dependencies, templates),
+        type: template.item.type || "",
+        typeKeywords: template.item.typeKeywords || [] /*,
+        solutionItem: {
+          itemId: template.itemId,
+          itemDetails: _getItemDetails(template.item, template.type === "Group"),
+          isResource: _getIsResource(template),
+          data: template.data,
+          properties: template.properties,
+          type: template.type,
+          groupDetails: _getGroupDetails(template, templates)
+        }*/
+    };
+}
+/**
+ * Capture key details from the solution item template
+ *
+ * @param dependencies list of dependencies from a template
+ * @param templates full list of templates
+ *
+ * @returns a list of IInventoryItem that are used by other components to work with the templates
+ */
+function _getDependencies(dependencies, templates) {
+    const dependencyItems = [];
+    const depIds = dependencies.reduce((prev, cur) => {
+        prev.push(cur.id);
+        dependencyItems.push(cur);
+        return prev;
+    }, []);
+    return templates.reduce((prev, curr) => {
+        const i = depIds.indexOf(curr.itemId);
+        if (i > -1) {
+            prev.push(_getItemFromTemplate(curr, templates, dependencyItems[i].dependencies));
+        }
+        return prev;
+    }, []);
+}
+/**
+ * Capture the key item details for a given template
+ *
+ * @param item the templates item
+ * @param isGroup boolean to indicate if the item is a group
+ * @param itemId the item id of the template
+ *
+ * @returns a IItemDetails object for the current item
+ */
+/*
+function _getItemDetails(
+  item: any,
+  isGroup: boolean
+): IItemDetails {
+  return {
+    title: item.title || "",
+    snippet: item.snippet || "",
+    description: item.description || "",
+    tags: item.tags || [],
+    accessInformation: !isGroup ? item.accessInformation || "" : "",
+    licenseInfo: !isGroup ? item.licenseInfo || "" : ""
+  };
+}
+*/
+/**
+ * Capture the key item details for a given group template
+ *
+ * @param template one of the templates from the current solution
+ * @param templates full list of templates
+ *
+ * @returns a list of IItemShare objects
+ */
+/*
+function _getGroupDetails(
+  template: any,
+  templates: any[]
+): IItemShare[] {
+  return template.type === "Group" ? templates.reduce((prev, cur) => {
+    if (cur.itemId !== template.itemId && cur.type !== "Group") {
+      prev.push({
+        id: cur.itemId,
+        title: cur.item.name || cur.item.title,
+        isShared: (cur.groups || []).indexOf(template.itemId) > -1,
+        shareItem: (cur.groups || []).indexOf(template.itemId) > -1,
+        type: cur.type,
+        typeKeywords: cur.item.typeKeywords
+      });
+    }
+    return prev;
+  }, []) : [];
+}
+*/
+/**
+ * Used to understand if we are dealing with a binary object that will support upload/download
+ *
+ * @param template one of the templates from the current solution
+ *
+ * @returns true if this item supports upload/download
+ */
+/*
+function _getIsResource(
+  template: any
+): boolean {
+  return template.type !== "Group" && template.resources.some(r => r.indexOf("_info_thumbnail") < 0) &&
+    (template.data === null || JSON.stringify(template.data) === "{}");
+}
+*/
+/**
+ * Sort the template ids based on their dependencies
+ *
+ * @param templates full list of templates
+ *
+ * @returns a list of Itop level item ids
+ */
+function _getTopLevelItemIds(templates) {
+    // Find the top-level nodes. Start with all nodes, then remove those that other nodes depend on
+    const topLevelItemCandidateIds = templates.map((template) => template.itemId);
+    templates.forEach((template) => {
+        (template.dependencies || []).forEach((dependencyId) => {
+            const iNode = topLevelItemCandidateIds.indexOf(dependencyId);
+            if (iNode >= 0) {
+                // Node is somebody's dependency, so remove the node from the list of top-level nodes
+                // If iNode == -1, then it's a shared dependency and it has already been removed
+                topLevelItemCandidateIds.splice(iNode, 1);
+            }
+        });
+    });
+    return topLevelItemCandidateIds;
+}
+
 const solutionConfigurationCss = ".configuration-container{position:relative;height:100%;width:100%}.configuration{position:absolute;top:0px;right:0px;bottom:0px;left:0px;display:flex;padding:0.5rem;border:1px #808080 solid}.config-tabs{width:100%}.config-tab{width:100%}.config-solution{position:absolute;top:3.5rem;right:-1px;bottom:-1px;left:-1px;display:flex;padding:0.5rem}.config-inventory{display:inline;max-width:-moz-min-content;max-width:min-content;flex-grow:0;overflow-y:auto}.config-inventory-hide{display:none;max-width:-moz-min-content;max-width:min-content;flex-grow:0;overflow-y:auto}.config-item{position:relative;display:inline;flex-grow:1;overflow-y:auto;margin-inline-start:0.5rem}solution-contents{position:relative;height:100%}solution-item{position:relative;height:100%}solution-spatial-ref{position:relative;height:100%;width:100%;overflow-y:auto}";
-const SolutionConfigurationStyle0 = solutionConfigurationCss;
 
 const SolutionConfiguration$1 = /*@__PURE__*/ proxyCustomElement(class SolutionConfiguration extends HTMLElement {
     async serializedAuthenticationWatchHandler() {
@@ -1197,11 +1537,11 @@ const SolutionConfiguration$1 = /*@__PURE__*/ proxyCustomElement(class SolutionC
         const solutionData = state.getStoreInfo("solutionData");
         this._solutionVariables = JSON.stringify(getSolutionVariables(solutionData.templates, this._translations));
         this._organizationVariables = JSON.stringify(getOrganizationVariables(this._translations));
-        return (h(Host, { key: '7e1a233174f750801550addbca63ef77690a9341' }, !this._solutionIsLoaded
+        return (h(Host, null, !this._solutionIsLoaded
             ? h("calcite-loader", { label: '' })
-            : null, h("div", { key: '4fa27d503bc880078de693f4d23a3869c6786944', class: "configuration-container" }, h("div", { key: '57659db87cadc4335bb62c7a10efa56ac162ed4a', class: "configuration" }, h("calcite-tabs", { key: '934d58e9f29dbd3dff4359dabdc13f666894cdcd', class: "config-tabs" }, h("calcite-tab-nav", { key: 'baf80ffadf2dc4f7dc2f2d7ea250564f9f85a19d', slot: "tab-nav" }, h("calcite-tab-title", { key: 'f5988f58d020b64a6f1f32f2ebe7962e380b6c0a' }, this._translations.definitionTab), hasServices ?
+            : null, h("div", { class: "configuration-container" }, h("div", { class: "configuration" }, h("calcite-tabs", { class: "config-tabs" }, h("calcite-tab-nav", { slot: "tab-nav" }, h("calcite-tab-title", null, this._translations.definitionTab), hasServices ?
             h("calcite-tab-title", null, this._translations.spatialReferenceTab) :
-            null), h("calcite-tab", { key: '4901cbde911cca97102a21a83f5db4d4419dfec9', class: "config-tab", selected: true }, h("div", { key: '298d3b094913dc57e2744e32b5b21b9eba4fe10c', class: "config-solution" }, h("div", { key: 'ae55fbdb4ee56f48b9f5162a71c36f4c6ca3c9e3', class: this._treeOpen ? "config-inventory" : "config-inventory-hide" }, h("solution-contents", { id: "configInventory", key: `${this.solutionItemId}-contents`, ref: (el) => (this._solutionContentsComponent = el) })), h("calcite-button", { key: 'd7bfd808997a6dd4c41507601f91bc5b6ca8347e', appearance: "transparent", class: "collapse-btn", "icon-start": this._treeOpen ? "chevrons-left" : "chevrons-right", id: "collapse-vars", onClick: () => this._toggleTree(), scale: "s", title: this._treeOpen ? this._translations.collapse : this._translations.expand }), h("div", { key: 'd6ee86b70b0eff80ae0adeae40403d51fd0c4d7e', class: "config-item" }, h("solution-item", { authentication: this.authentication, "item-id": this._currentEditItemId, key: `${this.solutionItemId}-item`, "organization-variables": this._organizationVariables, "solution-item-id": this.solutionItemId, "solution-variables": this._solutionVariables })))), hasServices
+            null), h("calcite-tab", { class: "config-tab", selected: true }, h("div", { class: "config-solution" }, h("div", { class: this._treeOpen ? "config-inventory" : "config-inventory-hide" }, h("solution-contents", { id: "configInventory", key: `${this.solutionItemId}-contents`, ref: (el) => (this._solutionContentsComponent = el) })), h("calcite-button", { appearance: "transparent", class: "collapse-btn", "icon-start": this._treeOpen ? "chevrons-left" : "chevrons-right", id: "collapse-vars", onClick: () => this._toggleTree(), scale: "s", title: this._treeOpen ? this._translations.collapse : this._translations.expand }), h("div", { class: "config-item" }, h("solution-item", { authentication: this.authentication, "item-id": this._currentEditItemId, key: `${this.solutionItemId}-item`, "organization-variables": this._organizationVariables, "solution-item-id": this.solutionItemId, "solution-variables": this._solutionVariables })))), hasServices
             ? h("calcite-tab", { class: "config-tab" }, h("div", { class: "config-solution" }, h("solution-spatial-ref", { defaultWkid: wkid, id: "configure-solution-spatial-ref", key: `${this.solutionItemId}-spatial-ref`, locked: !wkid, services: state.getStoreInfo("featureServices").map(fs => fs.name) })))
             : null)))));
     }
@@ -1678,7 +2018,7 @@ const SolutionConfiguration$1 = /*@__PURE__*/ proxyCustomElement(class SolutionC
         "serializedAuthentication": ["serializedAuthenticationWatchHandler"],
         "solutionItemId": ["valueWatchHandler"]
     }; }
-    static get style() { return SolutionConfigurationStyle0; }
+    static get style() { return solutionConfigurationCss; }
 }, [0, "solution-configuration", {
         "authentication": [1040],
         "serializedAuthentication": [1025, "serialized-authentication"],

package/dist/components/solution-contents2.js

@@ -11,7 +11,6 @@ import { d as defineCustomElement$2 } from './tree-item.js';
 import { d as defineCustomElement$1 } from './solution-item-icon2.js';
 
 const solutionContentsCss = ".icon-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
-const SolutionContentsStyle0 = solutionContentsCss;
 
 const SolutionContents = /*@__PURE__*/ proxyCustomElement(class SolutionContents extends HTMLElement {
     constructor() {
@@ -38,7 +37,7 @@ const SolutionContents = /*@__PURE__*/ proxyCustomElement(class SolutionContents
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '7546d1fe9d944520db9f8f81600fb7cf0655f1ab' }, h("calcite-tree", { key: '94bea7616cd3bdbb9fbcaddd49bb394e11bcf88b' }, this.renderHierarchy(this.templateHierarchy))));
+        return (h(Host, null, h("calcite-tree", null, this.renderHierarchy(this.templateHierarchy))));
     }
     renderHierarchy(objs) {
         return objs.map((obj) => {
@@ -81,7 +80,7 @@ const SolutionContents = /*@__PURE__*/ proxyCustomElement(class SolutionContents
     static get watchers() { return {
         "templateHierarchy": ["valueWatchHandler"]
     }; }
-    static get style() { return SolutionContentsStyle0; }
+    static get style() { return solutionContentsCss; }
 }, [0, "solution-contents", {
         "selectedItemId": [1537, "selected-item-id"],
         "templateHierarchy": [1040]

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

@@ -12,7 +12,6 @@ import { d as defineCustomElement$2 } from './label2.js';
 import { d as defineCustomElement$1 } from './progress.js';
 
 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;margin-inline-end:0.375rem;fill:#0079c1}.scale-down{-o-object-fit:scale-down;object-fit:scale-down}.img-container{display:inline;margin-inline-end:1rem;max-width:363px}.summary-count-container{display:inline;flex-grow:1;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}";
-const SolutionItemDetailsStyle0 = solutionItemDetailsCss;
 
 const SolutionItemDetails = /*@__PURE__*/ proxyCustomElement(class SolutionItemDetails extends HTMLElement {
     constructor() {
@@ -55,7 +54,7 @@ const SolutionItemDetails = /*@__PURE__*/ proxyCustomElement(class SolutionItemD
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: 'd4443b28db9314e9c6976d97af02e7af14d2a5ff' }, h("div", { key: 'bd2969f299df5fab6bab10a6cd6dbe7c7213aba4', class: "parent-container" }, h("div", { key: 'd7226027bddc89eb4ff89899ee45728534331a5d', class: "inputBottomSeparation" }, h("calcite-input", { key: '9fcd5e9c9d5fe7ac652fff4fa06801fec240380f', id: "item-title", value: this.itemDetails.title })), h("div", { key: '9542faf04236ec293eff1f1abf0667ee4d26ab45', class: "inputBottomSeparation" }, h("input", { key: '9a431fef50c9be4f084b33003c6be4cab65a7da0', 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", { key: '9ed82a0e807acd0344bd52bcef653728419d3fc1', class: "font-size--3 btn-link inline-block trailer-quarter", onClick: () => this._getThumbnail() }, h("svg", { key: '230d6a270cd61f4785b7f39e951e996a7b37a1ca', class: "icon-inline icon-inline--on-left", height: "16", viewBox: "0 0 16 16", width: "16" }, h("path", { key: '96a6c77691e152072aa0de03f63d8ec82f1ca051', 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", { key: 'de04396607c0a61eb1e13bb56581aae9e939b286', class: "flex" }, h("div", { key: '3df8a6cde94bc275b85db55375aaa351453c46fb', class: "img-container", ref: (el) => (this.thumbnailContainer = el) }, h("img", { key: 'a5084eff2ebee0514c5cac6acf4e1b8dcaaf47d5', class: "scale-down", height: "133", id: "item-thumbnail", ref: (el) => (this.thumbnail = el), width: "200" })), h("div", { key: '73199d7582082575282f36ecb6afed3ee6bd900e', class: "snippet-count-container" }, h("calcite-input", { key: '7aa7c61d42be36c237c6bd9b72e4ec24ef6dc07d', id: "item-snippet", maxLength: 250, type: "textarea", value: this.itemDetails.snippet }), h("label", { key: '9ae2f293b2cb64a475a0969b7e00951a1b55e251', class: "font-size--3", id: "item-snippet-count", ref: (el) => (this.itemSnippetCount = el) })))), h("calcite-label", { key: '98cf6dd0f1f53e15c857baeb4f3a580586935762' }, this._translations.description, h("label", { key: '2f54c0fd6d75e4b08e74cf5b30d9794d0375a267', id: "item-description-label" }, h("calcite-input", { key: '91cf40b10f1bed0cd4bc83a988d9a4151ddec2e6', id: "item-description", type: "textarea", value: this.itemDetails.description }))), h("calcite-label", { key: '4261ff6e21385fb681cb6a52dbaa8e3d75973d8b' }, this._translations.tags, h("label", { key: 'cde48f34fd18fe530dea6be06c8fb5e602048266', id: "item-tags-label" }, h("calcite-input", { key: 'e11931c90df113bd512bab39be092257ffd92e42', 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)));
+        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();
@@ -188,7 +187,7 @@ const SolutionItemDetails = /*@__PURE__*/ proxyCustomElement(class SolutionItemD
         this._translations = translations[0];
     }
     get el() { return this; }
-    static get style() { return SolutionItemDetailsStyle0; }
+    static get style() { return solutionItemDetailsCss; }
 }, [0, "solution-item-details", {
         "itemId": [1537, "item-id"],
         "itemDetails": [32],

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

@@ -6,7 +6,6 @@
 import { proxyCustomElement, HTMLElement, h, getAssetPath } from '@stencil/core/internal/client';
 
 const solutionItemIconCss = ".item-type-icon{pointer-events:none;display:block;height:1rem;margin-top:0.15em !important;min-width:16px;fill:currentColor;transform:rotate(360deg)}.item-type-icon-margin{margin-inline-end:0.375rem}";
-const SolutionItemIconStyle0 = solutionItemIconCss;
 
 const SolutionItemIcon = /*@__PURE__*/ proxyCustomElement(class SolutionItemIcon extends HTMLElement {
     constructor() {
@@ -25,7 +24,7 @@ const SolutionItemIcon = /*@__PURE__*/ proxyCustomElement(class SolutionItemIcon
      * Renders the component.
      */
     render() {
-        return h("div", { key: '3b732e3c889dc83eb649af9d66742304e549d229', title: this.type }, h("img", { key: '262f4891209996264e8c0248c926a60f71b9e674', class: "item-type-icon item-type-icon-margin", height: "16", src: this._getIconUrl(this.type, this.typeKeywords), width: "16" }));
+        return h("div", { title: this.type }, h("img", { class: "item-type-icon item-type-icon-margin", height: "16", src: this._getIconUrl(this.type, this.typeKeywords), width: "16" }));
     }
     //--------------------------------------------------------------------------
     //
@@ -319,7 +318,7 @@ const SolutionItemIcon = /*@__PURE__*/ proxyCustomElement(class SolutionItemIcon
     }
     static get assetsDirs() { return ["item-icons"]; }
     get el() { return this; }
-    static get style() { return SolutionItemIconStyle0; }
+    static get style() { return solutionItemIconCss; }
 }, [0, "solution-item-icon", {
         "isPortal": [4, "is-portal"],
         "type": [1],

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

@@ -11,7 +11,6 @@ import { d as defineCustomElement$2 } from './switch.js';
 import { d as defineCustomElement$1 } from './solution-item-icon2.js';
 
 const solutionItemSharingCss = ":host{display:block}.container-border{padding:1rem}.icon-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
-const SolutionItemSharingStyle0 = solutionItemSharingCss;
 
 const SolutionItemSharing = /*@__PURE__*/ proxyCustomElement(class SolutionItemSharing extends HTMLElement {
     constructor() {
@@ -41,7 +40,7 @@ const SolutionItemSharing = /*@__PURE__*/ proxyCustomElement(class SolutionItemS
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '7042ab9382712488f9184b305e417dd93379422f' }, h("div", { key: '00baf7fac31f03b249592eb8603a74d6f93f2615', class: "container-border" }, h("calcite-label", { key: '5328280b6ee86819366800e43eda0c44b55ca277' }, this._translations.groupInfo), this._renderItems(this.sharing))));
+        return (h(Host, null, h("div", { class: "container-border" }, h("calcite-label", null, this._translations.groupInfo), this._renderItems(this.sharing))));
     }
     //--------------------------------------------------------------------------
     //
@@ -128,7 +127,7 @@ const SolutionItemSharing = /*@__PURE__*/ proxyCustomElement(class SolutionItemS
     static get watchers() { return {
         "groupId": ["itemIdWatchHandler"]
     }; }
-    static get style() { return SolutionItemSharingStyle0; }
+    static get style() { return solutionItemSharingCss; }
 }, [1, "solution-item-sharing", {
         "groupId": [1537, "group-id"],
         "_translations": [32],

package/dist/components/solution-item2.js

@@ -41,7 +41,6 @@ import { d as defineCustomElement$2 } from './solution-template-data2.js';
 import { d as defineCustomElement$1 } from './solution-variables2.js';
 
 const solutionItemCss = ".configuration-container{position:relative;height:100%;width:100%}.configuration{position:absolute;top:0px;right:0px;bottom:0px;left:0px;display:flex;padding:0.5rem;border:1px #808080 solid}.config-tabs{width:100%}.config-tab{width:100%;overflow-y:auto;height:inherit}";
-const SolutionItemStyle0 = solutionItemCss;
 
 const SolutionItem = /*@__PURE__*/ proxyCustomElement(class SolutionItem extends HTMLElement {
     constructor() {
@@ -73,7 +72,7 @@ const SolutionItem = /*@__PURE__*/ proxyCustomElement(class SolutionItem extends
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '16de446a44799754d7066eb5cc587585fc9e37c8' }, h("div", { key: 'ddb7c1e6c86657502dc4b293d495f3b4dee594cf', class: "configuration-container" }, h("div", { key: '016954a98a5eb229a1f9eb2a4b9260daff3593bf', class: "configuration" }, this._showGroupTabs(this.itemType === "Group"), this._showItemTabs(this.itemType !== "Group")))));
+        return (h(Host, null, h("div", { class: "configuration-container" }, h("div", { class: "configuration" }, this._showGroupTabs(this.itemType === "Group"), this._showItemTabs(this.itemType !== "Group")))));
     }
     //--------------------------------------------------------------------------
     //
@@ -124,7 +123,7 @@ const SolutionItem = /*@__PURE__*/ proxyCustomElement(class SolutionItem extends
     static get watchers() { return {
         "itemId": ["itemIdWatchHandler"]
     }; }
-    static get style() { return SolutionItemStyle0; }
+    static get style() { return solutionItemCss; }
 }, [0, "solution-item", {
         "authentication": [1040],
         "itemId": [1537, "item-id"],

package/dist/components/solution-organization-variables2.js

@@ -11,7 +11,6 @@ import { d as defineCustomElement$2 } from './tree.js';
 import { d as defineCustomElement$1 } from './tree-item.js';
 
 const solutionOrganizationVariablesCss = ":host{display:block}.container-border{overflow-y:auto}.org-var-header{margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:1rem}";
-const SolutionOrganizationVariablesStyle0 = solutionOrganizationVariablesCss;
 
 const SolutionOrganizationVariables = /*@__PURE__*/ proxyCustomElement(class SolutionOrganizationVariables extends HTMLElement {
     constructor() {
@@ -41,7 +40,7 @@ const SolutionOrganizationVariables = /*@__PURE__*/ proxyCustomElement(class Sol
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: 'a4456905e1abde8eca22dfb6f3da81959d509b75' }, h("div", { key: '8fc37e2a59237ed0cca05b096f901a82da696151' }, h("h4", { key: '7bdd9e95f37297c51778a866542517048622e5ca', class: "org-var-header" }, this._translations.orgVariables)), h("div", { key: '10bfcebd83ddc363f04149a03298b0c5247fd265', class: "container-border" }, h("calcite-tree", { key: '1d168ebbceaf566fb8f4ddea85acba39c08bbd53', id: "variable-label" }, this._renderHierarchy(this._organizationVariables)))));
+        return (h(Host, null, h("div", null, h("h4", { class: "org-var-header" }, this._translations.orgVariables)), h("div", { class: "container-border" }, h("calcite-tree", { id: "variable-label" }, this._renderHierarchy(this._organizationVariables)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -89,7 +88,7 @@ const SolutionOrganizationVariables = /*@__PURE__*/ proxyCustomElement(class Sol
     static get watchers() { return {
         "value": ["valueWatchHandler"]
     }; }
-    static get style() { return SolutionOrganizationVariablesStyle0; }
+    static get style() { return solutionOrganizationVariablesCss; }
 }, [1, "solution-organization-variables", {
         "value": [1537],
         "_organizationVariables": [32],

package/dist/components/solution-resource-item2.js

@@ -21,7 +21,6 @@ import { d as defineCustomElement$2 } from './value-list.js';
 import { d as defineCustomElement$1 } from './value-list-item.js';
 
 const solutionResourceItemCss = ":host{display:block}.resource-item{padding:1rem}.resource-button{margin-inline-end:1rem}.resource-progress{padding-top:1rem}.resources-container{border:1px #808080 solid}.margin-bottom-1{margin-bottom:1rem}";
-const SolutionResourceItemStyle0 = solutionResourceItemCss;
 
 const SolutionResourceItem = /*@__PURE__*/ proxyCustomElement(class SolutionResourceItem extends HTMLElement {
     constructor() {
@@ -59,7 +58,7 @@ const SolutionResourceItem = /*@__PURE__*/ proxyCustomElement(class SolutionReso
      */
     render() {
         const hasValidResources = this._hasValidResources();
-        return (h(Host, { key: 'c36fddfce9c4c97b281281ec11dfa017d496141e' }, h("div", { key: 'e1166173669689e9acee92cc7e53747ebcec0c09', class: "resource-item" }, h("div", { key: '86c8e1d498d7b84e9587cdcf4a3bb971fc1ecaad', class: "margin-bottom-1" }, h("calcite-button", { key: 'f382275e75efeb5beadef582ddd343a283f014e2', appearance: "solid", class: "resource-button", color: "blue", onClick: () => this._addNewResource() }, this._translations.addResource), h("calcite-button", { key: 'c487e618472b047f8db71e8989f849c844682080', appearance: "solid", color: "blue", disabled: !hasValidResources, onClick: () => this._downloadAll() }, this._translations.downloadAll)), h("div", { key: '08733ba234cba9b5ea19455256fa961d23ae933b', class: "resources-container", style: { display: hasValidResources ? "inherit" : "none" } }, this._renderResourceList()))));
+        return (h(Host, null, h("div", { class: "resource-item" }, h("div", { class: "margin-bottom-1" }, h("calcite-button", { appearance: "solid", class: "resource-button", color: "blue", onClick: () => this._addNewResource() }, this._translations.addResource), h("calcite-button", { appearance: "solid", color: "blue", disabled: !hasValidResources, onClick: () => this._downloadAll() }, this._translations.downloadAll)), h("div", { class: "resources-container", style: { display: hasValidResources ? "inherit" : "none" } }, this._renderResourceList()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -283,7 +282,7 @@ const SolutionResourceItem = /*@__PURE__*/ proxyCustomElement(class SolutionReso
     static get watchers() { return {
         "itemId": ["itemIdWatchHandler"]
     }; }
-    static get style() { return SolutionResourceItemStyle0; }
+    static get style() { return solutionResourceItemCss; }
 }, [1, "solution-resource-item", {
         "authentication": [1040],
         "itemId": [1537, "item-id"],