@esri/solutions-components 0.11.15 → 0.11.16

package/dist/cjs/feature-list.cjs.entry.js

@@ -21,7 +21,7 @@ require('./restHelpersGet-e4639890.js');
 require('./update-243ea407.js');
 require('./interfaces-09c4c40e.js');
 
-const featureListCss = ":host{display:block}.width-full{width:100%}.pagination{display:flex;justify-content:center}.error-msg{padding:10px;width:calc(100% - 20px)}.feature-list-popup-title{font-weight:500;white-space:pre-line}.feature-list-popup-title-small{font-size:small;white-space:pre-line}.feature-list-popup-title-padding{padding:10px 12px}.feature-list-popup-title-padding-reduced{padding:10px 0}.profile-img{margin:0 0.75rem;min-width:32px}.like-container{display:flex;align-items:center;gap:5px;color:gray !important;font-style:italic}.feature-symbol{padding:3px 10px;min-width:30px;display:flex;justify-content:center}";
+const featureListCss = ":host{display:block}.width-full{width:100%}.pagination{display:flex;justify-content:center}.error-msg{padding:10px;width:calc(100% - 20px)}.feature-list-popup-title{font-weight:500;white-space:pre-line}.feature-list-popup-title-small{font-size:small;white-space:pre-line}.feature-list-popup-title-small-ellipsis{font-size:small;white-space:nowrap !important;text-overflow:ellipsis;overflow:hidden}.popup-title{padding:0 5px;word-break:break-word}.profile-img{padding:0 5px;min-width:32px}.like-container{display:flex;align-items:center;gap:5px;color:gray !important;font-style:italic}.feature-symbol{padding:0 3px;min-width:30px;display:flex;justify-content:center}.search{padding:10px;background-color:var(--calcite-color-foreground-1) !important;border-block-end:1px solid var(--calcite-color-border-3)}";
 const FeatureListStyle0 = featureListCss;
 
 const FeatureList = class {
@@ -99,6 +99,10 @@ const FeatureList = class {
      * IReportingOptions: Key options for reporting
      */
     reportingOptions;
+    /**
+     * boolean: When false popup title will shown in single line
+     */
+    showFullTitle = true;
     //--------------------------------------------------------------------------
     //
     //  State (internal)
@@ -116,6 +120,14 @@ const FeatureList = class {
      * boolean: Check if selected layer's features fetching process is completed
      */
     _isLoading = false;
+    /**
+     * string: Placeholder string to show fields included in full text search
+     */
+    _searchPlaceHolder = '';
+    /**
+     * any[]: Contains full text search info object
+     */
+    _fullTextSearchInfo;
     /**
      * Contains the translations for this component.
      * All UI strings should be defined here.
@@ -161,6 +173,10 @@ const FeatureList = class {
      * HTMLCalcitePaginationElement: Calcite pagination element instance
      */
     _pagination;
+    /**
+     * HTMLCalciteListElement: Calcite List element instance
+     */
+    _calciteList;
     /**
      * string[]: Valid field types for like
      */
@@ -173,6 +189,10 @@ const FeatureList = class {
      * boolean: When true configured like field is available in selected layer
      */
     _likeFieldAvailable = false;
+    /**
+     * string: The current search expression
+     */
+    _searchExpression;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -222,6 +242,9 @@ const FeatureList = class {
             };
             await this.pageChanged(event);
         }
+        else if (this._searchExpression) {
+            await this._searchFullText();
+        }
         else {
             await this.initializeFeatureItems();
         }
@@ -253,6 +276,7 @@ const FeatureList = class {
         this._popupUtils = new popupUtils.PopupUtils();
         if (this.mapView && this.selectedLayerId) {
             this._selectedLayer = await mapViewUtils.getLayerOrTable(this.mapView, this.selectedLayerId);
+            this._getFullTextSearchInfo();
         }
     }
     /**
@@ -265,9 +289,11 @@ const FeatureList = class {
      * Renders the component.
      */
     render() {
-        return (index.h("calcite-panel", { key: '6b6214a3dba7df7c2035203750d547945407ecde', "full-height": true, "full-width": true }, this._isLoading && index.h("calcite-loader", { key: '1b05d96de0b4d396b13f448311db76315e28b81b', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
-            index.h("calcite-notice", { key: 'abe755f0bc5c7ff064249159c3154c9ca1c27594', class: "error-msg", icon: "feature-details", kind: "info", open: true }, index.h("div", { key: '5a8ead1d47151cf088ae9e359052cf35129b09d3', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), index.h("calcite-list", { key: 'cd7049462fb654dad0c4c05f127cf3e5d06bc5de', label: "", "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            index.h("div", { key: 'b65b1f491800e489790d79054affc0ddcd089d1f', class: "width-full", slot: "footer" }, index.h("calcite-pagination", { key: '280aa2b17c78f53a4f110f8dc021e630241ebbe0', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
+        const showSearch = this._canShowFullTextSearch();
+        return (index.h("calcite-panel", { key: '56599be334eec65be00681d415db28917133b0c1', "full-height": true, "full-width": true }, showSearch &&
+            index.h("calcite-input", { key: '6de9873f6b7ab961dffe1334d2fc20b4322d8ea8', class: "search", clearable: true, icon: "search", onCalciteInputChange: this._searchTextChanged.bind(this), placeholder: this._searchPlaceHolder, title: '', type: "search" }), this._isLoading && index.h("calcite-loader", { key: '4189b0d6c2a85116d529f5b7844c1f2d41657350', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
+            index.h("calcite-notice", { key: '7f2e8276ad5345e21667b2dedc7e23f5c34672f5', class: "error-msg", icon: "feature-details", kind: "info", open: true }, index.h("div", { key: '63d44ac906c8d5584aac2cfbeec4cf0962d61abe', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), index.h("calcite-list", { key: '5843f8d7ca994cb799a9be0ab2f43a8f1e407e9a', class: this.textSize === 'small' && !this.showFullTitle ? 'overflow-hidden' : '', label: "", ref: el => this._calciteList = el, "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            index.h("div", { key: '288364bc505fe6bce8b1260dce5173163a795330', class: "width-full", slot: "footer" }, index.h("calcite-pagination", { key: 'e30e2d46a0005dd3e0d289deb4721b9155d4df29', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -345,6 +371,112 @@ const FeatureList = class {
         this._featureItems = await this.queryPage(page);
         this._isLoading = false;
     }
+    /**
+     * Validates if full text search is enabled and and indexes for fullTextSearch is set as display field on layer
+     * @protected
+     */
+    _canShowFullTextSearch() {
+        return ((this._selectedLayer?.capabilities)?.query)?.supportsFullTextSearch &&
+            this._selectedLayer.indexes.items.filter(i => i.indexType == 'FullText').length > 0;
+    }
+    /**
+     * Create list of full text search info
+     */
+    _getFullTextSearchInfo() {
+        this._fullTextSearchInfo = [];
+        //combine all the fullText index
+        if (((this._selectedLayer?.capabilities)?.query)?.supportsFullTextSearch) {
+            const fullTextIndexes = this._selectedLayer.indexes?.filter(i => i.indexType == 'FullText');
+            if (fullTextIndexes?.length) {
+                //create the search placeholder text
+                const onFields = [];
+                fullTextIndexes.forEach((index) => {
+                    onFields.push(...index.fields.split(','));
+                });
+                //get field alias for fields
+                const fieldAlias = [];
+                onFields.forEach(fieldName => {
+                    //We splitting the fields array so we get leading/trailing spaces, hence trim the fieldName
+                    const fieldInfo = this._selectedLayer.getField(fieldName.trim());
+                    fieldAlias.push(fieldInfo.alias);
+                });
+                this._searchPlaceHolder = this._translations.searchPlaceholder.replace("{{fields}}", fieldAlias.join(', '));
+                this._fullTextSearchInfo.push({
+                    'onFields': ['*'],
+                    'searchTerm': '',
+                    'searchType': 'prefix'
+                });
+            }
+        }
+    }
+    /**
+     * Search using the fullTextSearch on layer and filter the list
+     * @param event The input change event
+     * @protected
+     */
+    async _searchTextChanged(event) {
+        this._fullTextSearchInfo.forEach(searchInfo => {
+            searchInfo.searchTerm = event.target.value;
+        });
+        await this._searchFullText();
+    }
+    /**
+     * Search using the fullTextSearch on layer
+     * @param event The input change event
+     * @protected
+     */
+    async _searchFullText() {
+        //always clear previous search definition
+        if (this._searchExpression) {
+            this._clearSearchDefinitionExpression();
+        }
+        let searchedIds = [];
+        if (this._fullTextSearchInfo) {
+            if (this._fullTextSearchInfo[0].searchTerm) {
+                const searchQueryParams = this._selectedLayer.createQuery();
+                searchQueryParams.fullText = this._fullTextSearchInfo;
+                searchedIds = await this._selectedLayer.queryObjectIds(searchQueryParams);
+                await this._updateSearchDefinitionExpression(searchedIds?.length ? searchedIds : [-1]);
+            }
+        }
+        await this.initializeFeatureItems();
+    }
+    /**
+     * Update the search expression in layer
+     * @param searchedIds Array of objectIds satisfying the full search text
+     * @protected
+     */
+    async _updateSearchDefinitionExpression(searchedIds) {
+        const defExp = this._selectedLayer.definitionExpression;
+        if (searchedIds?.length) {
+            const searchExp = `objectId in(${searchedIds})`;
+            this._selectedLayer.definitionExpression = defExp?.indexOf(this._searchExpression) > -1 ?
+                defExp.replace(this._searchExpression, searchExp) :
+                defExp ? `${defExp} AND (${searchExp})` : searchExp;
+            this._searchExpression = searchExp;
+        }
+        else {
+            this._clearSearchDefinitionExpression();
+        }
+    }
+    /**
+     * Clears the applied search expression on the layer
+     *@protected
+     */
+    _clearSearchDefinitionExpression() {
+        const defExp = this._selectedLayer.definitionExpression;
+        //remove previous search expression first
+        if (this._searchExpression && defExp?.indexOf(this._searchExpression) > -1) {
+            // eslint-disable-next-line unicorn/prefer-ternary
+            if (defExp?.indexOf(' AND (' + this._searchExpression) > -1) {
+                this._selectedLayer.definitionExpression = defExp.replace(` AND (${this._searchExpression})`, '');
+            }
+            else {
+                this._selectedLayer.definitionExpression = defExp.replace(this._searchExpression, '');
+            }
+        }
+        this._searchExpression = undefined;
+    }
     /**
      * On feature click in feature list highlight the feature on the map
      * @param event feature clicked event
@@ -498,11 +630,13 @@ const FeatureList = class {
         popupTitle = popupTitle ?? oId;
         // get the formatted like count
         const formattedLikeCount = Number(selectedFeature.attributes[this.reportingOptions?.[this._selectedLayer.id].likeField]).toLocaleString();
-        const popupTitleClass = this.textSize === 'small' ? 'feature-list-popup-title-small' : 'feature-list-popup-title';
-        const popupTitlePaddingClass = this.showUserImageInList || this.showFeatureSymbol ? 'feature-list-popup-title-padding-reduced' : 'feature-list-popup-title-padding';
+        const popupTitleClass = (this.textSize === 'small' && !this.showFullTitle) ? 'feature-list-popup-title-small-ellipsis' : this.textSize === 'small' ? 'feature-list-popup-title-small' : 'feature-list-popup-title';
+        // Set the width of the popuptitle class depending on calcite list width to avoid icon's overflow
+        const deductedWidth = this.showUserImageInList ? 115 : 65;
+        const width = this._calciteList.offsetWidth - deductedWidth;
         return (index.h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, this.showUserImageInList &&
             index.h("calcite-avatar", { class: 'profile-img', "full-name": userInfo?.fullName, scale: "m", slot: "content-start", thumbnail: userInfo?.userProfileUrl, userId: userInfo?.id, username: userInfo?.fullName ? userInfo.username : undefined }), this.showFeatureSymbol &&
-            index.h("div", { class: 'feature-symbol', ref: (el) => el && el.replaceChildren(featureSymbol), slot: "content-start" }), index.h("div", { class: `${popupTitleClass} ${popupTitlePaddingClass}`, slot: "content-start" }, popupTitle), this._likeFieldAvailable &&
+            index.h("div", { class: 'feature-symbol', ref: (el) => el && el.replaceChildren(featureSymbol), slot: "content-start" }), index.h("div", { class: `popup-title ${popupTitleClass}`, slot: "content-start", style: { maxWidth: this.textSize === 'large' ? 'none' : `${width}px` } }, popupTitle), this._likeFieldAvailable &&
             index.h("div", { class: "like-container", id: oId.concat("like"), slot: "content-end" }, index.h("span", null, this._abbreviatedLikeCount), index.h("calcite-icon", { icon: "thumbs-up", scale: 's' }), index.h("calcite-tooltip", { overlayPositioning: "fixed", placement: "top", "reference-element": oId.concat("like") }, formattedLikeCount)), index.h("calcite-icon", { flipRtl: true, icon: "chevron-right", scale: "s", slot: "content-end" })));
     }
     /**

package/dist/cjs/json-editor_7.cjs.entry.js

@@ -135,7 +135,7 @@ const JsonEditor = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, { key: 'ba7c8a397da913d86f5d294cdfbb5ec1b84d89de' }, index.h("div", { key: 'bc5c6d1ee443b2096cc44d0b66850d4ebe8462da', id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, index.h("div", { key: 'dbaf682cba354ce7eef21b03a71832fd39911332', class: "editor-controls" }, index.h("div", { key: 'e454e1dd36aa620abf2ffb7877bebb9adc70ff15', class: "editor-buttons" }, index.h("calcite-icon", { key: '1de67e151c6e65b004a431d89dc785ca286a8e11', id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), index.h("calcite-button", { key: '33de20955d29287a3ec981e7650562a036343e3a', id: `${this.instanceid}-undo`, color: "blue", appearance: "solid", title: this._translations.undo, onClick: () => this._undo(), scale: "s", class: "edit-button" }, index.h("calcite-icon", { key: '9bed02f1e8a367ad2ed764747f044a4ce27de52b', icon: "undo", scale: "s" })), index.h("calcite-button", { key: '07562443286c4eeec28577a7cff0401e8cea0ba8', id: `${this.instanceid}-redo`, color: "blue", appearance: "solid", title: this._translations.redo, onClick: () => this._redo(), scale: "s", class: "edit-button" }, index.h("calcite-icon", { key: '5f24902a66eae644d0d358a4826a98d45e905493', icon: "redo", scale: "s" })), index.h("calcite-button", { key: '02f4f3f8ab93e5f1146176ec3699e2a6d25ecbeb', id: `${this.instanceid}-diff`, color: "blue", appearance: "solid", title: this._translations.diff, onClick: () => this._toggleEditor(), scale: "s", class: "edit-button" }, index.h("calcite-icon", { key: '0bcd20d28e9ec34f1736a2888d78bfcd9cb82a4d', icon: "compare", scale: "s" })), index.h("calcite-button", { key: 'cf3a7672ebd3ebef00123096ec304456b8f102fc', id: `${this.instanceid}-search`, appearance: "outline", color: "blue", title: this._translations.search, onClick: () => this._search(), scale: "s", class: "edit-button" }, index.h("calcite-icon", { key: '36aac5e89ebf593d8d1981d7b8f6267fbbadfd24', icon: "search", scale: "s" })), index.h("calcite-button", { key: 'cc981ff7580acfa3a3395c4ce7a96b3022bbbb4b', id: `${this.instanceid}-reset`, color: "blue", appearance: "solid", disabled: true, title: this._translations.cancelEdits, onClick: () => this._reset(), scale: "s", class: "edit-button" }, index.h("calcite-icon", { key: '3c4fc1da749f4b4f64d814fcd58dc035634f6b1b', icon: "reset", scale: "s" })))), index.h("div", { key: '6c33ec4851d804dac7fd9762e3c8c7e416a27cf4', class: "edit-parent" }, index.h("div", { key: 'a6e9721127bbd43f9974af65e0899489370e1868', id: `${this.instanceid}-container`, class: "json-edit-container" }), index.h("div", { key: 'c1d1ea305c0e451c24beddb8ac3f8e85a3fca088', id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
+        return (index.h(index.Host, { key: 'e9c806dbfc886daac9be93350e461246339787dd' }, index.h("div", { key: '5f31103bc0392042581d1421530f2ddcdebcc507', id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, index.h("div", { key: '560c74b9864cd94f4e689bf65cb8e1fac42b94af', class: "editor-controls" }, index.h("div", { key: '73ca9ac97f3d40fb408e98477641a9d94e1cd32e', class: "editor-buttons" }, index.h("calcite-icon", { key: '2d83934e4493595f66e047c608a87e316279ec1b', id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), index.h("calcite-button", { key: 'fe95dd90ec0db23c6d6d6766d6d405c32468cec1', id: `${this.instanceid}-undo`, color: "blue", appearance: "solid", title: this._translations.undo, onClick: () => this._undo(), scale: "s", class: "edit-button" }, index.h("calcite-icon", { key: 'd802118d2ac7b8cbf2750f3af11252fd52173dd0', icon: "undo", scale: "s" })), index.h("calcite-button", { key: '9e9af33be6b712ff83ec70e024776c2429086761', id: `${this.instanceid}-redo`, color: "blue", appearance: "solid", title: this._translations.redo, onClick: () => this._redo(), scale: "s", class: "edit-button" }, index.h("calcite-icon", { key: 'bb5bfd3a99902b03c4ffb704b8fdc963c006e664', icon: "redo", scale: "s" })), index.h("calcite-button", { key: 'a88fcffeb9c82394470717ebc6659b42ad9a1c20', id: `${this.instanceid}-diff`, color: "blue", appearance: "solid", title: this._translations.diff, onClick: () => this._toggleEditor(), scale: "s", class: "edit-button" }, index.h("calcite-icon", { key: 'f902baf72fee24ef3b56da2c4d9337db96ab63b1', icon: "compare", scale: "s" })), index.h("calcite-button", { key: '841abd705338fb1e43c892c4858bff00591958c3', id: `${this.instanceid}-search`, appearance: "outline", color: "blue", title: this._translations.search, onClick: () => this._search(), scale: "s", class: "edit-button" }, index.h("calcite-icon", { key: '01c24bdbf30cd22a06064bf26a47b38516508879', icon: "search", scale: "s" })), index.h("calcite-button", { key: '2d6b9dc60e26e347272c76ff9f8ada529975265b', id: `${this.instanceid}-reset`, color: "blue", appearance: "solid", disabled: true, title: this._translations.cancelEdits, onClick: () => this._reset(), scale: "s", class: "edit-button" }, index.h("calcite-icon", { key: 'a373dc694d97992dfbd60f49f38536ba34684381', icon: "reset", scale: "s" })))), index.h("div", { key: '6cdebae478b9d1b61e317155000bf62ad4c5b8a3', class: "edit-parent" }, index.h("div", { key: 'e3914618f86335e9538969b5cb7f7797212985c2', id: `${this.instanceid}-container`, class: "json-edit-container" }), index.h("div", { key: '4a17fd062060ddf2e5dca5c2fb6c9883ed9aadd4', id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
     }
     //--------------------------------------------------------------------------
     //
@@ -512,7 +512,7 @@ const SolutionItemDetails = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, { key: '032ff1aeb8c703b36ff4746508e0b6b35ad29516' }, index.h("div", { key: 'a6ef24150d812c790a9762c7e6dcaefcfacc2c36', class: "parent-container" }, index.h("div", { key: 'e03091a4557a0e15af35782350aec472c94a0151', class: "inputBottomSeparation" }, index.h("calcite-input", { key: 'e45e06e9e140cc1bcd070faef6efeccd773ce7cc', id: "item-title", value: this.itemDetails.title })), index.h("div", { key: '9f62241ee3f46730aa48f40c5c9e55ea823c2e6f', class: "inputBottomSeparation" }, index.h("input", { key: '1c90efe7904fffbccb189032069396cf21e21228', 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", { key: 'fbc1a6f8c40ac4ba7840bf80d16b4039d2bbb5a7', class: "font-size--3 btn-link inline-block trailer-quarter", onClick: () => this._getThumbnail() }, index.h("svg", { key: '1d4eacbc6445262ffa9bd9fe3d407a8a4560dd36', class: "icon-inline icon-inline--on-left", height: "16", viewBox: "0 0 16 16", width: "16" }, index.h("path", { key: '58eaaf7e259d7ef37ae352874488fce873a416b9', 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", { key: 'a1d50881d34eddd023e0a9b677575a7573df583a', class: "flex" }, index.h("div", { key: 'e31f5d4cdaaee8765cc982ba9adda88df977e803', class: "img-container", ref: (el) => (this.thumbnailContainer = el) }, index.h("img", { key: 'c2d9b5e31e25b1bc139e1c119042044fdd8b31dd', class: "scale-down", height: "133", id: "item-thumbnail", ref: (el) => (this.thumbnail = el), width: "200" })), index.h("div", { key: 'eaa96a675562d8969124ba3169e46d4fe9d180cb', class: "snippet-count-container" }, index.h("calcite-input", { key: '47d6b25a65fbe60f38668710b1eb14129c4aa6f2', id: "item-snippet", maxLength: 250, type: "textarea", value: this.itemDetails.snippet }), index.h("label", { key: '8267140b46c94425eda185020c76307e70c33684', class: "font-size--3", id: "item-snippet-count", ref: (el) => (this.itemSnippetCount = el) })))), index.h("calcite-label", { key: '70ffbe01451016a0016d044e2f3e4d1e41722cb0' }, this._translations.description, index.h("label", { key: 'f7c014575c2a6964a45fad059646d79ebadf5e18', id: "item-description-label" }, index.h("calcite-input", { key: '34d78b42697be944d413102975aff3d31498abba', id: "item-description", type: "textarea", value: this.itemDetails.description }))), index.h("calcite-label", { key: '2d51c7a3b709b41e5adb0f73756a9528f86c20a5' }, this._translations.tags, index.h("label", { key: 'ea9ddfa6662d7ab8eb92301c59b6fd5876d7d59b', id: "item-tags-label" }, index.h("calcite-input", { key: 'aec1f0ee4408d4cb687bb31b313cb47b58979733', 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)));
+        return (index.h(index.Host, { key: '8ad2bab229a9ee6cd80efde17d269a484288f5ae' }, index.h("div", { key: 'a066afedf3e5ea056579e07cac6c38496fe00d79', class: "parent-container" }, index.h("div", { key: 'fe7d207e2d28f0e70507ef048d993bc3ddc62297', class: "inputBottomSeparation" }, index.h("calcite-input", { key: 'f0714ef845c9b4aa791e3fc6f5ac28fe6572127d', id: "item-title", value: this.itemDetails.title })), index.h("div", { key: '40b6f0d4d34ff62134f25fdd42887f395407aa45', class: "inputBottomSeparation" }, index.h("input", { key: '216060434e37ff499a47b4cc24d7682ac6e55ba7', 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", { key: 'a6b71fac06b9231a91b32a0416cb3a723b6ac6dd', class: "font-size--3 btn-link inline-block trailer-quarter", onClick: () => this._getThumbnail() }, index.h("svg", { key: '395adfcd43d737fe049f765b3700d7358c06e8a0', class: "icon-inline icon-inline--on-left", height: "16", viewBox: "0 0 16 16", width: "16" }, index.h("path", { key: '5e541a3fcb79fe3a306b720a08e745f0dd69d557', 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", { key: 'e6dc45b53a0deac24d29a7be29569c55857a7801', class: "flex" }, index.h("div", { key: '8c81b6db29e4b03a5188e729eb8e27b8dcf22e5f', class: "img-container", ref: (el) => (this.thumbnailContainer = el) }, index.h("img", { key: 'cfbfad50a4eb55166cb49be45a20f680b7d482d3', class: "scale-down", height: "133", id: "item-thumbnail", ref: (el) => (this.thumbnail = el), width: "200" })), index.h("div", { key: '0cf010a87106c0434ff7d54f7889bc2eb08fd733', class: "snippet-count-container" }, index.h("calcite-input", { key: '85eedc1b801db3afdc2dfb606aa93de489bac491', id: "item-snippet", maxLength: 250, type: "textarea", value: this.itemDetails.snippet }), index.h("label", { key: '783be9f5082085add36a16f1a8bc55ecc11dc7e8', class: "font-size--3", id: "item-snippet-count", ref: (el) => (this.itemSnippetCount = el) })))), index.h("calcite-label", { key: '63bdfb42b95d1e8086e792efd757919676230354' }, this._translations.description, index.h("label", { key: 'aa9056a2807d9fd14c7dcd81775d902a30a2df63', id: "item-description-label" }, index.h("calcite-input", { key: '61d584f29afd305913039e0cf4d6be7d54f1aa2f', id: "item-description", type: "textarea", value: this.itemDetails.description }))), index.h("calcite-label", { key: '4daf0f44b2b14274fe8992bad5607c8ba82d6fa4' }, this._translations.tags, index.h("label", { key: '142f41ae1667c916e2ef32e7b7eb9aacad80e17d', id: "item-tags-label" }, index.h("calcite-input", { key: '2f576b51a68370ce1112b999c35eef0714595e9f', 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();
@@ -738,7 +738,7 @@ const SolutionItemSharing = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, { key: 'eca66b743e748d9f915c6d356ea84075ab21709a' }, index.h("div", { key: 'b0765e14cc9de5a81afa5d20bc41e7f78913a37e', class: "container-border" }, index.h("calcite-label", { key: '36cbf3b48a2641bcb2107e61609c2ec6c9f18991' }, this._translations.groupInfo), this._renderItems(this.sharing))));
+        return (index.h(index.Host, { key: '1c7dbee68fbf0eabf736fb783f173ade2f408122' }, index.h("div", { key: '3c3d88ab122d4a8bc69363224a2754c4a4b092ba', class: "container-border" }, index.h("calcite-label", { key: '137bb704b258a3cd1e5e5b7a18c53aca331d7f91' }, this._translations.groupInfo), this._renderItems(this.sharing))));
     }
     //--------------------------------------------------------------------------
     //
@@ -895,7 +895,7 @@ const SolutionOrganizationVariables = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, { key: '4d1a39b53287d445a1fc66cd5088a7bc60516ab6' }, index.h("div", { key: '7a40ad712fe1af01e92701d128f65b0590aa15bc' }, index.h("h4", { key: '7517fc56b5b0128ee102dc3f57e334501befe14f', class: "org-var-header" }, this._translations.orgVariables)), index.h("div", { key: 'd48cbc3ffb24ba54ded2b24c7c518ecf8114cd55', class: "container-border" }, index.h("calcite-tree", { key: '383124c0ae3d646dc9ee857109051e7a151dbe62', id: "variable-label" }, this._renderHierarchy(this._organizationVariables)))));
+        return (index.h(index.Host, { key: '3f72a5c1b8fb6bcdab858ee061eadb38cb9965d9' }, index.h("div", { key: '118c7cafc8330c44e72a59a76fd81ca0f39696e1' }, index.h("h4", { key: '86934bdf3cbf162a732a53579e324c5fff8beead', class: "org-var-header" }, this._translations.orgVariables)), index.h("div", { key: 'ed5c1df397286a7d1c8e61b5ce04623fa13d74cc', class: "container-border" }, index.h("calcite-tree", { key: '47f4f9bf5a81ded9a37a33a94fac6a230263e917', id: "variable-label" }, this._renderHierarchy(this._organizationVariables)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -1031,7 +1031,7 @@ const SolutionResourceItem = class {
      */
     render() {
         const hasValidResources = this._hasValidResources();
-        return (index.h(index.Host, { key: '36017a54e5f8fafda593af2b727f1fbda80c7455' }, index.h("div", { key: 'eb9f53c9b4161c09e0b00d9a4d90a814d944819c', class: "resource-item" }, index.h("div", { key: '504dfa5fb623ed27a0829f60ebbf5de17b6d467f', class: "margin-bottom-1" }, index.h("calcite-button", { key: 'e578443e1ef409917c5946c77e660c04d273cb6c', appearance: "solid", class: "resource-button", color: "blue", onClick: () => this._addNewResource() }, this._translations.addResource), index.h("calcite-button", { key: 'e4c11326d7c5d96de1d0983eb0beb3cf726177c8', appearance: "solid", color: "blue", disabled: !hasValidResources, onClick: () => this._downloadAll() }, this._translations.downloadAll)), index.h("div", { key: '3617bf40ac8b01d70b523642757a624c977ea491', class: "resources-container", style: { display: hasValidResources ? "inherit" : "none" } }, this._renderResourceList()))));
+        return (index.h(index.Host, { key: '13f2759a882d2eca48bf9dda58e74caade76142b' }, index.h("div", { key: '498ced2e29b8af9138a8aa9d77ec78e07e3c64de', class: "resource-item" }, index.h("div", { key: 'd76a967373a990906a67d88ea6466030c41401ff', class: "margin-bottom-1" }, index.h("calcite-button", { key: '96cd2ee08adadef9e1b29db12c38d4748b0689c0', appearance: "solid", class: "resource-button", color: "blue", onClick: () => this._addNewResource() }, this._translations.addResource), index.h("calcite-button", { key: '49326139cad065995512d3e3568c7d8e7f5cef4f', appearance: "solid", color: "blue", disabled: !hasValidResources, onClick: () => this._downloadAll() }, this._translations.downloadAll)), index.h("div", { key: '9c056d9ab7242ea10cbcf57eaabce4bd9777541e', class: "resources-container", style: { display: hasValidResources ? "inherit" : "none" } }, this._renderResourceList()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -1376,7 +1376,7 @@ const SolutionTemplateData = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, { key: 'db99cf57229d7d8b9fe6315e180d95de0b20fc8d' }, index.h("div", { key: '83473f420d1417c85ebb4119be9f359cab878c54', class: "solution-data-container" }, index.h("calcite-shell", { key: '013754ef962c2e5c112f6a8cc6c5d1b8e768078e', class: "light var-container", dir: "ltr" }, index.h("calcite-panel", { key: '11ab2a07fe4af542d8cefc1c131246deef43dd9a', class: "json-editor" }, index.h("div", { key: 'ba0460977eb0375acaf5b11ce951986a08ece39b', class: "solution-data-child-container calcite-match-height" }, index.h("json-editor", { key: '53251c1583aa7e8cf2a4e9a1f22e4c72430d3928', class: "solution-data-editor-container", instanceid: this.itemId + "|" + this.instanceid, locale: this.locale, value: this.value }))), index.h("calcite-shell-panel", { key: '30c47797a35ff7228c4318a5633aec57de05b8cf', "height-scale": "l", position: "end", slot: "contextual-panel", "width-scale": "xs" }, index.h("div", { key: '028b16654835744f0735b880ca85a3d174963414', class: this.varsOpen ? "solution-data-child-container" : "solution-data-child-container-collapsed" }, index.h("calcite-button", { key: 'bb5049611e778b970454544851a625ccef47d23a', 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", { key: 'c2a30a7c27db181e0dfe0e201d9d3b2742247080', class: this.varsOpen ? "org-vars" : "org-vars display-none", id: "orgVars" }, index.h("solution-organization-variables", { key: '178c4301c8558c4fe7114c8f6cf5bc0df10883a0', locale: this.locale, value: this.organizationVariables })), index.h("div", { key: 'f85375bac946cff856b6915f340bf926498265ea', class: this.varsOpen ? "sol-vars" : "sol-vars display-none", id: "solVars" }, index.h("solution-variables", { key: '166d0752746994bc4aebd4e41660f8a2d2c678ea', locale: this.locale, value: this.solutionVariables }))))))));
+        return (index.h(index.Host, { key: '3f853006c19509c8cf484d4420b3f687aaad5161' }, index.h("div", { key: 'f524e1ee3c8dc972779be0909372c11c26092dd0', class: "solution-data-container" }, index.h("calcite-shell", { key: '56797702bc53b08051360975dc529c884eb7d294', class: "light var-container", dir: "ltr" }, index.h("calcite-panel", { key: '6208ac7b63ab8b69bc29ad88abdb9bcdeaaa707a', class: "json-editor" }, index.h("div", { key: '66e99550359b5665b4dd04f794d8108e4ee34284', class: "solution-data-child-container calcite-match-height" }, index.h("json-editor", { key: '7a7f5afa5d424fb6099b7167f274ce211e791a56', class: "solution-data-editor-container", instanceid: this.itemId + "|" + this.instanceid, locale: this.locale, value: this.value }))), index.h("calcite-shell-panel", { key: '7cc8bac91bfc5be96018d005cc87be457278ed6d', "height-scale": "l", position: "end", slot: "contextual-panel", "width-scale": "xs" }, index.h("div", { key: '4ce0c251d30d5735781394f5c213523867205886', class: this.varsOpen ? "solution-data-child-container" : "solution-data-child-container-collapsed" }, index.h("calcite-button", { key: '814c8996b854102b022f7ac482498dd6aac36ec8', 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", { key: '6b872cfc1c60870fb6262808f5d9f61cc35f0f44', class: this.varsOpen ? "org-vars" : "org-vars display-none", id: "orgVars" }, index.h("solution-organization-variables", { key: 'e8e9ee594b6dcb5ddaabd05c322fb33d568ac7b5', locale: this.locale, value: this.organizationVariables })), index.h("div", { key: '109d17a77a54a13818af6aa2a9beb92526100ea7', class: this.varsOpen ? "sol-vars" : "sol-vars display-none", id: "solVars" }, index.h("solution-variables", { key: '46902ed69897ed01334def99817fedafbda2e8d5', locale: this.locale, value: this.solutionVariables }))))))));
     }
     //--------------------------------------------------------------------------
     //
@@ -1485,7 +1485,7 @@ const SolutionVariables = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, { key: 'a9354a1d3b3d91b9b9522bec945726e106487b78' }, index.h("div", { key: 'd38d0151ba9f8421e3ec863ce90b234964cb7f21' }, index.h("h4", { key: '3d10129c3327e803e38b4fc21976764f9ac91693', class: "org-var-header" }, this._translations.solVariables)), index.h("div", { key: '8b79cef63c5b8f5f66b0e11a4b94021f6a025fc3', class: "container-border" }, index.h("calcite-tree", { key: '7f69edec6e35a65e45b461d69e92d0e163563bee', id: "variable-label" }, this._renderHierarchy(this._solutionVariables)))));
+        return (index.h(index.Host, { key: 'a90cdfc9a32279cb07938fc57f9dd7e38d822f6d' }, index.h("div", { key: '6826e3dd84034368f419ff759962a721a275dc9c' }, index.h("h4", { key: '5ebdf456e8c4dc006b036dc182fa75218aac0e01', class: "org-var-header" }, this._translations.solVariables)), index.h("div", { key: '06fc04c1e61dc1897989e3cc11df7b173f1fdb2a', class: "container-border" }, index.h("calcite-tree", { key: '15500194129af7440ec05dc495b060fc18f22324', id: "variable-label" }, this._renderHierarchy(this._solutionVariables)))));
     }
     //--------------------------------------------------------------------------
     //