@esri/solutions-components 0.8.6-6.3 → 0.8.6

package/dist/components/create-feature2.js

@@ -6,10 +6,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 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 CreateFeatureStyle0 = createFeatureCss;
 
 const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature extends HTMLElement {
     constructor() {
@@ -19,17 +17,11 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         this.fail = createEvent(this, "fail", 7);
         this.drawComplete = createEvent(this, "drawComplete", 7);
         this.editingAttachment = createEvent(this, "editingAttachment", 7);
-        this.progressStatus = createEvent(this, "progressStatus", 7);
-        /**
-         * boolean: Flag to maintain form submission using submit button
-         */
-        this._isSubmitBtnClicked = false;
         this.mapView = undefined;
         this.selectedLayerId = undefined;
         this.customizeSubmit = false;
         this.searchConfiguration = undefined;
-        this._editorLoading = false;
-        this._showSearchWidget = undefined;
+        this.showSearchWidget = undefined;
     }
     //--------------------------------------------------------------------------
     //
@@ -37,25 +29,13 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
     //
     //--------------------------------------------------------------------------
     /**
-     * Called each time the mapView prop is changed.
-     */
+    * Called each time the mapView prop is changed.
+    */
     async mapViewWatchHandler() {
         await this.mapView.when(async () => {
             await this.init();
         });
     }
-    /**
-     * When _editorLoading is true the container node will be hidden while starting the create workflow
-     */
-    async _editorLoadingWatchHandler(v) {
-        var _a, _b;
-        if (v) {
-            (_a = this._container) === null || _a === void 0 ? void 0 : _a.classList.add("display-none");
-            await this.startCreate();
-            (_b = this._container) === null || _b === void 0 ? void 0 : _b.classList.remove("display-none");
-            this._editorLoading = false;
-        }
-    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -76,7 +56,6 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      */
     async submit() {
         if (this._editor) {
-            this._isSubmitBtnClicked = true;
             this._editor.viewModel.featureFormViewModel.submit();
         }
     }
@@ -102,10 +81,8 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * Renders the component.
      */
     render() {
-        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 showSearchWidget = this.showSearchWidget ? '' : 'display-none';
+        return (h(Fragment, null, h("div", { id: "feature-form" }), h("div", { class: `search-widget ${showSearchWidget}`, id: "search-widget-ref" })));
     }
     //--------------------------------------------------------------------------
     //
@@ -141,21 +118,19 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * @protected
      */
     async createEditorWidget() {
-        var _a;
         if (this._editor) {
             this._editor.destroy();
         }
         const layerInfos = [];
-        this._container = document.createElement("div");
-        (_a = this._container) === null || _a === void 0 ? void 0 : _a.classList.add("display-none");
+        const container = document.createElement("div");
         const allMapLayers = await getAllLayers(this.mapView);
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
         allMapLayers.forEach(async (eachLayer) => {
             layerInfos.push({
                 layer: eachLayer,
                 enabled: (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.type) === "feature" && (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.id) === this.selectedLayerId,
-                addEnabled: true, // default is true, set to false to disable the ability to add a new feature
-                updateEnabled: false, // default is true, set to false to disable the ability to edit an existing feature
+                addEnabled: true,
+                updateEnabled: false,
                 deleteEnabled: false // default is true, set to false to disable the ability to delete features
             });
         });
@@ -166,9 +141,9 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
             visibleElements: {
                 snappingControls: false
             },
-            container: this._container
+            container
         });
-        this.el.appendChild(this._container);
+        this.el.appendChild(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') {
@@ -186,64 +161,51 @@ 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.progressStatus.emit(0.5);
-                this._editorLoading = true;
+                void this.startCreate();
             }
         });
         this._editor.viewModel.addHandles(handle);
-        //Add handle to watch featureFormViewModel ready state
-        const formHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
-            if (state === 'ready') {
-                this._showSearchWidget = false;
-                this.progressStatus.emit(1);
-                this.drawComplete.emit();
-            }
-        });
-        this._editor.viewModel.addHandles(formHandle);
         //Add handle to watch editor viewmodel state and then show the search widget
-        const createFeatureHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
+        const formHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
             if (state === 'creating-features') {
-                this._editorLoading = true;
-                this._showSearchWidget = true;
+                this.showSearchWidget = true;
             }
         });
-        this._editor.viewModel.addHandles(createFeatureHandle);
+        this._editor.viewModel.addHandles(formHandle);
     }
     /**
      * Start creating the feature
      * @protected
      */
     async startCreate() {
-        return new Promise((resolve, reject) => {
-            var _a;
-            if ((_a = this._editor.viewModel.featureTemplatesViewModel.items) === null || _a === void 0 ? void 0 : _a.length) {
-                const items = this._editor.viewModel.featureTemplatesViewModel.items[0].get("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);
-                    setTimeout(() => {
-                        //on form submit
-                        this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
-                        //hides the header and footer elements in editor widget
-                        this.hideEditorsElements().then(() => {
-                            resolve({});
-                        }, e => reject(e));
-                    }, 700);
-                });
-                //if only one feature template then directly start geometry creation for that
-                //else allow feature template selection to user
-                if (items.length === 1) {
-                    this._editor.viewModel.featureTemplatesViewModel.select(items[0]);
-                }
-                const resolvePromise = items.length > 1;
-                this.hideEditorsElements().then(() => {
-                    if (resolvePromise) {
-                        resolve({});
-                    }
-                }, e => resolvePromise && reject(e));
+        var _a;
+        if ((_a = this._editor.viewModel.featureTemplatesViewModel.items) === null || _a === void 0 ? void 0 : _a.length) {
+            const items = this._editor.viewModel.featureTemplatesViewModel.items[0].get("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', () => {
+                setTimeout(() => {
+                    //on form submit 
+                    this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
+                    //on sketch complete emit the event
+                    this._editor.viewModel.sketchViewModel.on("create", (evt) => {
+                        if (evt.state === "complete") {
+                            this.showSearchWidget = false;
+                            this.drawComplete.emit();
+                        }
+                    });
+                    this.hideEditorsElements();
+                }, 700);
+                this.hideEditorsElements();
+            });
+            //if only one feature template then directly start geometry creation for that
+            //else allow feature template selection to user
+            if (items.length === 1) {
+                this._editor.viewModel.featureTemplatesViewModel.select(items[0]);
             }
-        });
+            //hides the header and footer elements in editor widget
+            this.hideEditorsElements();
+        }
     }
     /**
      * Display search widget to search location
@@ -278,7 +240,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
                     if (this._editor.viewModel.sketchViewModel.createGraphic && pointGeometry) {
                         this._editor.viewModel.sketchViewModel.createGraphic.set('geometry', pointGeometry);
                         this._editor.viewModel.sketchViewModel.complete();
-                        void this.hideEditorsElements();
+                        this.hideEditorsElements();
                     }
                 }, 100);
             }
@@ -337,21 +299,22 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * Hides the elements of editor widget
      * @protected
      */
-    async hideEditorsElements() {
-        var _a, _b;
+    hideEditorsElements() {
         if (!this.customizeSubmit) {
             return;
         }
-        await this.timeout(700);
-        //hides the header and footer on the featureForm
-        (_b = (_a = this.el.querySelector('.esri-editor')) === null || _a === void 0 ? void 0 : _a.querySelectorAll('calcite-flow-item')) === null || _b === void 0 ? void 0 : _b.forEach((flowItem) => {
-            var _a, _b, _c, _d, _e;
-            const article = (_c = (_b = (_a = flowItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('calcite-panel')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('article');
-            //hide the header
-            (_d = article === null || article === void 0 ? void 0 : article.querySelector('header')) === null || _d === void 0 ? void 0 : _d.setAttribute('style', 'display: none');
-            //hide the footer
-            (_e = article === null || article === void 0 ? void 0 : article.querySelector('footer')) === null || _e === void 0 ? void 0 : _e.setAttribute('style', 'display: none');
-        });
+        setTimeout(() => {
+            var _a;
+            //hides the header and footer on the featureForm
+            (_a = this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')) === null || _a === void 0 ? void 0 : _a.forEach((flowItem) => {
+                var _a, _b, _c, _d, _e;
+                const article = (_c = (_b = (_a = flowItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('calcite-panel')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('article');
+                //hide the header
+                (_d = article === null || article === void 0 ? void 0 : article.querySelector('header')) === null || _d === void 0 ? void 0 : _d.setAttribute('style', 'display: none');
+                //hide the footer
+                (_e = article === null || article === void 0 ? void 0 : article.querySelector('footer')) === null || _e === void 0 ? void 0 : _e.setAttribute('style', 'display: none');
+            });
+        }, 700);
     }
     /**
      * On creation of feature emit the event that the feature is created
@@ -362,13 +325,11 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         var _a;
         //return if any attribute is invalid , focus will be shifted to the invalid attribute in feature form
         if (evt.invalid.length) {
-            this._isSubmitBtnClicked = false;
             return;
         }
         //Submit only when valid attributes
         //emit success or fail based on the result
-        if (evt.valid.length && this._isSubmitBtnClicked) {
-            this._isSubmitBtnClicked = false;
+        if (evt.valid.length) {
             try {
                 await this._editor.activeWorkflow.commit();
                 //throw errors if any failures
@@ -387,49 +348,33 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
             this.success.emit();
         }
     }
-    /**
-     * call setTimeout in Promise wrapper
-     * @param delay The time, in milliseconds that the timer should wait before the promise is resolved
-     * @protected
-     */
-    timeout(delay) {
-        return new Promise(resolve => setTimeout(resolve, delay));
-    }
     get el() { return this; }
     static get watchers() { return {
-        "mapView": ["mapViewWatchHandler"],
-        "_editorLoading": ["_editorLoadingWatchHandler"]
+        "mapView": ["mapViewWatchHandler"]
     }; }
-    static get style() { return CreateFeatureStyle0; }
+    static get style() { return createFeatureCss; }
 }, [0, "create-feature", {
         "mapView": [16],
         "selectedLayerId": [1, "selected-layer-id"],
         "customizeSubmit": [4, "customize-submit"],
         "searchConfiguration": [16],
-        "_editorLoading": [32],
-        "_showSearchWidget": [32],
+        "showSearchWidget": [32],
         "close": [64],
         "submit": [64]
     }, undefined, {
-        "mapView": ["mapViewWatchHandler"],
-        "_editorLoading": ["_editorLoadingWatchHandler"]
+        "mapView": ["mapViewWatchHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["create-feature", "calcite-loader"];
+    const components = ["create-feature"];
     components.forEach(tagName => { switch (tagName) {
         case "create-feature":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, CreateFeature);
             }
             break;
-        case "calcite-loader":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
     } });
 }
 defineCustomElement();

package/dist/components/crowdsource-manager.js

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { a as ELayoutMode } from './interfaces.js';
 import { g as getLayerOrTable } from './mapViewUtils.js';
@@ -65,15 +65,12 @@ import { d as defineCustomElement$4 } from './map-picker2.js';
 import { d as defineCustomElement$3 } from './map-search2.js';
 import { d as defineCustomElement$2 } from './map-tools2.js';
 
-const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-50{height:calc(100% - 50px)}.display-none{display:none}.height-53{height:53px}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}.position-absolute-50{position:absolute;top:50px;bottom:0px;left:0px;right:0px}.position-absolute-0{position:absolute;top:0px;bottom:0px;left:0px;right:0px}.visibility-hidden{visibility:hidden;height:0px}.position-fixed{position:fixed}.border-width-0{border-width:0px}.border-bottom-width-0{border-bottom-width:0px}.floating-container{position:fixed;width:100px;height:10px;bottom:0;right:0;margin:100px 0px}.floating-container .floating-button{box-shadow:0 10px 25px rgb(92 93 94 / 60%);transform:translatey(5px);transition:all 0.3s}";
-const CrowdsourceManagerStyle0 = crowdsourceManagerCss;
+const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-50{height:calc(100% - 50px)}.display-none{display:none}.height-53{height:53px}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}.position-absolute-50{position:absolute;top:50px;bottom:0px;left:0px;right:0px}.position-absolute-0{position:absolute;top:0px;bottom:0px;left:0px;right:0px}.visibility-hidden{visibility:hidden;height:0px}.position-fixed{position:fixed}.border-width-0{border-width:0px}.border-bottom-width-0{border-bottom-width:0px}";
 
 const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceManager extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.showIntroductionWindow = createEvent(this, "showIntroductionWindow", 7);
-        this.showCoverPage = createEvent(this, "showCoverPage", 7);
         //--------------------------------------------------------------------------
         //
         //  Properties (protected)
@@ -89,55 +86,43 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
          * MapView.when is not fired when mapView is not currently visible
          */
         this._defaultLevelHonored = false;
-        /**
-         * boolean: When true hideMapOnLoad was honored for the current map
-         */
-        this._hideMapOnLoadHonored = false;
         /**
          * boolean: When true the map view will be set after render due to popup obstructing the view
          * MapView.when is not fired when mapView is not currently visible
          */
         this._shouldSetMapView = false;
         this.appProxies = undefined;
-        this.basemapConfig = undefined;
-        this.coverPageEnabled = undefined;
         this.defaultCenter = "";
         this.defaultGlobalId = "";
         this.defaultLayer = "";
         this.defaultLevel = "";
         this.defaultOid = "";
         this.defaultWebmap = "";
-        this.introductionWindowEnabled = false;
         this.enableAutoRefresh = false;
-        this.enableBasemap = true;
         this.enableColumnReorder = true;
         this.enableCSV = true;
         this.enableFloorFilter = true;
         this.enableFullscreen = true;
-        this.enableHome = true;
         this.enableInlineEdit = false;
         this.enableLegend = true;
         this.enableSearch = true;
         this.enableShare = false;
+        this.enableHome = true;
         this.enableZoom = true;
-        this.hideMapOnLoad = false;
+        this.enableBasemap = true;
+        this.basemapConfig = undefined;
+        this.showNewestFirst = true;
         this.mapInfos = [];
         this.onlyShowUpdatableLayers = true;
-        this.popupHeaderColor = undefined;
-        this.popupHeaderHoverColor = undefined;
-        this.popupHeaderHoverTextColor = undefined;
-        this.popupHeaderTextColor = undefined;
         this.searchConfiguration = undefined;
         this.shareIncludeEmbed = undefined;
         this.shareIncludeSocial = undefined;
-        this.showNewestFirst = true;
         this.theme = "light";
         this.zoomAndScrollToSelected = false;
-        this.zoomToScale = undefined;
         this._expandPopup = false;
         this._hideFooter = false;
         this._hideTable = false;
-        this._isMobile = false;
+        this._isMobile = undefined;
         this._translations = undefined;
         this._layer = undefined;
         this._layoutMode = ELayoutMode.GRID;
@@ -158,13 +143,16 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     enableZoomWatchHandler() {
         this._initMapZoom();
     }
-    /**
-     * When true the map will be hidden on load
-     */
-    hideMapOnLoadWatchHandler() {
-        this.showHideMapPopupAndTable(this.hideMapOnLoad && !this._isMobile);
-        this._expandPopup = this.hideMapOnLoad && !this._isMobile;
-    }
+    //--------------------------------------------------------------------------
+    //
+    //  Methods (public)
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Events (public)
+    //
+    //--------------------------------------------------------------------------
     /**
      * Listen for changes in feature selection and show or hide the map, popup, and table
      */
@@ -211,6 +199,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     async beforeMapChanged() {
         if (this._expandPopup) {
             this._shouldSetMapView = true;
+            this._expandPopup = false;
         }
     }
     /**
@@ -223,13 +212,6 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
             this._layer = layer;
         });
     }
-    /**
-     * Update the state expandPopup when mapInfoChange event occurs
-     */
-    async mapInfoChange() {
-        this._expandPopup = this.hideMapOnLoad && !this._isMobile;
-        this._hideMapOnLoadHonored = false;
-    }
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -248,9 +230,9 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * Renders the component.
      */
     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: 'f16033bd0f93446f9e0aeb38a6b172d021586a25' }, h("calcite-shell", { key: '9aee01a563e12168373ddc1aea40e1fac2f65cc4', class: "position-relative" }, h("calcite-panel", { key: 'e2333aedf094999f56823650b7585ac5915668ea', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
+        const borderClass = this._isMobile && this._hideTable ? "border-width-0" :
+            this._isMobile ? "border-bottom-width-0" : "";
+        return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render
@@ -259,9 +241,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     async componentDidRender() {
         if (this._shouldSetMapView) {
             this._shouldSetMapView = false;
-            if (this._mapChange) {
-                await this._setMapView();
-            }
+            await this._setMapView();
         }
     }
     /**
@@ -371,22 +351,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      */
     _getBody(layoutMode, panelOpen, hideTable) {
         const contentClass = layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
-        const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideTable), this._getTable(layoutMode, panelOpen, hideTable)), this.coverPageEnabled &&
-            h("div", { class: "floating-container", onClick: this.coverPageButtonClick.bind(this) }, h("calcite-button", { appearance: "solid", class: `floating-button ${themeClass}`, "icon-start": "content-minimal", kind: "neutral", label: "", round: true, scale: "l", "split-child": "primary", width: "auto" })), this.introductionWindowEnabled &&
-            h("div", { class: "floating-container", onClick: this.infoButtonClick.bind(this) }, h("calcite-button", { appearance: "solid", class: `floating-button ${themeClass}`, "icon-start": "information-letter", kind: "neutral", label: "", round: true, scale: "l", "split-child": "primary", width: "auto" }))));
-    }
-    /**
-     * Emit the event when info button clicked
-     */
-    infoButtonClick() {
-        this.showIntroductionWindow.emit();
-    }
-    /**
-   * Emit the event when cover page button clicked
-   */
-    coverPageButtonClick() {
-        this.showCoverPage.emit();
+        return (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideTable), this._getTable(layoutMode, panelOpen, hideTable))));
     }
     /**
      * Get the map and card nodes based for the current layout options
@@ -430,14 +395,9 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
         const popupNodeClass = !this._expandPopup ? "height-full" : ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) === 1 || this._isMobile ? "position-absolute-0" : "position-absolute-50";
         const headerClass = this._isMobile ? "display-none height-0" : "";
-        const headerTheme = this.popupHeaderColor ? "" : !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
+        const headerTheme = !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
         const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
-        return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}`, style: {
-                '--calcite-color-foreground-1': this.popupHeaderColor, /* background color that will be displayed on the popup header */
-                '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* background color that will be displayed on button when hovered */
-                '--calcite-color-text-3': this.popupHeaderTextColor, /* font color that will be displayed on button */
-                '--calcite-color-text-2': this.popupHeaderTextColor, /* font color that will be displayed on popup header text*/
-            } }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
+        return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}` }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
     }
     /**
      * Toggle the popup information
@@ -446,7 +406,6 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      */
     _togglePopup() {
         this._expandPopup = !this._expandPopup;
-        this._hideMapOnLoadHonored = true;
     }
     /**
      * Get the card node
@@ -482,7 +441,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
             ((_a = this.defaultGlobalId) === null || _a === void 0 ? void 0 : _a.indexOf(",")) > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId];
         const defaultOid = !this.defaultOid ? undefined :
             ((_b = this.defaultOid) === null || _b === void 0 ? void 0 : _b.indexOf(",")) > -1 ? this.defaultOid.split(",").map(o => parseInt(o, 10)) : [parseInt(this.defaultOid, 10)];
-        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapHidden: this._expandPopup, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale }))));
+        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
     }
     /**
      * Update the component layout when its size changes
@@ -495,9 +454,6 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         if (forceOpen) {
             this._panelOpen = true;
         }
-        if ((this.hideMapOnLoad && !this._hideMapOnLoadHonored) || this._isMobile) {
-            this.hideMapOnLoadWatchHandler();
-        }
     }
     /**
      * Open/Close the appropriate panel.
@@ -585,47 +541,38 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     }
     get el() { return this; }
     static get watchers() { return {
-        "enableZoom": ["enableZoomWatchHandler"],
-        "hideMapOnLoad": ["hideMapOnLoadWatchHandler"]
+        "enableZoom": ["enableZoomWatchHandler"]
     }; }
-    static get style() { return CrowdsourceManagerStyle0; }
+    static get style() { return crowdsourceManagerCss; }
 }, [0, "crowdsource-manager", {
         "appProxies": [8, "app-proxies"],
-        "basemapConfig": [16],
-        "coverPageEnabled": [4, "cover-page-enabled"],
         "defaultCenter": [1, "default-center"],
         "defaultGlobalId": [1, "default-global-id"],
         "defaultLayer": [1, "default-layer"],
         "defaultLevel": [1, "default-level"],
         "defaultOid": [1, "default-oid"],
         "defaultWebmap": [1, "default-webmap"],
-        "introductionWindowEnabled": [4, "introduction-window-enabled"],
         "enableAutoRefresh": [4, "enable-auto-refresh"],
-        "enableBasemap": [4, "enable-basemap"],
         "enableColumnReorder": [4, "enable-column-reorder"],
         "enableCSV": [4, "enable-c-s-v"],
         "enableFloorFilter": [4, "enable-floor-filter"],
         "enableFullscreen": [4, "enable-fullscreen"],
-        "enableHome": [4, "enable-home"],
         "enableInlineEdit": [4, "enable-inline-edit"],
         "enableLegend": [4, "enable-legend"],
         "enableSearch": [4, "enable-search"],
         "enableShare": [4, "enable-share"],
+        "enableHome": [4, "enable-home"],
         "enableZoom": [4, "enable-zoom"],
-        "hideMapOnLoad": [4, "hide-map-on-load"],
+        "enableBasemap": [4, "enable-basemap"],
+        "basemapConfig": [16],
+        "showNewestFirst": [4, "show-newest-first"],
         "mapInfos": [16],
         "onlyShowUpdatableLayers": [4, "only-show-updatable-layers"],
-        "popupHeaderColor": [1, "popup-header-color"],
-        "popupHeaderHoverColor": [1, "popup-header-hover-color"],
-        "popupHeaderHoverTextColor": [1, "popup-header-hover-text-color"],
-        "popupHeaderTextColor": [1, "popup-header-text-color"],
         "searchConfiguration": [16],
         "shareIncludeEmbed": [4, "share-include-embed"],
         "shareIncludeSocial": [4, "share-include-social"],
-        "showNewestFirst": [4, "show-newest-first"],
         "theme": [1],
         "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
-        "zoomToScale": [2, "zoom-to-scale"],
         "_expandPopup": [32],
         "_hideFooter": [32],
         "_hideTable": [32],
@@ -638,9 +585,8 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         "_panelOpen": [32],
         "_numSelected": [32],
         "_tableOnly": [32]
-    }, [[8, "featureSelectionChange", "featureSelectionChange"], [8, "popupClosed", "popupClosed"], [8, "idsFound", "idsFound"], [8, "layoutChanged", "layoutChanged"], [8, "mapChanged", "mapChanged"], [8, "beforeMapChanged", "beforeMapChanged"], [8, "layerSelectionChange", "layerSelectionChange"], [8, "mapInfoChange", "mapInfoChange"]], {
-        "enableZoom": ["enableZoomWatchHandler"],
-        "hideMapOnLoad": ["hideMapOnLoadWatchHandler"]
+    }, [[8, "featureSelectionChange", "featureSelectionChange"], [8, "popupClosed", "popupClosed"], [8, "idsFound", "idsFound"], [8, "layoutChanged", "layoutChanged"], [8, "mapChanged", "mapChanged"], [8, "beforeMapChanged", "beforeMapChanged"], [8, "layerSelectionChange", "layerSelectionChange"]], {
+        "enableZoom": ["enableZoomWatchHandler"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {