@esri/solutions-components 0.11.15 → 0.11.16

package/dist/esm/crowdsource-reporter.entry.js

@@ -160,6 +160,10 @@ const CrowdsourceReporter = class {
      * string: selected floor level
      */
     floorLevel;
+    /**
+     * boolean: When false comment will shown in single line in the comments list
+     */
+    showFullCommentTitle = true;
     //--------------------------------------------------------------------------
     //
     //  State (internal)
@@ -213,7 +217,7 @@ const CrowdsourceReporter = class {
     /**
      * number: Show the updated progress bar status
      */
-    _updatedProgressBarStatus = 0.25;
+    _updatedProgressBarStatus = 25;
     /**
      * ISortingInfo: Sort the feature list depending on the sort field and order
      */
@@ -526,7 +530,7 @@ const CrowdsourceReporter = class {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: '42f88dcb756add8af6af0936b7ef9aef47a43236' }, this._reportSubmitted && h("calcite-alert", { key: '7d5c337096d2e3562bd133d5313acc34f941b8f2', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '4ece38e9af3c6eba4e89cf96ca8fe82a96116bcb', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '6c93202ccab7729a523f51f816279df0e7e2f4d4', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'cba71216aa8aa01098b2f9c6295341b9d501372d', slot: "title" }, this._translations.error), h("div", { key: '3d457cfb00cc11208c34a121af6c5592d9540a04', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: 'f782a94f3e4ea2252b92e6aa1c65d565dcf95b7b', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '57d71698daf2f5cfbb2bb971b8c062baa797d279', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: 'c132ab8aceff09560f4e8300c6de03f9034443d9', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '840e834c1c6597d0bd3841fde4f1014de9e6604b', slot: "title" }, this._translations.error), h("div", { key: 'b8348d5cd55a298dbe42e4ccffb9f951bac1f8e1', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '21f2a585a214dcdac6bec1b313025a5bf48317c4' }, h("calcite-shell", { key: '3b0d3506ea75937c6627f20b3f468b28c00dbd22', "content-behind": true }, this._getReporter()))));
+        return (h(Host, { key: '03d613fe8f275852672fb546ceb4449fb82580c0' }, this._reportSubmitted && h("calcite-alert", { key: '969a66978549d6993b1e4fce87bbd2387858cdf8', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '60ae42443e09a97d97a46bba07b1ea010b382348', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: 'bf6c346cf976a4b84da3553230239665c712e2b6', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '1f9560e18d802a15bcb3e8ea9f05837a4a6fb8aa', slot: "title" }, this._translations.error), h("div", { key: '1f5ef09cbf94996eeb5783211ed1542a5cf53e93', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '15538e8faabbec476d7586dcc4152b422404c23f', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '925a9a243a79dfb66554a9a51f24396ca2b71c98', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '62c63d3b1c51bdc7879e815e2b2f4d3c4d039c4c', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '971f07331a8689b859f2cedc96ba3589a3ad3e16', slot: "title" }, this._translations.error), h("div", { key: '1627f1ab5c4a4aceb7bdb70471aed6b8ca6d67b8', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: 'b3257ba523357b4444ce7da7d13a86f6b71185d9' }, h("calcite-shell", { key: '35fc5a814528bb0acc22919839719bb4349e9ae4', "content-behind": true }, this._getReporter()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -660,7 +664,7 @@ const CrowdsourceReporter = class {
      * @protected
      */
     getLayerListFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader, selected: this._flowItems[this._flowItems.length - 1] === "layer-list" }, this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
             h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", layers: this._editableLayerIds?.length > 0 ? this._editableLayerIds : this._layers, locale: this.locale, mapView: this.mapView, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
     }
     /**
@@ -672,7 +676,7 @@ const CrowdsourceReporter = class {
         const onlyReportingLayers = this.reportingOptions ? Object.keys(this.reportingOptions).filter((layerId) => {
             return this.reportingOptions[layerId].visible && this.reportingOptions[layerId].reporting && this._layerItemsHash[layerId] && this._layerItemsHash[layerId].supportsAdd;
         }) : [];
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), h("layer-list", { class: "height-full", layers: onlyReportingLayers, locale: this.locale, mapView: this.mapView, onLayerSelect: this.navigateToCreateFeature.bind(this), showFeatureCount: false, showNextIcon: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "reporting-layer-list" }, h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), h("layer-list", { class: "height-full", layers: onlyReportingLayers, locale: this.locale, mapView: this.mapView, onLayerSelect: this.navigateToCreateFeature.bind(this), showFeatureCount: false, showNextIcon: false }))));
     }
     /**
      * Get Feature create form of the selected feature layer
@@ -680,7 +684,7 @@ const CrowdsourceReporter = class {
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("create-feature", { customizeSubmit: true, enableSearch: true, floorLevel: this.floorLevel, formElements: this._formElements.find(elm => elm.id === this._selectedLayerId), isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onModeChanged: this.backFromCreateFeaturePanel.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-create" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("create-feature", { customizeSubmit: true, enableSearch: true, floorLevel: this.floorLevel, formElements: this._formElements.find(elm => elm.id === this._selectedLayerId), isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onModeChanged: this.backFromCreateFeaturePanel.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
     }
     /**
      * Update the progress bar status when editor panel changes
@@ -761,7 +765,7 @@ const CrowdsourceReporter = class {
         void this.updateNonVisibleLayersOnMap(false);
         await this.navigateToHomePage();
         this._reportSubmitted = true;
-        this._updatedProgressBarStatus = 0.25;
+        this._updatedProgressBarStatus = 25;
         //on report submit form will be closed, so update the form state
         if (this._showFullPanel) {
             this.updatePanelState(this._sidePanelCollapsed, false);
@@ -908,7 +912,7 @@ const CrowdsourceReporter = class {
      * @protected
      */
     backFromSelectedPanel() {
-        this._updatedProgressBarStatus = 0.25;
+        this._updatedProgressBarStatus = 25;
         const updatedFlowItems = [...this._flowItems];
         // when back from comment details or add comment page don't clear the highlighted feature of map
         if (!(updatedFlowItems[updatedFlowItems.length - 1] === 'comment-details' ||
@@ -979,10 +983,10 @@ const CrowdsourceReporter = class {
         this._showLoadingIndicator = isLoading;
     }
     /**
-   * On Feature details change update the Layer title and the current selected layer id
-   * @param evt Event hold the details of current feature graphic from the feature-details
-   * @protected
-   */
+     * On Feature details change update the Layer title and the current selected layer id
+     * @param evt Event hold the details of current feature graphic from the feature-details
+     * @protected
+     */
     async selectionChanged(evt) {
         void this.updatingFeatureDetails(true);
         await this.setCurrentFeature(evt.detail.selectedFeature[0]);
@@ -1016,7 +1020,7 @@ const CrowdsourceReporter = class {
     getFeatureListFlowItem(layerId, layerName) {
         const canCreateReports = this._getLayersConfig(this._selectedLayerId)?.reporting && this._layerItemsHash[this._selectedLayerId].supportsAdd;
         const showFilterIcon = this._currentLayerExpressions?.length > 0;
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this._toggleSort(), h("calcite-action", { icon: "sort-ascending-arrow", id: "sort-popover", slot: "header-actions-end", text: this._translations.sort, title: this._translations.sort }), showFilterIcon && h("calcite-action", { icon: "filter", indicator: this._filterActive, onClick: () => { this._flowItems = [...this._flowItems, "filter-panel"]; }, slot: "header-actions-end", text: this._translations.filter, title: this._translations.filter }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && canCreateReports &&
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-list" }, this._toggleSort(), h("calcite-action", { icon: "sort-ascending-arrow", id: "sort-popover", slot: "header-actions-end", text: this._translations.sort, title: this._translations.sort }), showFilterIcon && h("calcite-action", { icon: "filter", indicator: this._filterActive, onClick: () => { this._flowItems = [...this._flowItems, "filter-panel"]; }, slot: "header-actions-end", text: this._translations.filter, title: this._translations.filter }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && canCreateReports &&
             h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", highlightOnHover: true, locale: this.locale, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, ref: el => this._featureList = el, reportingOptions: this.reportingOptions, selectedLayerId: layerId, showFeatureSymbol: this.showFeatureSymbol, sortingInfo: this._updatedSorting }))));
     }
     /**
@@ -1025,7 +1029,7 @@ const CrowdsourceReporter = class {
      * @protected
      */
     getFilterPanel() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName), loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromFilterPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", disabled: !this._filterActive, onClick: this.resetFilterList.bind(this), width: "full" }, this._translations.resetFilter), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromFilterPanel.bind(this), width: "full" }, this._translations.close))), h("calcite-panel", { "full-height": true }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtnOnClick: () => undefined, comboboxOverlayPositioning: "fixed", layerExpressions: this._currentLayerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(this._filterList.filterCount > 0), ref: (el) => this._filterList = el, resetBtn: false, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName), loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromFilterPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "filter-panel" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", disabled: !this._filterActive, onClick: this.resetFilterList.bind(this), width: "full" }, this._translations.resetFilter), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromFilterPanel.bind(this), width: "full" }, this._translations.close))), h("calcite-panel", { "full-height": true }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtnOnClick: () => undefined, comboboxOverlayPositioning: "fixed", layerExpressions: this._currentLayerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(this._filterList.filterCount > 0), ref: (el) => this._filterList = el, resetBtn: false, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
     }
     /**
      * Returns the calcite-flow item for feature details
@@ -1033,7 +1037,7 @@ const CrowdsourceReporter = class {
      */
     getFeatureDetailsFlowItem() {
         const showCommentBtn = this._getLayersConfig(this._selectedLayerId)?.comment && this._selectedLayer.relationships.length > 0 && this._relatedTable;
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "share-node", embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, removePopoverOffset: true, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, h("feature-details", { class: 'full-height', graphics: this._selectedFeature, layerItemsHash: this._layerItemsHash, locale: this.locale, mapView: this.mapView, onAddComment: this.showAddCommentsPanel.bind(this), onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLikeOrDislikeClicked: () => { void this._featureList.refresh(true); }, onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions, showUserImageInCommentsList: this.showUserImageInCommentsList }), showCommentBtn &&
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-details" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "share-node", embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, removePopoverOffset: true, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, h("feature-details", { class: 'full-height', graphics: this._selectedFeature, layerItemsHash: this._layerItemsHash, locale: this.locale, mapView: this.mapView, onAddComment: this.showAddCommentsPanel.bind(this), onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLikeOrDislikeClicked: () => { void this._featureList.refresh(true); }, onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions, showFullCommentTitle: this.showFullCommentTitle, showUserImageInCommentsList: this.showUserImageInCommentsList }), showCommentBtn &&
             h("calcite-button", { appearance: "solid", onClick: this.showAddCommentsPanel.bind(this), slot: "footer", width: "full" }, this.commentButtonText || this._translations.comment))));
     }
     /**
@@ -1049,14 +1053,14 @@ const CrowdsourceReporter = class {
      * @returns Node
      */
     getCommentDetailsFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedRelatedFeature, highlightEnabled: false, isLoading: false, isMobile: false, locale: this.locale, mapView: this.mapView, paginationEnabled: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "comment-details" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedRelatedFeature, highlightEnabled: false, isLoading: false, isMobile: false, locale: this.locale, mapView: this.mapView, paginationEnabled: false }))));
     }
     /**
      * Returns the calcite-flow item for add comment
      * @returns Node
      */
     getAddCommentFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), h("calcite-panel", null, h("create-related-feature", { customizeSubmit: true, locale: this.locale, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onFormReady: this.onFormReady.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "add-comment" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), h("calcite-panel", null, h("create-related-feature", { customizeSubmit: true, locale: this.locale, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onFormReady: this.onFormReady.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
     }
     /**
      * Sets the selected features and updates the first feature as the current selected feature

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

@@ -17,7 +17,7 @@ import './restHelpersGet-a7fda344.js';
 import './update-ad0b88fa.js';
 import './interfaces-659e3836.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 {
@@ -95,6 +95,10 @@ const FeatureList = class {
      * IReportingOptions: Key options for reporting
      */
     reportingOptions;
+    /**
+     * boolean: When false popup title will shown in single line
+     */
+    showFullTitle = true;
     //--------------------------------------------------------------------------
     //
     //  State (internal)
@@ -112,6 +116,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.
@@ -157,6 +169,10 @@ const FeatureList = class {
      * HTMLCalcitePaginationElement: Calcite pagination element instance
      */
     _pagination;
+    /**
+     * HTMLCalciteListElement: Calcite List element instance
+     */
+    _calciteList;
     /**
      * string[]: Valid field types for like
      */
@@ -169,6 +185,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
@@ -218,6 +238,9 @@ const FeatureList = class {
             };
             await this.pageChanged(event);
         }
+        else if (this._searchExpression) {
+            await this._searchFullText();
+        }
         else {
             await this.initializeFeatureItems();
         }
@@ -249,6 +272,7 @@ const FeatureList = class {
         this._popupUtils = new PopupUtils();
         if (this.mapView && this.selectedLayerId) {
             this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
+            this._getFullTextSearchInfo();
         }
     }
     /**
@@ -261,9 +285,11 @@ const FeatureList = class {
      * Renders the component.
      */
     render() {
-        return (h("calcite-panel", { key: '6b6214a3dba7df7c2035203750d547945407ecde', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: '1b05d96de0b4d396b13f448311db76315e28b81b', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
-            h("calcite-notice", { key: 'abe755f0bc5c7ff064249159c3154c9ca1c27594', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '5a8ead1d47151cf088ae9e359052cf35129b09d3', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: 'cd7049462fb654dad0c4c05f127cf3e5d06bc5de', label: "", "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            h("div", { key: 'b65b1f491800e489790d79054affc0ddcd089d1f', class: "width-full", slot: "footer" }, 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 (h("calcite-panel", { key: '56599be334eec65be00681d415db28917133b0c1', "full-height": true, "full-width": true }, showSearch &&
+            h("calcite-input", { key: '6de9873f6b7ab961dffe1334d2fc20b4322d8ea8', class: "search", clearable: true, icon: "search", onCalciteInputChange: this._searchTextChanged.bind(this), placeholder: this._searchPlaceHolder, title: '', type: "search" }), this._isLoading && h("calcite-loader", { key: '4189b0d6c2a85116d529f5b7844c1f2d41657350', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
+            h("calcite-notice", { key: '7f2e8276ad5345e21667b2dedc7e23f5c34672f5', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '63d44ac906c8d5584aac2cfbeec4cf0962d61abe', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), 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 &&
+            h("div", { key: '288364bc505fe6bce8b1260dce5173163a795330', class: "width-full", slot: "footer" }, 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 }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -341,6 +367,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
@@ -494,11 +626,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 (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, this.showUserImageInList &&
             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 &&
-            h("div", { class: 'feature-symbol', ref: (el) => el && el.replaceChildren(featureSymbol), slot: "content-start" }), h("div", { class: `${popupTitleClass} ${popupTitlePaddingClass}`, slot: "content-start" }, popupTitle), this._likeFieldAvailable &&
+            h("div", { class: 'feature-symbol', ref: (el) => el && el.replaceChildren(featureSymbol), slot: "content-start" }), h("div", { class: `popup-title ${popupTitleClass}`, slot: "content-start", style: { maxWidth: this.textSize === 'large' ? 'none' : `${width}px` } }, popupTitle), this._likeFieldAvailable &&
             h("div", { class: "like-container", id: oId.concat("like"), slot: "content-end" }, h("span", null, this._abbreviatedLikeCount), h("calcite-icon", { icon: "thumbs-up", scale: 's' }), h("calcite-tooltip", { overlayPositioning: "fixed", placement: "top", "reference-element": oId.concat("like") }, formattedLikeCount)), h("calcite-icon", { flipRtl: true, icon: "chevron-right", scale: "s", slot: "content-end" })));
     }
     /**

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

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