@esri/solutions-components 0.7.22 → 0.7.24

package/dist/esm/{basemap-gallery_7.entry.js → info-card_4.entry.js}

@@ -3,160 +3,138 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-7183ce4a.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7183ce4a.js';
+import { g as getLocaleComponentStrings } from './locale-13e3c96c.js';
 import { l as loadModules } from './loadModules-cea493da.js';
-import { g as getLocaleComponentStrings } from './locale-834c52c6.js';
+import { P as PopupUtils } from './popupUtils-b71f30fc.js';
 import './esri-loader-eda07632.js';
 import './_commonjsHelpers-d5f9d613.js';
 
-const basemapGalleryCss = ":host{display:block}";
+const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.esri-features__footer{display:none !important}.button-container{justify-content:space-between;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.min-width-100{min-width:100px}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.padding-top-46{padding-top:46px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}";
 
-const BasemapGallery = class {
+const InfoCard = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.popupClosed = createEvent(this, "popupClosed", 7);
+        this.selectionChanged = createEvent(this, "selectionChanged", 7);
+        this.graphics = undefined;
+        this.isLoading = false;
+        this.isMobile = undefined;
         this.mapView = undefined;
-        this.basemapConfig = undefined;
-        this.basemapWidget = undefined;
+        this.zoomAndScrollToSelected = undefined;
+        this.allowEditing = true;
+        this._alertOpen = false;
+        this._count = "";
+        this._editRecordOpen = false;
+        this._mobileTitle = "";
+        this._showListView = false;
+        this._translations = undefined;
     }
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
-    async mapViewWatchHandler() {
-        await this.mapView.when(() => {
-            void this._initBaseMapGallery(this.mapView);
-        });
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Methods (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
-    //  Events (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
-    //  Functions (lifecycle)
-    //
-    //--------------------------------------------------------------------------
     /**
-     * StencilJS: Called once just after the component is first connected to the DOM.
+     * Watch for changes to the graphic and update the feature widget
      */
-    async componentWillLoad() {
-        return this._initModules();
+    async graphicsWatchHandler() {
+        await this.setGraphics();
     }
     /**
-     * StencilJS: Renders the component.
+     * Watch for changes to the isMobile prop then init the Features widget
+     * We need to know if the title should be displayed by the widget (non mobile)
+     * or by us (mobile)
      */
-    render() {
-        return (h(Host, null, h("div", { ref: (el) => { this._basemapElement = el; } })));
+    async isMobileWatchHandler() {
+        await this._initFeaturesWidget();
     }
     /**
-     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+     * Watch for changes to the mapView and re-init the Feature widget
      */
-    async componentDidLoad() {
-        if (this.mapView) {
-            await this.mapViewWatchHandler();
-        }
+    async mapViewWatchHandler() {
+        return await this._initFeaturesWidget();
     }
     //--------------------------------------------------------------------------
     //
-    //  Functions (protected)
+    //  Methods (public)
     //
     //--------------------------------------------------------------------------
     /**
-     * Load esri javascript api modules
-     *
-     * @returns Promise resolving when function is done
+     * Get the current selected feature from the Features widget
      *
-     * @protected
+     * @returns Promise resolving with the current feature
      */
-    async _initModules() {
-        const [BasemapGallery, PortalBasemapsSource] = await loadModules([
-            "esri/widgets/BasemapGallery",
-            "esri/widgets/BasemapGallery/support/PortalBasemapsSource"
-        ]);
-        this.BasemapGallery = BasemapGallery;
-        this.PortalBasemapsSource = PortalBasemapsSource;
+    async getSelectedFeature() {
+        return this._features.selectedFeature;
     }
     /**
-     * Initialize the basemap gallery or reset the current view if it already exists
+     * Respond to and close the edit record display
      *
-     * @protected
+     * @returns a promise when the operation has completed
      */
-    async _initBaseMapGallery(view) {
+    async closeEdit() {
+        this._editRecordOpen = false;
+    }
+    /**
+     * Reset key properties when the layer selection changes
+     */
+    async layerSelectionChange() {
         var _a;
-        if (this.BasemapGallery) {
-            if (this.basemapWidget) {
-                this.basemapWidget.destroy();
-            }
-            const source = new this.PortalBasemapsSource({
-                query: ((_a = this.basemapConfig) === null || _a === void 0 ? void 0 : _a.basemapGroupId) ? `id:${this.basemapConfig.basemapGroupId}` : null,
-                filterFunction: this.basemapConfig ? (basemap) => {
-                    return !this.basemapConfig.basemapIdsToFilter.includes(basemap.portalItem.id);
-                } : () => true
-            });
-            await source.refresh();
-            this.basemapWidget = new this.BasemapGallery({
-                container: this._basemapElement,
-                view,
-                source
-            });
+        this._showListView = false;
+        if ((_a = this._features) === null || _a === void 0 ? void 0 : _a.viewModel) {
+            this._features.viewModel.featureMenuOpen = false;
+            this._features.close();
         }
     }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "mapView": ["mapViewWatchHandler"]
-    }; }
-};
-BasemapGallery.style = basemapGalleryCss;
-
-const floorFilterCss = ":host{display:block}";
-
-const FloorFilter = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.enabled = undefined;
-        this.floorFilterWidget = undefined;
-        this.mapView = undefined;
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Watch handlers
-    //
-    //--------------------------------------------------------------------------
-    async mapViewWatchHandler() {
-        await this.mapView.when(() => {
-            this._initFloorFilter(this.mapView);
-        });
+    /**
+     * Refresh the info-card graphics
+     */
+    async refreshGraphics(evt) {
+        this.graphics = [...evt.detail];
     }
     //--------------------------------------------------------------------------
     //
-    //  Methods (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
-    //  Events (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
     //  Functions (lifecycle)
     //
     //--------------------------------------------------------------------------
     /**
      * StencilJS: Called once just after the component is first connected to the DOM.
+     *
+     * @returns Promise when complete
      */
     async componentWillLoad() {
-        return this._initModules();
+        await this._initModules();
+        await this._getTranslations();
+        this._popupUtils = new PopupUtils();
+    }
+    /**
+     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+     * @returns Promise when complete
+     */
+    async componentDidLoad() {
+        var _a;
+        if (((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            await this.setGraphics();
+        }
     }
+    /**
+     * Renders the component.
+     */
     render() {
-        return (h(Host, null, h("div", { ref: (el) => { this._floorFilterElement = el; } })));
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const loadingClass = this.isLoading ? "" : "display-none";
+        const featureNodeClass = this.isLoading || this._editRecordOpen ? "visibility-hidden" : "position-absolute";
+        const editClass = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none";
+        const editButtonClass = (!this.isLoading && this._editRecordOpen) || this._showListView ? "display-none" : "";
+        const nextBackDisabled = ((_b = (_a = this._features) === null || _a === void 0 ? void 0 : _a.features) === null || _b === void 0 ? void 0 : _b.length) < 2;
+        const nextBackClass = this.isMobile ? "display-none" : "";
+        const shellClass = this.isMobile && !this._editRecordOpen ? "padding-top-46" : "";
+        const id = (_d = (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeature) === null || _d === void 0 ? void 0 : _d.getObjectId();
+        const ids = parseInt(id === null || id === void 0 ? void 0 : id.toString(), 10) > -1 ? [id] : [];
+        const deleteEnabled = ((_e = this._layer) === null || _e === void 0 ? void 0 : _e.editingEnabled) && ((_h = (_g = (_f = this._layer) === null || _f === void 0 ? void 0 : _f.capabilities) === null || _g === void 0 ? void 0 : _g.operations) === null || _h === void 0 ? void 0 : _h.supportsDelete);
+        return (h(Host, null, this.isMobile && !this._editRecordOpen ? (h("calcite-panel", null, h("calcite-action", { class: "end-border", icon: "chevron-left", iconFlipRtl: true, onClick: () => this._closePopup(), scale: "s", slot: "header-actions-start", text: "" }), h("span", { class: "font-bold", slot: "header-content" }, this._mobileTitle))) : undefined, h("calcite-shell", { class: shellClass }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), !nextBackDisabled && h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, h("calcite-action", { icon: "list", onClick: () => this._toggleListView(), scale: "s", text: this._count, textEnabled: true })), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -171,164 +149,215 @@ const FloorFilter = class {
      * @protected
      */
     async _initModules() {
-        const [FloorFilter] = await loadModules([
-            "esri/widgets/FloorFilter"
+        const [Features, reactiveUtils] = await loadModules([
+            "esri/widgets/Features",
+            "esri/core/reactiveUtils"
         ]);
-        this.FloorFilter = FloorFilter;
+        this.Features = Features;
+        this.reactiveUtils = reactiveUtils;
+    }
+    /**
+     * Initializes the features widget if not created and updates the feature widget and other required states
+     *
+     * @protected
+     */
+    async setGraphics() {
+        var _a;
+        if (!this._features) {
+            await this._initFeaturesWidget();
+        }
+        if (this.graphics.length > 0) {
+            this._layer = (_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer;
+            this._editEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsUpdate;
+            this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0]);
+            this._features.open({
+                features: this.graphics
+            });
+        }
+        else {
+            this._features.clear();
+            this._features.close();
+        }
+        this._count = this._getCount();
     }
     /**
-     * Initialize the floor filter or reset the current view if it already exists
+     * Init the Feature widget so we can display the popup content
+     *
+     * @returns a promise when the operation has completed
+     *
+     * @protected
      */
-    _initFloorFilter(view) {
+    async _initFeaturesWidget() {
         var _a;
-        if (view && this.enabled && this.FloorFilter && ((_a = view === null || view === void 0 ? void 0 : view.map) === null || _a === void 0 ? void 0 : _a.floorInfo)) {
-            if (!this.floorFilterWidget) {
-                this.floorFilterWidget = new this.FloorFilter({
-                    container: this._floorFilterElement,
-                    view
+        return this.isMobile !== undefined ? await ((_a = this.mapView) === null || _a === void 0 ? void 0 : _a.when(() => {
+            if (!this._features) {
+                this._features = new this.Features({
+                    view: this.mapView,
+                    container: "features-node",
+                    visibleElements: {
+                        actionBar: false,
+                        closeButton: false,
+                        heading: !this.isMobile
+                    }
+                });
+                this.reactiveUtils.watch(() => this._features.viewModel.featureMenuOpen, (isOpen) => {
+                    if (!isOpen) {
+                        this._showListView = isOpen;
+                    }
                 });
+                if (this.zoomAndScrollToSelected) {
+                    this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
+                        if (i > -1) {
+                            this.selectionChanged.emit([this._features.selectedFeature]);
+                        }
+                    });
+                }
             }
             else {
-                this.floorFilterWidget.view = view;
+                this._features.view = this.mapView;
+                this._features.visibleElements.actionBar = false;
+                this._features.visibleElements.closeButton = false;
+                this._features.visibleElements.heading = !this.isMobile;
             }
-        }
+        })) : Promise.resolve();
     }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "mapView": ["mapViewWatchHandler"]
-    }; }
-};
-FloorFilter.style = floorFilterCss;
-
-const mapFullscreenCss = ":host{display:block}";
-
-const MapFullscreen = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.fullscreenStateChange = createEvent(this, "fullscreenStateChange", 7);
-        this.mapView = undefined;
-        this.fullscreenWidget = undefined;
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Watch handlers
-    //
-    //--------------------------------------------------------------------------
     /**
-     * Called each time the mapView prop is changed.
-     *
-     * @returns Promise when complete
+     * Close the popup and emit the selected features
      */
-    async mapViewWatchHandler() {
-        await this.mapView.when(async () => {
-            await this._initFullscreenWidget();
-        });
+    _closePopup() {
+        this.popupClosed.emit();
     }
-    //--------------------------------------------------------------------------
-    //
-    //  Functions (lifecycle)
-    //
-    //--------------------------------------------------------------------------
     /**
-     * StencilJS: Called once just after the component is first connected to the DOM.
+     * Set the alertOpen member to false when the alert is closed
      */
-    async componentWillLoad() {
-        await this._initModules();
+    _alertClosed() {
+        this._alertOpen = false;
     }
     /**
-     * Renders the component.
+     * Open the edit record
      */
-    render() {
-        return (h(Host, null, h("div", { class: "fullscreen-widget", ref: (el) => { this._fullscreenElement = el; } })));
+    _openEditRecord() {
+        if (this._editEnabled) {
+            this._editRecordOpen = true;
+        }
+        else {
+            this._alertOpen = true;
+        }
     }
     /**
-     * StencilJS: Called just after the component updates.
-     * It's never called during the first render().
+     * Go to the previous feature in the features widget
      */
-    async componentDidUpdate() {
-        await this._initFullscreenWidget();
+    _back() {
+        this._features.previous();
+        this._count = this._getCount();
     }
     /**
-     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+     * Go to the next feature in the features widget
      */
-    async componentDidLoad() {
-        await this._initFullscreenWidget();
+    _next() {
+        this._features.next();
+        this._count = this._getCount();
     }
-    //--------------------------------------------------------------------------
-    //
-    //  Functions (protected)
-    //
-    //--------------------------------------------------------------------------
     /**
-     * Load esri javascript api modules
+     * Get the current index of total string
      *
-     * @returns Promise resolving when function is done
-     *
-     * @protected
+     * @returns the index of total string
      */
-    async _initModules() {
-        const [Fullscreen, reactiveUtils] = await loadModules([
-            "esri/widgets/Fullscreen",
-            "esri/core/reactiveUtils"
-        ]);
-        this.Fullscreen = Fullscreen;
-        this.reactiveUtils = reactiveUtils;
+    _getCount() {
+        var _a, _b, _c;
+        const index = (((_a = this._features) === null || _a === void 0 ? void 0 : _a.viewModel.selectedFeatureIndex) + 1).toString();
+        const total = (_c = (_b = this._features) === null || _b === void 0 ? void 0 : _b.features) === null || _c === void 0 ? void 0 : _c.length.toString();
+        return this._translations.indexOfTotal
+            .replace("{{index}}", index)
+            .replace("{{total}}", total);
+    }
+    /**
+     * Toggle the visibility of the features list view
+     */
+    _toggleListView() {
+        this._showListView = !this._showListView;
+        const i = this._features.selectedFeatureIndex;
+        this._features.open({
+            features: this.graphics,
+            featureMenuOpen: this._showListView
+        });
+        this._features.selectedFeatureIndex = i;
     }
     /**
-     * Initialize the search widget
+     * Fetches the component's translations
      *
+     * @returns Promise when complete
      * @protected
      */
-    async _initFullscreenWidget() {
-        if (this.mapView && this._fullscreenElement && !this.fullscreenWidget) {
-            this.fullscreenWidget = new this.Fullscreen({
-                view: this.mapView
-            });
-            await this.fullscreenWidget.when(() => {
-                if (this._fullscreenStateChangeHandle) {
-                    this._fullscreenStateChangeHandle.remove();
-                }
-                this._fullscreenStateChangeHandle = this.reactiveUtils.watch(() => this.fullscreenWidget.viewModel.state, (state) => this.fullscreenStateChange.emit(state));
-            });
-        }
-        else if (this.fullscreenWidget) {
-            this.fullscreenWidget.view = this.mapView;
-        }
+    async _getTranslations() {
+        const messages = await getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
+        "graphics": ["graphicsWatchHandler"],
+        "isMobile": ["isMobileWatchHandler"],
         "mapView": ["mapViewWatchHandler"]
     }; }
 };
-MapFullscreen.style = mapFullscreenCss;
+InfoCard.style = infoCardCss;
 
-const mapLegendCss = ":host{display:block}";
+const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.map-height{height:calc(100% - 51px)}.height-full{height:100%}.box-shadow{box-shadow:none !important}.visibility-hidden{visibility:hidden}.display-none{display:none}";
 
-const MapLegend = class {
+const MapCard = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.mapChanged = createEvent(this, "mapChanged", 7);
+        this.beforeMapChanged = createEvent(this, "beforeMapChanged", 7);
+        /**
+         * boolean: When true the default map provided via url params has been loaded and should no longer override other maps
+         */
+        this._defaultWebmapHonored = false;
+        /**
+         * string: the id of map currently displayed
+         */
+        this._loadedId = "";
+        this.defaultWebmapId = "";
+        this.enableHome = undefined;
+        this.enableLegend = undefined;
+        this.enableFloorFilter = undefined;
+        this.enableFullscreen = undefined;
+        this.enableSingleExpand = true;
+        this.enableSearch = undefined;
+        this.enableBasemap = undefined;
+        this.basemapConfig = undefined;
+        this.hidden = undefined;
+        this.homeZoomIndex = 3;
+        this.homeZoomPosition = "top-left";
+        this.homeZoomToolsSize = "m";
+        this.mapInfos = [];
+        this.mapWidgetsIndex = 0;
+        this.mapWidgetsPosition = "top-right";
+        this.mapWidgetsSize = "m";
         this.mapView = undefined;
-        this.legendWidget = undefined;
+        this.stackTools = true;
+        this.theme = undefined;
+        this.toolOrder = undefined;
+        this._searchConfiguration = undefined;
+        this._webMapInfo = undefined;
     }
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
-    async mapViewWatchHandler() {
-        await this.mapView.when(() => {
-            this._initLegend(this.mapView);
-        });
+    /**
+     * Add/remove home widget
+     */
+    enableHomeWatchHandler() {
+        this._initHome();
+    }
+    /**
+     * Listen for changes to map info and load the appropriate map
+     */
+    async mapInfoChange(evt) {
+        await this._loadMap(evt.detail);
     }
-    //--------------------------------------------------------------------------
-    //
-    //  Methods (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
-    //  Events (public)
-    //
-    //--------------------------------------------------------------------------
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -338,21 +367,18 @@ const MapLegend = class {
      * StencilJS: Called once just after the component is first connected to the DOM.
      */
     async componentWillLoad() {
-        return this._initModules();
+        await this._initModules();
     }
     /**
-     * StencilJS: Renders the component.
+     * Renders the component.
      */
     render() {
-        return (h(Host, null, h("div", { ref: (el) => { this._legendElement = el; } })));
-    }
-    /**
-     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
-     */
-    async componentDidLoad() {
-        if (this.mapView) {
-            await this.mapViewWatchHandler();
-        }
+        var _a, _b;
+        const mapClass = this.hidden ? "visibility-hidden" : "";
+        const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
+        const mapPickerClass = ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) > 1 ? "" : "display-none";
+        const mapHeightClass = ((_b = this.mapInfos) === null || _b === void 0 ? void 0 : _b.length) > 1 ? "map-height" : "height-full";
+        return (h(Host, null, h("map-picker", { class: mapPickerClass, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: this.enableSingleExpand, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
     }
     //--------------------------------------------------------------------------
     //
@@ -367,33 +393,91 @@ const MapLegend = class {
      * @protected
      */
     async _initModules() {
-        const [Legend] = await loadModules([
-            "esri/widgets/Legend"
+        const [WebMap, MapView, Home] = await loadModules([
+            "esri/WebMap",
+            "esri/views/MapView",
+            "esri/widgets/Home"
         ]);
-        this.Legend = Legend;
+        this.WebMap = WebMap;
+        this.MapView = MapView;
+        this.Home = Home;
     }
     /**
-     * Initialize the basemap gallery or reset the current view if it already exists
+     * Load the webmap for the provided webMapInfo
+     *
+     * @param webMapInfo the webmap id and name to load
      */
-    _initLegend(view) {
-        if (view && this.Legend) {
-            if (!this.legendWidget) {
-                this.legendWidget = new this.Legend({
-                    container: this._legendElement,
-                    view
+    async _loadMap(webMapInfo) {
+        var _a;
+        // on the first render use the default webmap id if provided otherwise use the first child of the provided mapInfos
+        const loadDefaultMap = !this._defaultWebmapHonored && this.defaultWebmapId;
+        const defaultMap = (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(i => i.id === this.defaultWebmapId);
+        const mapConfigChanged = JSON.stringify(webMapInfo) !== JSON.stringify(this._webMapInfo);
+        this._webMapInfo = loadDefaultMap && defaultMap ? defaultMap[0] :
+            !(webMapInfo === null || webMapInfo === void 0 ? void 0 : webMapInfo.id) && this.mapInfos.length > 0 ? this.mapInfos[0] : webMapInfo;
+        const id = this._webMapInfo.id;
+        const isDefaultMap = loadDefaultMap && (webMapInfo === null || webMapInfo === void 0 ? void 0 : webMapInfo.id) === this.defaultWebmapId;
+        if ((this._loadedId !== id && !loadDefaultMap) || isDefaultMap) {
+            const webMap = new this.WebMap({
+                portalItem: { id }
+            });
+            this.mapView = new this.MapView({
+                container: this._mapDiv,
+                map: webMap,
+                resizeAlign: "center"
+            });
+            this._loadedId = id;
+            this._searchConfiguration = this._webMapInfo.searchConfiguration;
+            this.beforeMapChanged.emit();
+            await this.mapView.when(() => {
+                this._initHome();
+                this.mapView.ui.add(this._mapTools, { position: this.mapWidgetsPosition, index: this.mapWidgetsIndex });
+                this._defaultWebmapHonored = isDefaultMap ? true : this._defaultWebmapHonored;
+                this.mapChanged.emit({
+                    id: id,
+                    mapView: this.mapView
                 });
-            }
-            else {
-                this.legendWidget.view = view;
-            }
+            });
+        }
+        else if (loadDefaultMap) {
+            this._defaultWebmapHonored = true;
+            this._mapPicker.setMapByID(id);
+        }
+        else if (mapConfigChanged) {
+            // Map is the same so no need to reload but we need to update for any changes from the config
+            this._searchConfiguration = this._webMapInfo.searchConfiguration;
+            this.beforeMapChanged.emit();
+            this.mapChanged.emit({
+                id: id,
+                mapView: this.mapView
+            });
+        }
+    }
+    /**
+     * Add/remove the home widget base on enableHome prop
+     *
+     * @protected
+     */
+    _initHome() {
+        if (this.enableHome) {
+            this._homeWidget = new this.Home({
+                view: this.mapView
+            });
+            this.mapView.ui.add(this._homeWidget, { position: this.homeZoomPosition, index: this.homeZoomIndex });
+            const size = this.homeZoomToolsSize === "s" ? "32px" : this.homeZoomToolsSize === "m" ? "40px" : "48px";
+            this._homeWidget.domNode.style.height = size;
+            this._homeWidget.domNode.style.width = size;
+        }
+        else if (this._homeWidget) {
+            this.mapView.ui.remove(this._homeWidget);
         }
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "mapView": ["mapViewWatchHandler"]
+        "enableHome": ["enableHomeWatchHandler"]
     }; }
 };
-MapLegend.style = mapLegendCss;
+MapCard.style = mapCardCss;
 
 const mapPickerCss = ":host{display:block;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100%}.height-full{height:100%}.display-flex{display:flex}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-color-border-3)}.action-bar-size{height:51px;width:100%}.map-list{position:absolute;display:flex;flex-direction:column;overflow:hidden;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-color-background);z-index:1000;width:100%;height:-moz-fit-content;height:fit-content}.display-none{display:none}.align-center{align-items:center}";
 
@@ -553,175 +637,6 @@ const MapPicker = class {
 };
 MapPicker.style = mapPickerCss;
 
-const mapSearchCss = ":host{display:block}.search-widget{width:100% !important;border:1px solid var(--calcite-color-border-input)}";
-
-const MapSearch = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.mapView = undefined;
-        this.popupEnabled = false;
-        this.resultGraphicEnabled = false;
-        this.searchConfiguration = undefined;
-        this.searchTerm = undefined;
-        this.searchWidget = undefined;
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Watch handlers
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * Called each time the searchConfiguration prop is changed.
-     *
-     * @returns Promise when complete
-     */
-    async watchSearchConfigurationHandler() {
-        this._initSearchWidget();
-    }
-    /**
-     * Called each time the mapView prop is changed.
-     *
-     * @returns Promise when complete
-     */
-    async mapViewWatchHandler() {
-        await this.mapView.when(() => {
-            this._initSearchWidget();
-        });
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Methods (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
-    //  Events (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
-    //  Functions (lifecycle)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * StencilJS: Called once just after the component is first connected to the DOM.
-     */
-    async componentWillLoad() {
-        await this._initModules();
-    }
-    /**
-     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
-     */
-    async componentDidLoad() {
-        return this._initSearchWidget();
-    }
-    /**
-     * Renders the component.
-     */
-    render() {
-        return (h(Host, null, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } })));
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Functions (protected)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * Load esri javascript api modules
-     *
-     * @returns Promise resolving when function is done
-     *
-     * @protected
-     */
-    async _initModules() {
-        const [Search, FeatureLayer] = await loadModules([
-            "esri/widgets/Search",
-            "esri/layers/FeatureLayer"
-        ]);
-        this.Search = Search;
-        this.FeatureLayer = FeatureLayer;
-    }
-    /**
-     * Initialize the search widget
-     *
-     * @protected
-     */
-    _initSearchWidget() {
-        if (this.mapView && this._searchElement && !this.searchWidget) {
-            let searchOptions = {
-                view: this.mapView,
-                container: this._searchElement,
-                searchTerm: this.searchTerm
-            };
-            if (this.searchConfiguration) {
-                const searchConfiguration = this._getSearchConfig(this.searchConfiguration, this.mapView);
-                searchOptions = Object.assign({}, searchConfiguration);
-            }
-            this.searchWidget = new this.Search(searchOptions);
-            this.searchWidget.popupEnabled = this.popupEnabled;
-            this.searchWidget.resultGraphicEnabled = this.resultGraphicEnabled;
-        }
-        else {
-            if (this.searchWidget) {
-                this.searchWidget.view = this.mapView;
-            }
-        }
-    }
-    /**
-     * Initialize the search widget based on user defined configuration
-     *
-     * @param searchConfiguration search configuration defined by the user
-     * @param view the current map view
-     *
-     * @protected
-     */
-    _getSearchConfig(searchConfiguration, view) {
-        const INCLUDE_DEFAULT_SOURCES = "includeDefaultSources";
-        const sources = searchConfiguration.sources;
-        if ((sources === null || sources === void 0 ? void 0 : sources.length) > 0) {
-            searchConfiguration[INCLUDE_DEFAULT_SOURCES] = false;
-            sources.forEach((source) => {
-                var _a, _b;
-                const isLayerSource = source.hasOwnProperty("layer");
-                if (isLayerSource) {
-                    const layerSource = source;
-                    const layerId = (_a = layerSource.layer) === null || _a === void 0 ? void 0 : _a.id;
-                    const layerFromMap = layerId ? view.map.findLayerById(layerId) : null;
-                    const layerUrl = (_b = layerSource === null || layerSource === void 0 ? void 0 : layerSource.layer) === null || _b === void 0 ? void 0 : _b.url;
-                    if (layerFromMap) {
-                        layerSource.layer = layerFromMap;
-                    }
-                    else if (layerUrl) {
-                        layerSource.layer = new this.FeatureLayer(layerUrl);
-                    }
-                }
-            });
-            sources === null || sources === void 0 ? void 0 : sources.forEach((source) => {
-                const isLocatorSource = source.hasOwnProperty("locator");
-                if (isLocatorSource) {
-                    const locatorSource = source;
-                    if ((locatorSource === null || locatorSource === void 0 ? void 0 : locatorSource.name) === "ArcGIS World Geocoding Service") {
-                        const outFields = locatorSource.outFields || ["Addr_type", "Match_addr", "StAddr", "City"];
-                        locatorSource.outFields = outFields;
-                        locatorSource.singleLineFieldName = "SingleLine";
-                    }
-                    locatorSource.url = locatorSource.url;
-                    delete locatorSource.url;
-                }
-            });
-        }
-        else {
-            searchConfiguration = Object.assign(Object.assign({}, searchConfiguration), { includeDefaultSources: true });
-        }
-        return searchConfiguration;
-    }
-    static get watchers() { return {
-        "searchConfiguration": ["watchSearchConfigurationHandler"],
-        "mapView": ["mapViewWatchHandler"]
-    }; }
-};
-MapSearch.style = mapSearchCss;
-
 const mapToolsCss = ":host{display:block}.display-none{display:none}.margin-top-1-2{margin-top:0.5rem}.square-32{width:32px;height:32px}.square-40{width:40px;height:40px}.square-48{width:48px;height:48px}.width-40{width:40px}.square-40-41{width:40px;height:41px}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.box-shadow{box-shadow:0 1px 2px rgba(0, 0, 0, 0.3)}.margin-bottom-1-2{margin-bottom:0.5rem}";
 
 const MapTools = class {
@@ -1079,4 +994,4 @@ const MapTools = class {
 };
 MapTools.style = mapToolsCss;
 
-export { BasemapGallery as basemap_gallery, FloorFilter as floor_filter, MapFullscreen as map_fullscreen, MapLegend as map_legend, MapPicker as map_picker, MapSearch as map_search, MapTools as map_tools };
+export { InfoCard as info_card, MapCard as map_card, MapPicker as map_picker, MapTools as map_tools };