@esri/solutions-components 0.10.10 → 0.10.12

package/dist/components/create-feature2.js

@@ -8,7 +8,7 @@ import { l as loadModules } from './loadModules.js';
 import { a as getAllLayers, g as getLayerOrTable } from './mapViewUtils.js';
 import { d as defineCustomElement$1 } from './loader.js';
 
-const createFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !important}.esri-editor__update-actions{display:none !important}.esri-editor__panel-content{padding-block:0px !important}.esri-editor .esri-item-list__group__header{display:none !important}.esri-editor__panel-content__section .esri-widget__heading{display:none !important}.esri-editor .esri-item-list__filter-container--sticky{padding-block:0px !important;padding-inline:10px !important}.search-widget{width:92% !important;margin:5px 0 20px 14px}.display-none{display:none !important}";
+const createFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !important}.esri-editor__update-actions{display:none !important}.esri-editor__panel-content{padding-block:0px !important}.esri-editor .esri-item-list__group__header{display:none !important}.esri-editor__panel-content__section .esri-widget__heading{display:none !important}.esri-editor .esri-item-list__filter-container--sticky{padding-block:0px !important;padding-inline:10px !important}.search-widget{width:92% !important;margin:5px 0 20px 14px}.display-none{display:none !important}.hide-map{height:1%;visibility:hidden}.show-map{padding:10px !important;position:absolute;bottom:0;width:calc(100% - 22px);height:50%}";
 const CreateFeatureStyle0 = createFeatureCss;
 
 const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature extends HTMLElement {
@@ -20,10 +20,12 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         this.drawComplete = createEvent(this, "drawComplete", 7);
         this.editingAttachment = createEvent(this, "editingAttachment", 7);
         this.progressStatus = createEvent(this, "progressStatus", 7);
+        this.modeChanged = createEvent(this, "modeChanged", 7);
         this.mapView = undefined;
         this.selectedLayerId = undefined;
         this.customizeSubmit = false;
         this.searchConfiguration = undefined;
+        this.isMobile = undefined;
         this._editorLoading = false;
         this._showSearchWidget = undefined;
     }
@@ -49,7 +51,17 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      */
     FeatureLayer;
     /**
-     * "esri/widgets/Search": https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html
+     * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
+     * The MapView instance
+     */
+    MapView;
+    /**
+     * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
+     * Updated map view instance
+     */
+    _updatedMapView;
+    /**
+     * esri/widgets/Search: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html
      * The Search instance
      */
     Search;
@@ -70,6 +82,10 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * HTMLDivElement: The node the editor will be added to
      */
     _container;
+    /**
+     * HTMLDivElement: The node for the map view
+     */
+    _mapViewContainer;
     /**
      * boolean: Flag to maintain form submission using submit button
      */
@@ -87,6 +103,13 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
             await this.init();
         });
     }
+    /**
+     * Called each time when isMobile prop is changed.
+     */
+    async isMobileHandler() {
+        // emit an event when mode is changed to back to the feature selection panel (to avoid multiple maps conflict)
+        this.modeChanged.emit();
+    }
     /**
      * When _editorLoading is true the container node will be hidden while starting the create workflow
      */
@@ -147,6 +170,10 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * Emitted on demand when editor panel changes
      */
     progressStatus;
+    /**
+     * Emitted on switched form mobile to desktop or vice versa
+     */
+    modeChanged;
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -172,7 +199,8 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         const showSearchWidget = this._showSearchWidget ? '' : 'display-none';
         const loaderClass = this._editorLoading ? "" : "display-none";
         const featureFormClass = this._editorLoading ? "display-none" : "";
-        return (h(Fragment, { key: 'a4ccd565a52a4cde4e76439629425f19bd4c222e' }, h("calcite-loader", { key: '30e8a3753985a734dd7cba461f26691b51f49ab9', class: loaderClass, label: "", scale: "s" }), h("div", { key: '0845f1fa85a21b578fd18200b43d4a77c34e6808', class: featureFormClass, id: "feature-form" }), h("div", { key: 'af74b6337f5a0dcfdbd552145c88eae5282a3307', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" })));
+        const mobileMapClass = this.isMobile ? "show-map" : "display-none";
+        return (h(Fragment, { key: '8adaa70257dfef9632f82be75dbdff572e2c39b3' }, h("calcite-loader", { key: 'e1a1aba8613d9cea1033513748dd21b7f27f9806', class: loaderClass, label: "", scale: "s" }), h("div", { key: 'e1089ffe60d079f345d358aac7ae1a6bd59a55df', class: featureFormClass, id: "feature-form" }), h("div", { key: '52274b6cd4c9f6886293f858caac9e572697da25', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" }), h("div", { key: '64108cfa3bb57f9739bfb4951352c5523c194761', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -184,8 +212,9 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      */
     async init() {
         if (this.mapView && this.selectedLayerId) {
-            await this.createEditorWidget();
-            await this.createSearchWidget();
+            this._updatedMapView = this.mapView;
+            // In mobile mode show the map in panel
+            await (this.isMobile ? this.createMobileMapView() : this._loadWidgets());
         }
     }
     /**
@@ -194,14 +223,41 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * @protected
      */
     async initModules() {
-        const [Editor, reactiveUtils, Search] = await loadModules([
+        const [Editor, reactiveUtils, Search, MapView] = await loadModules([
             "esri/widgets/Editor",
             "esri/core/reactiveUtils",
-            "esri/widgets/Search"
+            "esri/widgets/Search",
+            "esri/views/MapView"
         ]);
         this.Editor = Editor;
         this.reactiveUtils = reactiveUtils;
         this.Search = Search;
+        this.MapView = MapView;
+    }
+    /**
+     * updates the map view (in case of mobile)
+     * @protected
+     */
+    async createMobileMapView() {
+        this._mapViewContainer.classList.add('hide-map');
+        await new this.MapView({
+            map: this.mapView.map,
+            container: this._mapViewContainer
+        }).when((view) => {
+            // update the mapView and load all widgets
+            this._updatedMapView = view;
+            void this._loadWidgets();
+        }, (e) => {
+            console.log(e);
+        });
+    }
+    /**
+     * Loads the Editor and Search widgets
+     * @protected
+     */
+    async _loadWidgets() {
+        await this.createEditorWidget();
+        await this.createSearchWidget();
     }
     /**
      * Display editor widget to create the new feature
@@ -214,7 +270,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         const layerInfos = [];
         this._container = document.createElement("div");
         this._container?.classList.add("display-none");
-        const allMapLayers = await getAllLayers(this.mapView);
+        const allMapLayers = await getAllLayers(this._updatedMapView);
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
         allMapLayers.forEach(async (eachLayer) => {
             layerInfos.push({
@@ -227,14 +283,19 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         });
         this._editor = new this.Editor({
             allowedWorkflows: "create-features",
-            view: this.mapView,
+            view: this._updatedMapView,
             layerInfos: layerInfos,
             visibleElements: {
                 snappingControls: false
             },
             container: this._container
         });
-        this.el.appendChild(this._container);
+        if (this._mapViewContainer) {
+            this.el.insertBefore(this._container, this._mapViewContainer);
+        }
+        else {
+            this.el.appendChild(this._container);
+        }
         //Add handle to watch if attachments are added/edited
         const attachmentHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
             if (state === 'adding-attachment' || state === 'editing-attachment') {
@@ -260,6 +321,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         //Add handle to watch featureFormViewModel ready state
         const formHandle = this.reactiveUtils.watch(() => this._editor.viewModel.featureFormViewModel?.state, (state) => {
             if (state === 'ready') {
+                this._mapViewContainer?.classList?.replace("show-map", "hide-map");
                 this._showSearchWidget = false;
                 this.progressStatus.emit(1);
                 this.drawComplete.emit();
@@ -269,6 +331,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         //Add handle to watch editor viewmodel state and then show the search widget
         const createFeatureHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
             if (state === 'creating-features') {
+                this._mapViewContainer?.classList?.replace("hide-map", "show-map");
                 this._editorLoading = true;
                 this._showSearchWidget = true;
             }
@@ -280,6 +343,8 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * @protected
      */
     async startCreate() {
+        // hides the header elements on template picker page 
+        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");
@@ -316,10 +381,10 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      */
     async createSearchWidget() {
         let searchOptions = {
-            view: this.mapView,
+            view: this._updatedMapView,
         };
         if (this.searchConfiguration) {
-            const searchConfiguration = this._getSearchConfig(this.searchConfiguration, this.mapView);
+            const searchConfiguration = this._getSearchConfig(this.searchConfiguration, this._updatedMapView);
             searchOptions = {
                 ...searchConfiguration
             };
@@ -328,11 +393,11 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         this._search.container = 'search-widget-ref';
         this._search.popupEnabled = false;
         this._search.resultGraphicEnabled = false;
-        const layer = await getLayerOrTable(this.mapView, this.selectedLayerId);
+        const layer = await getLayerOrTable(this._updatedMapView, this.selectedLayerId);
         let pointGeometry = null;
         // on search get the geometry of the searched location and pass it in sketchViewModel and go to featureForm page
         this._search.on('search-complete', (e) => {
-            void this.mapView.goTo(e.results[0].results[0].extent);
+            void this._updatedMapView.goTo(e.results[0].results[0].extent);
             if (layer.geometryType === 'point') {
                 pointGeometry = e.results[0].results[0]?.feature.geometry;
             }
@@ -462,6 +527,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
     }
     static get watchers() { return {
         "mapView": ["mapViewWatchHandler"],
+        "isMobile": ["isMobileHandler"],
         "_editorLoading": ["_editorLoadingWatchHandler"]
     }; }
     static get style() { return CreateFeatureStyle0; }
@@ -470,12 +536,14 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         "selectedLayerId": [1, "selected-layer-id"],
         "customizeSubmit": [4, "customize-submit"],
         "searchConfiguration": [16],
+        "isMobile": [4, "is-mobile"],
         "_editorLoading": [32],
         "_showSearchWidget": [32],
         "close": [64],
         "submit": [64]
     }, undefined, {
         "mapView": ["mapViewWatchHandler"],
+        "isMobile": ["isMobileHandler"],
         "_editorLoading": ["_editorLoadingWatchHandler"]
     }]);
 function defineCustomElement() {

package/dist/components/create-related-feature2.js

@@ -158,7 +158,7 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
     }
     render() {
         const loaderClass = this._editorLoading ? "" : "display-none";
-        return (h("calcite-loader", { key: '5302b1166a175b0605604792cd40b9d3fbfabd02', class: loaderClass, label: "", scale: "s" }));
+        return (h("calcite-loader", { key: 'f78b296f74ee01aadc0443abd0bb78b68a7d9f3e', class: loaderClass, label: "", scale: "s" }));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -267,7 +267,16 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
      */
     makeAttributesForRelatedFeature(parentFeature, parentRelationship, childRelationship) {
         const parentKeyField = parentRelationship.keyField;
-        const parentKeyValue = parentFeature.getAttribute(parentKeyField);
+        let parentKeyValue;
+        if (parentFeature.attributes.hasOwnProperty(parentKeyField)) {
+            parentKeyValue = parentFeature.getAttribute(parentKeyField);
+        }
+        else if (parentFeature.attributes.hasOwnProperty(parentKeyField.toLowerCase())) {
+            parentKeyValue = parentFeature.getAttribute(parentKeyField.toLowerCase());
+        }
+        else if (parentFeature.attributes.hasOwnProperty(parentKeyField.toUpperCase())) {
+            parentKeyValue = parentFeature.getAttribute(parentKeyField.toUpperCase());
+        }
         let childKeyField = childRelationship.keyField;
         // get the field from table which name is same as childKeyField and use that field name as childKeyField
         const field = this.table.fields.find((field) => field.name.toLocaleLowerCase() === childKeyField.toLocaleLowerCase());

package/dist/components/crowdsource-manager.js

@@ -273,7 +273,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     render() {
         // only avoid border when we have a header color that is not white
         const borderClass = this.popupHeaderColor && this.popupHeaderColor !== "#FFFFFF" ? "border-width-0" : "";
-        return (h(Host, { key: '44041e4854d9d1da0f894c090e4b5455930b7a48' }, h("calcite-shell", { key: 'f11ed09226e43740677eefe01d42b70329b2485b', class: "position-relative" }, h("calcite-panel", { key: '6911478eaf00887e7b1578baba16989395dca190', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal()));
+        return (h(Host, { key: '805eb5daf8d5d7879e3404cd3c5145abf36469de' }, h("calcite-shell", { key: 'cb8a9037084e0ce4d32986a19a9aac9e6f407e1a', class: "position-relative" }, h("calcite-panel", { key: '176b6ef3c05414ec4a0582aac2d56deb21bd329f', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal()));
     }
     /**
      * Called after each render

package/dist/components/crowdsource-reporter.js

@@ -8,9 +8,10 @@ import { g as getLocaleComponentStrings } from './locale.js';
 import { l as loadModules } from './loadModules.js';
 import { g as getLayerOrTable, a as getAllLayers, f as getAllTables, c as getFeatureLayerView, h as highlightFeatures, d as getMapLayerHash } from './mapViewUtils.js';
 import { q as queryFeaturesByID } from './queryUtils.js';
-import { d as defineCustomElement$L } from './action.js';
-import { d as defineCustomElement$K } from './action-menu.js';
-import { d as defineCustomElement$J } from './alert.js';
+import { d as defineCustomElement$M } from './action.js';
+import { d as defineCustomElement$L } from './action-menu.js';
+import { d as defineCustomElement$K } from './alert.js';
+import { d as defineCustomElement$J } from './avatar.js';
 import { d as defineCustomElement$I } from './block.js';
 import { d as defineCustomElement$H } from './button.js';
 import { d as defineCustomElement$G } from './checkbox.js';
@@ -88,6 +89,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this.reportSubmittedMessage = undefined;
         this.searchConfiguration = undefined;
         this.showComments = undefined;
+        this.showUserImageInCommentsList = false;
         this.theme = "light";
         this.zoomToScale = undefined;
         this._featureCreationFailedErrorMsg = undefined;
@@ -220,9 +222,9 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     _layerItemsHash;
     /**
-     * boolean: when true allow map to be collapsed
+     * boolean: when true allow panel to show in full height
      */
-    isFormOpen;
+    _showFullPanel;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -232,7 +234,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * Called each time the mapView prop is changed.
      */
     async isMobileWatchHandler() {
-        this._sidePanelCollapsed = false;
+        this.updatePanelState(false, this._showFullPanel);
     }
     /**
      * Called each time the mapView prop is changed.
@@ -283,7 +285,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: 'e512e2693a586f8a6da7bcfa171feb60da26aee3' }, this._reportSubmitted && h("calcite-alert", { key: 'e5805ba948f1dc43eba2a78716af452cf71a8222', "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: '95b9accf1f09186c09c81cfb02a8939c4869ae8d', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: 'cab7f0e0f0d882612b4fa6f00799be9870aea6c5', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'b9453672d85e26cf7bdeae0923cd36020d259d49', slot: "title" }, this._translations.error), h("div", { key: '5084315857bc88b8f80aaa411ac3fd5e4493e918', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '62b7d9818913c3331ca9c8e4ed23c7f0c48a7946', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '5f18444fd375657db0c2a403cb453ead75536181', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '732f08960095fc9fefcc79fc8df387a5a4c3f781', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '16415430cf33ce53c0d49cab19dce2c3e34257d6', slot: "title" }, this._translations.error), h("div", { key: '83e5918e00902bd49512165f4aa62813cecb4619', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '3e9dadd880319708e64e717ba7e7adaddf97b935' }, h("calcite-shell", { key: 'c72664d361b3904bc191668207c3ad31ff1f98c9', "content-behind": true }, this._getReporter())), this.filterModal()));
+        return (h(Host, { key: 'e4d2d075e2667ba3e396178e4b820658655813d3' }, this._reportSubmitted && h("calcite-alert", { key: '0cc4678edca8993e529aed1f328816f7ff00e565', "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: 'cb1bc1c8bed7db3d4535542e7cd6c42119fe1ac3', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '83693e1946d2825cf57f6d8ae5ca5a21a0cc7bfc', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'c8477c3bcbee4a71ba5169cf80895702bd2adf16', slot: "title" }, this._translations.error), h("div", { key: '30722d6036a5634269cd3e485c94e55a06d008a2', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '373b8130788f65dd55106ea3be7fe17aecf80ebb', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '999471c510f95a9699fcb84307bd7daca608725a', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '72accc95ed73545157141ae82b1be1ff0b407a26', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: 'b8beab27be23c9c7f3a9a4a0e839090e63ed9916', slot: "title" }, this._translations.error), h("div", { key: '60d4db0311c00b9bf4ccf56bed1c4d40e003d30d', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '4bcca25c6f33c79eeb013cb469dd4e650bc649fb' }, h("calcite-shell", { key: '5d68b182b17c9a09671f73ec477efd0bf5badcfb', "content-behind": true }, this._getReporter())), this.filterModal()));
     }
     //--------------------------------------------------------------------------
     //
@@ -450,7 +452,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) }, this.isMobile && this.getActionToExpandCollapsePanel(), 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, 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) }, 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, mapView: this.mapView, onLayerSelect: this.navigateToCreateFeature.bind(this), showFeatureCount: false, showNextIcon: false }))));
     }
     /**
      * Get Feature create form of the selected feature layer
@@ -458,7 +460,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.isMobile && this.getActionToExpandCollapsePanel(), 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("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), h("create-feature", { customizeSubmit: true, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.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) }, 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("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), h("create-feature", { customizeSubmit: true, isMobile: this.isMobile, 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
@@ -473,8 +475,6 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     onFormReady() {
-        // update the form state when form is ready
-        this.updateFormState(true);
         this._showSubmitCancelButton = true;
     }
     /**
@@ -502,9 +502,6 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             void this._createFeature.close();
         }
         //on back form will be closed, so update the form state
-        if (this.isFormOpen) {
-            this.updateFormState(false);
-        }
         this.backFromSelectedPanel();
     }
     /**
@@ -526,9 +523,6 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             this._showSubmitCancelButton = false;
         }
         //on back form will be closed, so update the form state
-        if (this.isFormOpen) {
-            this.updateFormState(false);
-        }
         this.backFromSelectedPanel();
     }
     /**
@@ -546,10 +540,11 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     onReportSubmitted() {
         //on report submit form will be closed, so update the form state
-        if (this.isFormOpen) {
-            this.updateFormState(false);
+        if (this._showFullPanel) {
+            this.updatePanelState(this._sidePanelCollapsed, false);
         }
         this._reportSubmitted = true;
+        this._updatedProgressBarStatus = 0.25;
         void this.navigateToHomePage();
     }
     /**
@@ -605,6 +600,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             void this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
         }
         this._showSubmitCancelButton = false;
+        this.updatePanelState(false, true);
         this._flowItems = [...this._flowItems, "feature-create"];
     }
     /**
@@ -612,6 +608,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     navigateToChooseCategory() {
+        this.updatePanelState(false, true);
         this._flowItems = [...this._flowItems, "reporting-layer-list"];
     }
     /**
@@ -670,6 +667,11 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             updatedFlowItems[updatedFlowItems.length - 1] === 'add-comment')) {
             this.clearHighlights();
         }
+        // update the panel to the default state while coming back from Reports creation
+        if (updatedFlowItems[updatedFlowItems.length - 1] === 'reporting-layer-list' || (updatedFlowItems[updatedFlowItems.length - 1] === 'feature-create' &&
+            (updatedFlowItems[0] === 'feature-list' || updatedFlowItems[updatedFlowItems.length - 2] === 'feature-list'))) {
+            this.updatePanelState(this._sidePanelCollapsed, false);
+        }
         updatedFlowItems.pop();
         //Back to layer list, and return as the flowItems will be reset in navigateToHomePage
         if (updatedFlowItems.length === 1 && updatedFlowItems[0] === 'layer-list') {
@@ -684,16 +686,18 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     toggleSidePanel() {
         this._sidePanelCollapsed = !this._sidePanelCollapsed;
-        this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this.isFormOpen });
+        this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this._showFullPanel });
     }
     /**
-     * Hide map when form open in case of mobile
-     * @param isFormOpen updated form state
+     * Updates the Panel state
+     * @param sidePanelCollapsed side panel collapsed state
+     * @param showFullPanel updated panel state
      * @protected
      */
-    updateFormState(isFormOpen) {
-        this.isFormOpen = isFormOpen;
-        this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this.isFormOpen });
+    updatePanelState(sidePanelCollapsed, showFullPanel) {
+        this._sidePanelCollapsed = sidePanelCollapsed;
+        this._showFullPanel = showFullPanel;
+        this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this._showFullPanel });
     }
     /**
      * When feature is selected from list store that and show feature details
@@ -764,7 +768,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     getFeatureDetailsFlowItem() {
         const showCommentBtn = this._getLayersConfig(this._selectedLayerId)?.comment && this._selectedLayer.relationships.length > 0;
-        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, mapView: this.mapView, onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions }), showCommentBtn &&
+        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, mapView: this.mapView, onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions, showUserImageInCommentsList: this.showUserImageInCommentsList }), showCommentBtn &&
             h("calcite-button", { appearance: "solid", onClick: () => this._flowItems = [...this._flowItems, "add-comment"], slot: "footer", width: "full" }, this._translations.comment))));
     }
     /**
@@ -1094,6 +1098,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "reportSubmittedMessage": [1, "report-submitted-message"],
         "searchConfiguration": [16],
         "showComments": [4, "show-comments"],
+        "showUserImageInCommentsList": [4, "show-user-image-in-comments-list"],
         "theme": [1],
         "zoomToScale": [2, "zoom-to-scale"],
         "_featureCreationFailedErrorMsg": [32],
@@ -1122,7 +1127,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["crowdsource-reporter", "calcite-action", "calcite-action-menu", "calcite-alert", "calcite-block", "calcite-button", "calcite-checkbox", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-date-picker", "calcite-date-picker-day", "calcite-date-picker-month", "calcite-date-picker-month-header", "calcite-filter", "calcite-flow", "calcite-flow-item", "calcite-graph", "calcite-handle", "calcite-icon", "calcite-input", "calcite-input-date-picker", "calcite-input-text", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-pagination", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-shell", "calcite-slider", "calcite-stack", "calcite-tooltip", "create-feature", "create-related-feature", "delete-button", "edit-card", "feature-details", "feature-list", "info-card", "instant-apps-filter-list", "instant-apps-social-share", "layer-list"];
+    const components = ["crowdsource-reporter", "calcite-action", "calcite-action-menu", "calcite-alert", "calcite-avatar", "calcite-block", "calcite-button", "calcite-checkbox", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-date-picker", "calcite-date-picker-day", "calcite-date-picker-month", "calcite-date-picker-month-header", "calcite-filter", "calcite-flow", "calcite-flow-item", "calcite-graph", "calcite-handle", "calcite-icon", "calcite-input", "calcite-input-date-picker", "calcite-input-text", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-pagination", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-shell", "calcite-slider", "calcite-stack", "calcite-tooltip", "create-feature", "create-related-feature", "delete-button", "edit-card", "feature-details", "feature-list", "info-card", "instant-apps-filter-list", "instant-apps-social-share", "layer-list"];
     components.forEach(tagName => { switch (tagName) {
         case "crowdsource-reporter":
             if (!customElements.get(tagName)) {
@@ -1131,15 +1136,20 @@ function defineCustomElement$1() {
             break;
         case "calcite-action":
             if (!customElements.get(tagName)) {
-                defineCustomElement$L();
+                defineCustomElement$M();
             }
             break;
         case "calcite-action-menu":
             if (!customElements.get(tagName)) {
-                defineCustomElement$K();
+                defineCustomElement$L();
             }
             break;
         case "calcite-alert":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$K();
+            }
+            break;
+        case "calcite-avatar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$J();
             }

package/dist/components/date-picker-month-header.js

@@ -15,7 +15,7 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const CSS = {
     header: "header",

package/dist/components/date-picker.js

@@ -17,7 +17,7 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const HEADING_LEVEL = 2;
 const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
@@ -25,7 +25,7 @@ const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 /**
  * CLDR cache.

package/dist/components/date.js

@@ -8,7 +8,7 @@ import { n as numberStringFormatter } from './locale2.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 /**
  * Check if date is within a min and max

package/dist/components/deduct-calculator2.js

@@ -923,7 +923,7 @@ const DeductCalculator = /*@__PURE__*/ proxyCustomElement(class DeductCalculator
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '7c12073b99b009ce413082df1ea7f7ba57a24d89' }, h("div", { key: '35ad62ab6a2fe9efb8e32c262d562c213ce067aa', class: "label-display" }, h("calcite-label", { key: '5f4b84e4639538ebc8c6172def2a9c4b2703621f', class: "label-display" }, "Density %", this._getDensityInput()), h("calcite-label", { key: 'b3c9bf873945871c456e97a7c6ce71ce820f37c5', class: "label-display" }, "Type", this._getTypeInput()), h("calcite-label", { key: '57d3b49c4b2a1f103fb197e29913e244731c507f', class: "label-display" }, "Severity", this._getSeverityInput())), h("div", { key: '1194dccf269b5c42248f4e4eed188bcc89aa4cb5' }, this._getCalculateInput())));
+        return (h(Host, { key: '6a017676a4d4cce0ac332906e62630c93d673dd1' }, h("div", { key: '4411f75b59666e2bd268446a3e91558c803cbab6', class: "label-display" }, h("calcite-label", { key: '764e02dfc4e8224a2e7bab3ad0e90d611ff68911', class: "label-display" }, "Density %", this._getDensityInput()), h("calcite-label", { key: 'b939b06882ef6a14325f327644096d7a7a814ed5', class: "label-display" }, "Type", this._getTypeInput()), h("calcite-label", { key: 'a4b9801ca974b3ac8525080b8e1bcd4906ab4944', class: "label-display" }, "Severity", this._getSeverityInput())), h("div", { key: 'b47be60c381513f386569ca5a80525cbfdeaa0af' }, this._getCalculateInput())));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/delete-button2.js

@@ -86,7 +86,7 @@ const DeleteButton = /*@__PURE__*/ proxyCustomElement(class DeleteButton extends
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '87e080ea4203ab7fcb1313d8fa57a3d5c5d37885' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage()));
+        return (h(Host, { key: '1ff43b4d224c4cf7bbfc0656e9605cd4ac4c971a' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage()));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.

package/dist/components/dom.js

@@ -578,7 +578,7 @@ var isFocusable = function isFocusable(node, options) {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 /**
  * The default `focus-trap/tabbable` options.
@@ -1122,18 +1122,21 @@ async function whenTransitionOrAnimationDone(targetEl, transitionPropOrAnimation
     const allDurations = type === "transition" ? style.transitionDuration : style.animationDuration;
     const allProps = type === "transition" ? style.transitionProperty : style.animationName;
     const allDurationsArray = allDurations.split(",");
-    const allPropsArray = allProps.split(",");
+    const allPropsArray = allProps.split(",").map((prop) => prop.trim());
     const propIndex = allPropsArray.indexOf(transitionPropOrAnimationName);
     const duration = allDurationsArray[propIndex] ??
         /* Safari will have a single duration value for the shorthand prop when multiple, separate names/props are defined,
                 so we fall back to it if there's no matching prop duration */
         allDurationsArray[0];
-    function startEndImmediately() {
-        onStart?.();
-        onEnd?.();
+    function triggerFallbackStartEnd() {
+        // offset callbacks by a frame to simulate event counterparts
+        requestAnimationFrame(() => {
+            onStart?.();
+            requestAnimationFrame(() => onEnd?.());
+        });
     }
     if (duration === "0s") {
-        startEndImmediately();
+        triggerFallbackStartEnd();
         return;
     }
     const startEvent = type === "transition" ? "transitionstart" : "animationstart";
@@ -1144,7 +1147,7 @@ async function whenTransitionOrAnimationDone(targetEl, transitionPropOrAnimation
             targetEl.removeEventListener(startEvent, onTransitionOrAnimationStart);
             targetEl.removeEventListener(endEvent, onTransitionOrAnimationEndOrCancel);
             targetEl.removeEventListener(cancelEvent, onTransitionOrAnimationEndOrCancel);
-            startEndImmediately();
+            triggerFallbackStartEnd();
             resolve();
         }, parseFloat(duration) * 1000);
         targetEl.addEventListener(startEvent, onTransitionOrAnimationStart);