@esri/solutions-components 0.11.15 → 0.11.16

package/dist/collection/components/refine-selection/refine-selection.js

@@ -173,7 +173,7 @@ export class RefineSelection {
      */
     render() {
         const layerPickerClass = this._enabledLayerIds.length > 1 ? "display-block" : "display-none";
-        return (h(Host, { key: '01d9d6eb8f212f458bd6651d8e874bb108a6e773' }, h("div", { key: 'eb9fb249f89a671e9c67fb83db2203713814d72b', class: layerPickerClass + " padding-top-sides-1" }, h("div", { key: 'a5991f6da0f888e85e1cf88967c8c8aa12790575', class: "display-flex" }, h("calcite-label", { key: 'e8f31c546ceae8a02ed1d49ec8ae9f1f6fb78022', class: "font-bold width-full label-margin-0" }, h("div", { key: 'd4be658063d140f56356ce7b694841e9bc89a1b3', class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { key: '6d3ff8cbb1bcc62aca444eb4d030a236466adfac', class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { key: '1e9dad9f2c8ff2ce130f79c37d804d4bd8162a96', enabledLayerIds: this._enabledLayerIds, locale: this.locale, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedIds: [this._refineLayer.layer.id], showTables: false })), h("calcite-popover", { key: 'b4f838f56f88cff5973d8f5fd3c54b7f0d7c72b3', closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { key: 'fcbdf68353eabcf090e60d8a239f07230f4bb37c', class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { key: '33891e7ff61cdd224a8652bae3e9d55256eb44a0', class: "padding-1" }, h("div", { key: 'a291edada53ed10197bec5fcc53d999f79042203', class: "padding-bottom-1" }, h("calcite-segmented-control", { key: '0c84665a705a12d1e51fb470e604bc52d8ac7543', class: "w-100", width: "full" }, h("calcite-segmented-control-item", { key: 'e50d78508164a4ddf2a5da9def80a19a4562cb8c', checked: this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { key: 'b48811b1a2e56942965c944ff1eb35e10edd1db8', class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { key: 'dff6a191781fc4c6c3bde6fb3290da0ce96dea84', checked: !this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { key: '6dd86784de32c25ffbe8c5e61847cb506a122b5e', class: "font-weight-500" }, this._translations.remove)))), h("div", { key: 'd39ce91248e4eb7867049bfe9d5537a74f96a0d2' }, h("map-draw-tools", { key: '24a30d188807bf40749def362c21048ee92bb81b', active: true, drawMode: EDrawMode.REFINE, locale: this.locale, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: this._refineSelectionSet?.redoStack.length > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: this._refineSelectionSet?.undoStack.length > 0 })), h("br", { key: '7d28ea63ea92de45bd457f0aef93d99deea62553' }), (h("calcite-list", { key: '9b3c34304632ccf9253eec71e955502a0be48a13', class: "list-border", label: "" }, this._getRefineSelectionSetList())))));
+        return (h(Host, { key: '8220100e14abd8339947a74df2d8072d06fb2a25' }, h("div", { key: '1d7426778d638f347b563bfd29478fae7598e2dd', class: layerPickerClass + " padding-top-sides-1" }, h("div", { key: 'cfb649989c24c403bde7d358794933f8f7959bb8', class: "display-flex" }, h("calcite-label", { key: 'dce85bbfa526941a0fb46c1aeba57f4b028948ef', class: "font-bold width-full label-margin-0" }, h("div", { key: '86c19198643381fd99681c53bf0b2b5e66ecf7dc', class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { key: '392022947cd9f53b4b83895992c5b0b32e56fb06', class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { key: 'd0946a46e7a79fc613b9eb9aa3e6f896c12bef92', enabledLayerIds: this._enabledLayerIds, locale: this.locale, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedIds: [this._refineLayer.layer.id], showTables: false })), h("calcite-popover", { key: '3b733fd5e7ceb011446112e65aa1ee1b0c5899c7', closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { key: '2076104710f4fbdd1de1f31b552b17749ebf9239', class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { key: '040efdfd6a269244790101cc0712a1cb0bac40d8', class: "padding-1" }, h("div", { key: 'be963f2cb157fda55980166359e53139a5713405', class: "padding-bottom-1" }, h("calcite-segmented-control", { key: '459fa98e8852ea96afd0c9ab5864787f80ff6559', class: "w-100", width: "full" }, h("calcite-segmented-control-item", { key: '965fa774838ecd3292c19a430cdbdfc7b44c82b2', checked: this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { key: 'e0b6fddbded9c78fa98674709ff03f050fd47300', class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { key: '56e453183fc559ddbce5b041095fad5a8d6262ab', checked: !this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { key: '13593da569557fa57822c98e12a5654cade219a1', class: "font-weight-500" }, this._translations.remove)))), h("div", { key: '029fec164d9475274294a1d740a434cab2535cdc' }, h("map-draw-tools", { key: 'a212c5d21b2b1cdf7ba284a95dacaf83cf0180c9', active: true, drawMode: EDrawMode.REFINE, locale: this.locale, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: this._refineSelectionSet?.redoStack.length > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: this._refineSelectionSet?.undoStack.length > 0 })), h("br", { key: '352a0523461cfeeae3bae09ae1cc6f8fa759616b' }), (h("calcite-list", { key: '948c7f0aa24d827d29cbc1c2c702deb52134e771', class: "list-border", label: "" }, this._getRefineSelectionSetList())))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -108,11 +108,11 @@ export class SolutionConfiguration {
         const solutionData = state.getStoreInfo("solutionData");
         this._solutionVariables = JSON.stringify(utils.getSolutionVariables(solutionData.templates, this._translations));
         this._organizationVariables = JSON.stringify(utils.getOrganizationVariables(this._translations));
-        return (h(Host, { key: 'f35438d2bb88a8d3bc41d33af02e2fe36e2471de' }, !this._solutionIsLoaded
+        return (h(Host, { key: 'dd68b412fe4fbf053491eb1a7ec6a3c1703ceb17' }, !this._solutionIsLoaded
             ? h("calcite-loader", { label: '' })
-            : null, h("div", { key: 'cb9773d8ab59089cde1de594960e0d978ec6b1fb', class: "configuration-container" }, h("div", { key: 'b72462547e2930c170552816ea6bd1640326e67e', class: "configuration" }, h("calcite-tabs", { key: '4d2f673c9463a6ad40a64e9dd4ea7771be1658cf', class: "config-tabs" }, h("calcite-tab-nav", { key: '850511fd6a627da0117e8b93451fe5da0ef7ad8c', slot: "tab-nav" }, h("calcite-tab-title", { key: '8b3db2665846b1529c4fcd4829516b854705028b' }, this._translations.definitionTab), hasServices ?
+            : null, h("div", { key: 'b36eee569f4ca90453f0c3eca215576f8e98b95a', class: "configuration-container" }, h("div", { key: '653f75751fc960cce09cbb653504600dbe6f01c7', class: "configuration" }, h("calcite-tabs", { key: 'de3dd520000f03cada90e7bb7964583e62adf229', class: "config-tabs" }, h("calcite-tab-nav", { key: '846d714f94a2476314f7843682483e4cda407a7c', slot: "tab-nav" }, h("calcite-tab-title", { key: '7146aced1bd7dd4928e2bd6c49d52ef3003aabc1' }, this._translations.definitionTab), hasServices ?
             h("calcite-tab-title", null, this._translations.spatialReferenceTab) :
-            null), h("calcite-tab", { key: '6298bbcc14066f2ffce75076718a5b802bc7dcb1', class: "config-tab", selected: true }, h("div", { key: '6876e11323dce264ead965243d476abff1e0d3f4', class: "config-solution" }, h("div", { key: '011f8114fa18676728410ef45eccdec512c81f93', class: this._treeOpen ? "config-inventory" : "config-inventory-hide" }, h("solution-contents", { id: "configInventory", key: `${this.solutionItemId}-contents`, ref: (el) => (this._solutionContentsComponent = el) })), h("calcite-button", { key: 'e38b67164540f2a0bd8aa7ceb19b1944e6c30a49', appearance: "transparent", class: "collapse-btn", "icon-start": this._treeOpen ? "chevrons-left" : "chevrons-right", id: "collapse-vars", onClick: () => this._toggleTree(), scale: "s", title: this._treeOpen ? this._translations.collapse : this._translations.expand }), h("div", { key: '26e352cfd8e3f701bac219afc10e8f33f22042c0', class: "config-item" }, h("solution-item", { authentication: this.authentication, "item-id": this._currentEditItemId, key: `${this.solutionItemId}-item`, locale: this.locale, "organization-variables": this._organizationVariables, "solution-item-id": this.solutionItemId, "solution-variables": this._solutionVariables })))), hasServices
+            null), h("calcite-tab", { key: '5b8672dd8089a21a49139c2bedc4a9ab91d2b2e2', class: "config-tab", selected: true }, h("div", { key: '1bf9bf03f6418212807afc5657e807faa45557d6', class: "config-solution" }, h("div", { key: '718a6a90a39844562d547e4e08abc4b133945a68', class: this._treeOpen ? "config-inventory" : "config-inventory-hide" }, h("solution-contents", { id: "configInventory", key: `${this.solutionItemId}-contents`, ref: (el) => (this._solutionContentsComponent = el) })), h("calcite-button", { key: '25039c4b3c3e97d587fd3d3aec4791f53875d9bf', appearance: "transparent", class: "collapse-btn", "icon-start": this._treeOpen ? "chevrons-left" : "chevrons-right", id: "collapse-vars", onClick: () => this._toggleTree(), scale: "s", title: this._treeOpen ? this._translations.collapse : this._translations.expand }), h("div", { key: '5970c8ed59c6cb9fa02c574c3c1a3949940dfec6', class: "config-item" }, h("solution-item", { authentication: this.authentication, "item-id": this._currentEditItemId, key: `${this.solutionItemId}-item`, locale: this.locale, "organization-variables": this._organizationVariables, "solution-item-id": this.solutionItemId, "solution-variables": this._solutionVariables })))), hasServices
             ? h("calcite-tab", { class: "config-tab" }, h("div", { class: "config-solution" }, h("solution-spatial-ref", { enableDefault: !!spatialReferenceInfo.default, enabled: spatialReferenceInfo?.enabled, featureServices: state.getStoreInfo("featureServices").map(fs => fs.name), id: "configure-solution-spatial-ref", key: `${this.solutionItemId}-spatial-ref`, locale: this.locale })))
             : null)))));
     }

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

@@ -56,7 +56,7 @@ export class SolutionContents {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '37e448ea1e2f90ba78d409253ac92443309fcb10' }, h("calcite-tree", { key: '57eba99bbbabaf2b46817d1faab158b915ecd9a7' }, this.renderHierarchy(this.templateHierarchy))));
+        return (h(Host, { key: 'cf80f637e998eda76162eb1cf3fe94dfb2aeae3e' }, h("calcite-tree", { key: '3bb27819fff1f63b28ed70c360fe8f7a63619d3c' }, this.renderHierarchy(this.templateHierarchy))));
     }
     renderHierarchy(objs) {
         return objs.map((obj) => {

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

@@ -85,7 +85,7 @@ export class SolutionItem {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '3985a0dbb1f383a629cb5dcbc7be3a3e58ee2c7f' }, h("div", { key: 'd75f55817d693dea817bfa2c5bdf17179aef115c', class: "configuration-container" }, h("div", { key: '3a5ba206e78d1c7db76dd4329296a4c155573de0', class: "configuration" }, this._showGroupTabs(this.itemType === "Group"), this._showItemTabs(this.itemType !== "Group")))));
+        return (h(Host, { key: '8213c164dbfc2f9d897bcd2dbb732d1029e7bc9a' }, h("div", { key: '252091fa803626400a22295d6a9d148d207c84e6', class: "configuration-container" }, h("div", { key: 'b30bcfd2bec082f8248584749e6d98a2c9331bdf', class: "configuration" }, this._showGroupTabs(this.itemType === "Group"), this._showItemTabs(this.itemType !== "Group")))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -125,6 +125,34 @@ export class SolutionItemAccordion {
     //  Methods (public)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Deselect all items in the accordion.
+     * Only applies when selectionMode is "single" or "single-persist".
+     */
+    async deselectAll() {
+        if (this.listSelectionMode === "single" || this.listSelectionMode === "single-persist") {
+            const items = this.el.shadowRoot.querySelectorAll("calcite-list-item");
+            items.forEach(item => {
+                item.selected = false;
+            });
+        }
+    }
+    /**
+     * Selects an item in the accordion.
+     * Only applies when selectionMode is "single" or "single-persist".
+     *
+     * @param id the id of the item to select
+     */
+    async selectItem(id) {
+        if (this.listSelectionMode === "single" || this.listSelectionMode === "single-persist") {
+            const items = this.el.shadowRoot.querySelectorAll("calcite-list-item");
+            items.forEach(item => {
+                if (item.id === id) {
+                    item.selected = true;
+                }
+            });
+        }
+    }
     //--------------------------------------------------------------------------
     //
     //  Events (public)
@@ -149,7 +177,7 @@ export class SolutionItemAccordion {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '705d8a65c8b27eb2724ca73c7d092432ff680149' }, this._getAccordion()));
+        return (h(Host, { key: 'c9282fff8ba638f6a997850ba38b473f34221db3' }, this._getAccordion()));
     }
     //--------------------------------------------------------------------------
     //
@@ -234,7 +262,10 @@ export class SolutionItemAccordion {
      * @protected
      */
     _getListItem(templateInfo) {
-        return (h("calcite-list-item", { description: templateInfo.snippet, id: templateInfo.id, label: templateInfo.title, onCalciteListItemSelect: () => { this._deselectOthers(templateInfo.id); this.solutionItemSelect.emit({ itemId: templateInfo.id, selected: true }); }, onMouseEnter: () => this.solutionItemHover.emit({ itemId: templateInfo.id, entering: true }), onMouseLeave: () => this.solutionItemHover.emit({ itemId: templateInfo.id, entering: false }), value: templateInfo.id }, templateInfo.url
+        return (h("calcite-list-item", { description: templateInfo.snippet, id: templateInfo.id, label: templateInfo.title, onCalciteListItemSelect: () => {
+                this._deselectOthers(templateInfo.id);
+                this.solutionItemSelect.emit({ itemId: templateInfo.id, selected: true });
+            }, onMouseEnter: () => this.solutionItemHover.emit({ itemId: templateInfo.id, entering: true }), onMouseLeave: () => this.solutionItemHover.emit({ itemId: templateInfo.id, entering: false }), value: templateInfo.id }, templateInfo.url
             ? h("calcite-action", { icon: "launch", onClick: () => window.open(templateInfo.url, "_blank"), slot: "actions-end", text: this._translations?.openDetails?.replace("{{solutionTitle}}", templateInfo.title) })
             : null));
     }
@@ -480,6 +511,51 @@ export class SolutionItemAccordion {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "deselectAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Deselect all items in the accordion.\r\nOnly applies when selectionMode is \"single\" or \"single-persist\".",
+                    "tags": []
+                }
+            },
+            "selectItem": {
+                "complexType": {
+                    "signature": "(id: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": "the id of the item to select"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Selects an item in the accordion.\r\nOnly applies when selectionMode is \"single\" or \"single-persist\".",
+                    "tags": [{
+                            "name": "param",
+                            "text": "id the id of the item to select"
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{

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

@@ -77,7 +77,7 @@ export class SolutionItemDetails {
      * 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();

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

@@ -52,7 +52,7 @@ export class SolutionItemIcon {
      * Renders the component.
      */
     render() {
-        return h("div", { key: 'e14a2bed4b4c74b5959d7b12f73f9c8a1b374e6d', title: this.type }, h("img", { key: 'd7a7eccc3361946b2641e8499af21b199792a223', class: "item-type-icon item-type-icon-margin", height: "16", src: this._getIconUrl(this.type, this.typeKeywords), width: "16" }));
+        return h("div", { key: 'cc13e7bfc0a58ca1727651c3c31b0dc4e50f716a', title: this.type }, h("img", { key: '76808f6a3ced35a15626d4a4d30e7a2b8185d8d6', class: "item-type-icon item-type-icon-margin", height: "16", src: this._getIconUrl(this.type, this.typeKeywords), width: "16" }));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -73,7 +73,7 @@ export class SolutionItemSharing {
      * 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))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/solution-organization-variables/solution-organization-variables.js

@@ -71,7 +71,7 @@ export class SolutionOrganizationVariables {
      * 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)))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -85,7 +85,7 @@ export class SolutionResourceItem {
      */
     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()))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/solution-spatial-ref/solution-spatial-ref.js

@@ -88,7 +88,7 @@ export class SolutionSpatialRef {
     }
     render() {
         this._updateUIFromStore();
-        return (h(Host, { key: 'b137587cf67e4f3bd498166c2c482894dd94e66d' }, h("label", { key: '728399a596edc07757ec9c34cfe149c8ae65da3f', class: "switch-label" }, h("calcite-switch", { key: 'bd3310bae9296b86bb0f77474d200c430b974196', checked: this.enabled, class: "spatial-ref-switch", onCalciteSwitchChange: (event) => this.enabled = event.target.checked, scale: "m" }), this._translations.enableSpatialReference), h("br", { key: '7f247a248515aff35d96125e1813ca40d1935c07' }), h("div", { key: 'a2415c6cbb9cca553544106b24bb7268c4ff5bd2', class: "spatial-ref-component", id: "spatialRefDefn" }, this._renderFeatureServicesList(this.featureServices)), h("label", { key: '46fccf4ef6cb409d1a74f62832d7fabd9f88cf44', class: "switch-label spatial-ref-component" }, h("calcite-switch", { key: '74e3afca88b1770421be663ec0075ade8faf7a64', checked: this.enableDefault, class: "spatial-ref-switch", disabled: !this.enabled, onCalciteSwitchChange: (event) => this.enableDefault = event.target.checked, scale: "m" }), this._translations.enableDefaultSpatialReference)));
+        return (h(Host, { key: '7f273e4ac344e1ee0caf40e7d1b7f939ecabda20' }, h("label", { key: '06de012379cbfc355a9ace954b1dffffa9ce8c83', class: "switch-label" }, h("calcite-switch", { key: '81660a69b2ac46824e2b929e13362f5ab9260c54', checked: this.enabled, class: "spatial-ref-switch", onCalciteSwitchChange: (event) => this.enabled = event.target.checked, scale: "m" }), this._translations.enableSpatialReference), h("br", { key: '361d2d822ddad721842b806e4ee1e04ff313a19b' }), h("div", { key: 'a211f2f6f55191a9ae9b4e94eae7a998b7bc8e35', class: "spatial-ref-component", id: "spatialRefDefn" }, this._renderFeatureServicesList(this.featureServices)), h("label", { key: '9fc52be401af098888688636168b6742e92ce939', class: "switch-label spatial-ref-component" }, h("calcite-switch", { key: '138644a57bd5c159e9f7f219f8956f0ed1af5bf1', checked: this.enableDefault, class: "spatial-ref-switch", disabled: !this.enabled, onCalciteSwitchChange: (event) => this.enableDefault = event.target.checked, scale: "m" }), this._translations.enableDefaultSpatialReference)));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/solution-template-data/solution-template-data.js

@@ -121,7 +121,7 @@ export class SolutionTemplateData {
      * 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 }))))))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -71,7 +71,7 @@ export class SolutionVariables {
      * 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)))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/spatial-ref/spatial-ref.js

@@ -96,7 +96,7 @@ export class SpatialRef {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '16bd7d2278e69fd6f79c3906ee3cb8866cf026e6' }, h("div", { key: '5db2ed6520f135149117b857d78e53fae48b2502' }, h("calcite-input", { key: '6a4803ea39e61df9bbc21516ab208a778437218e', disabled: this.disabled, id: "calcite-sr-search", onKeyUp: (evt) => this._searchInputKeyDown(evt), placeholder: this._translations.spatialReferencePlaceholder }), h("calcite-tree", { key: '7032668245ac6c2f240d05f9df8488fdcc75a87a', id: "calcite-sr-tree", slot: "children" }, this._getTreeContent()))));
+        return (h(Host, { key: 'e930b1eb003c8ae7710acecd0f92b6eb3461f32f' }, h("div", { key: '384c508cfc167a91c36b7341085114f78b68c5bb' }, h("calcite-input", { key: '4952f3f53985df9f6ee92c339ad8c3c77bcb1cdf', disabled: this.disabled, id: "calcite-sr-search", onKeyUp: (evt) => this._searchInputKeyDown(evt), placeholder: this._translations.spatialReferencePlaceholder }), h("calcite-tree", { key: '5369ae084bba9ba35bdf41afdeb48d7b4105d395', id: "calcite-sr-tree", slot: "children" }, this._getTreeContent()))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/demos/crowdsource-reporter.html

@@ -276,6 +276,7 @@
         demo.showUserImageInCommentsList = true;
         demo.showFeatureSymbol = true;
         demo.showMyReportsOnly = false;
+        demo.showFullCommentTitle = true;
       });
 
       function togglePanel(evt) {

package/dist/collection/demos/solution-item-accordion.html

@@ -501,11 +501,22 @@
       }];
 
     }
+
+    function selectItem() {
+      var accordion = document.getElementById("demo");
+      accordion.selectItem("07d6ef318e6d4a5fa06768e33c8c199b");
+    }
+
+    function deselectAll() {
+      var accordion = document.getElementById("demo");
+      accordion.deselectAll();
+    }
   </script>
 </head>
 
 <body onload="addValues()">
-  <solution-item-accordion id="demo" class="main column"/>
+  <button onclick="selectItem()">Select Adopt-A-Catch Basis Web Map</button> <button onclick="deselectAll()">Deselect all</button>
+  <solution-item-accordion id="demo" class="main column" list-selection-mode="single"/>
 </body>
 
 </html>

package/dist/components/create-feature2.js

@@ -464,7 +464,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         //Add handle to watch featureTemplatesViewModel ready state and then start the creation
         const handle = this.reactiveUtils.watch(() => this._editor.viewModel.featureTemplatesViewModel.state, (state) => {
             if (state === 'ready' && this._editor.viewModel?.activeWorkflow?.type !== "create-features") {
-                this.progressStatus.emit(0.5);
+                this.progressStatus.emit(50);
                 this._editorLoading = true;
             }
         });
@@ -478,7 +478,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
                     void this._setFloorLevel(this.floorLevel);
                 }, 50);
                 this._currentPage = 'featureForm';
-                this.progressStatus.emit(1);
+                this.progressStatus.emit(100);
                 this.drawComplete.emit();
             }
         });
@@ -505,11 +505,11 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         await this.hideEditorsElements();
         return new Promise((resolve, reject) => {
             if (this._editor.viewModel.featureTemplatesViewModel.items?.length) {
-                const items = this._editor.viewModel.featureTemplatesViewModel.items[0].get("items");
+                const items = this._editor.viewModel.featureTemplatesViewModel.items[0].items;
                 //once the feature template is selected handle the event for formSubmit and sketch complete
                 //also, hide the headers and footer in the editor as we will be showing our own submit and cancel button
                 this._editor.viewModel.featureTemplatesViewModel.on('select', () => {
-                    this.progressStatus.emit(0.75);
+                    this.progressStatus.emit(75);
                     setTimeout(() => {
                         //hides the header and footer elements in editor widget
                         this.hideEditorsElements().then(() => {
@@ -702,9 +702,8 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
             this._isSubmitBtnClicked = false;
             return;
         }
-        //Submit only when valid attributes
         //emit success or fail based on the result
-        if (evt.valid.length && this._isSubmitBtnClicked) {
+        if (this._isSubmitBtnClicked) {
             this._isSubmitBtnClicked = false;
             try {
                 await this._editor.activeWorkflow.commit();

package/dist/components/crowdsource-reporter.js

@@ -171,6 +171,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * string: selected floor level
      */
     floorLevel;
+    /**
+     * boolean: When false comment will shown in single line in the comments list
+     */
+    showFullCommentTitle = true;
     //--------------------------------------------------------------------------
     //
     //  State (internal)
@@ -224,7 +228,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     /**
      * number: Show the updated progress bar status
      */
-    _updatedProgressBarStatus = 0.25;
+    _updatedProgressBarStatus = 25;
     /**
      * ISortingInfo: Sort the feature list depending on the sort field and order
      */
@@ -537,7 +541,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     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()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -671,7 +675,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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 }))));
     }
     /**
@@ -683,7 +687,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         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
@@ -691,7 +695,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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
@@ -772,7 +776,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         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);
@@ -919,7 +923,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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' ||
@@ -990,10 +994,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         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]);
@@ -1027,7 +1031,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     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 }))));
     }
     /**
@@ -1036,7 +1040,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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
@@ -1044,7 +1048,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     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))));
     }
     /**
@@ -1060,14 +1064,14 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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
@@ -1566,6 +1570,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "theme": [1],
         "zoomToScale": [2, "zoom-to-scale"],
         "floorLevel": [1, "floor-level"],
+        "showFullCommentTitle": [4, "show-full-comment-title"],
         "_featureCreationFailedErrorMsg": [32],
         "_filterActive": [32],
         "_flowItems": [32],