@esri/solutions-components 0.7.24 → 0.7.25

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

@@ -8,94 +8,135 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b8a649fc.js');
-const locale = require('./locale-1ff119f5.js');
-const loadModules = require('./loadModules-46d14e81.js');
-const popupUtils = require('./popupUtils-8d5b6e94.js');
+const locale = require('./locale-a476e15d.js');
 require('./esri-loader-a91c0ec1.js');
 require('./_commonjsHelpers-384729db.js');
 
-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 basemapGalleryCss = ":host{display:block}";
 
-const InfoCard = class {
+const BasemapGallery = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.popupClosed = index.createEvent(this, "popupClosed", 7);
-        this.selectionChanged = index.createEvent(this, "selectionChanged", 7);
-        this.graphics = undefined;
-        this.isLoading = false;
-        this.isMobile = undefined;
         this.mapView = undefined;
-        this.zoomAndScrollToSelected = undefined;
-        this.allowEditing = true;
-        this._alertOpen = false;
-        this._count = "";
-        this._editRecordOpen = false;
-        this._mobileTitle = "";
-        this._showListView = false;
-        this._translations = undefined;
+        this.basemapConfig = undefined;
+        this.basemapWidget = undefined;
     }
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    async mapViewWatchHandler() {
+        await this.mapView.when(() => {
+            void this._initBaseMapGallery(this.mapView);
+        });
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Methods (public)
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Events (public)
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (lifecycle)
+    //
+    //--------------------------------------------------------------------------
     /**
-     * Watch for changes to the graphic and update the feature widget
+     * StencilJS: Called once just after the component is first connected to the DOM.
      */
-    async graphicsWatchHandler() {
-        await this.setGraphics();
+    async componentWillLoad() {
+        return this._initModules();
     }
     /**
-     * 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)
+     * StencilJS: Renders the component.
      */
-    async isMobileWatchHandler() {
-        await this._initFeaturesWidget();
+    render() {
+        return (index.h(index.Host, null, index.h("div", { ref: (el) => { this._basemapElement = el; } })));
     }
     /**
-     * Watch for changes to the mapView and re-init the Feature widget
+     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
      */
-    async mapViewWatchHandler() {
-        return await this._initFeaturesWidget();
+    async componentDidLoad() {
+        if (this.mapView) {
+            await this.mapViewWatchHandler();
+        }
     }
     //--------------------------------------------------------------------------
     //
-    //  Methods (public)
+    //  Functions (protected)
     //
     //--------------------------------------------------------------------------
     /**
-     * Get the current selected feature from the Features widget
+     * Load esri javascript api modules
      *
-     * @returns Promise resolving with the current feature
-     */
-    async getSelectedFeature() {
-        return this._features.selectedFeature;
-    }
-    /**
-     * Respond to and close the edit record display
+     * @returns Promise resolving when function is done
      *
-     * @returns a promise when the operation has completed
+     * @protected
      */
-    async closeEdit() {
-        this._editRecordOpen = false;
+    async _initModules() {
+        const [BasemapGallery, PortalBasemapsSource] = await locale.loadModules([
+            "esri/widgets/BasemapGallery",
+            "esri/widgets/BasemapGallery/support/PortalBasemapsSource"
+        ]);
+        this.BasemapGallery = BasemapGallery;
+        this.PortalBasemapsSource = PortalBasemapsSource;
     }
     /**
-     * Reset key properties when the layer selection changes
+     * Initialize the basemap gallery or reset the current view if it already exists
+     *
+     * @protected
      */
-    async layerSelectionChange() {
+    async _initBaseMapGallery(view) {
         var _a;
-        this._showListView = false;
-        if ((_a = this._features) === null || _a === void 0 ? void 0 : _a.viewModel) {
-            this._features.viewModel.featureMenuOpen = false;
-            this._features.close();
+        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
+            });
         }
     }
-    /**
-     * Refresh the info-card graphics
-     */
-    async refreshGraphics(evt) {
-        this.graphics = [...evt.detail];
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "mapView": ["mapViewWatchHandler"]
+    }; }
+};
+BasemapGallery.style = basemapGalleryCss;
+
+const floorFilterCss = ":host{display:block}";
+
+const FloorFilter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.levelChanged = index.createEvent(this, "levelChanged", 7);
+        this.enabled = undefined;
+        this.floorFilterWidget = undefined;
+        this.mapView = undefined;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    async mapViewWatchHandler() {
+        await this.mapView.when(() => {
+            this._initFloorFilter(this.mapView);
+        });
     }
     //--------------------------------------------------------------------------
     //
@@ -104,41 +145,12 @@ const InfoCard = class {
     //--------------------------------------------------------------------------
     /**
      * StencilJS: Called once just after the component is first connected to the DOM.
-     *
-     * @returns Promise when complete
      */
     async componentWillLoad() {
-        await this._initModules();
-        await this._getTranslations();
-        this._popupUtils = new popupUtils.PopupUtils();
+        return this._initModules();
     }
-    /**
-     * 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() {
-        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 (index.h(index.Host, null, this.isMobile && !this._editRecordOpen ? (index.h("calcite-panel", null, index.h("calcite-action", { class: "end-border", icon: "chevron-left", iconFlipRtl: true, onClick: () => this._closePopup(), scale: "s", slot: "header-actions-start", text: "" }), index.h("span", { class: "font-bold", slot: "header-content" }, this._mobileTitle))) : undefined, index.h("calcite-shell", { class: shellClass }, index.h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), index.h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), index.h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
-            index.h("div", { class: "display-flex top-border padding-1-2" }, index.h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (index.h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, index.h("span", null, this._translations.edit)), this.isMobile ? (index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-delete" }, index.h("span", null, this._translations.delete))) : undefined), !nextBackDisabled && index.h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, index.h("div", { class: "min-width-100" }, index.h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), index.h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, index.h("span", null, this._translations.back))), index.h("div", null, index.h("calcite-action", { icon: "list", onClick: () => this._toggleListView(), scale: "s", text: this._count, textEnabled: true })), index.h("div", { class: "min-width-100" }, index.h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), index.h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, index.h("span", null, this._translations.next))))), index.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 }), index.h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, index.h("div", { slot: "title" }, this._translations.editDisabled), index.h("div", { slot: "message" }, this._translations.enableEditing)))));
+        return (index.h(index.Host, null, index.h("div", { ref: (el) => { this._floorFilterElement = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -153,217 +165,174 @@ const InfoCard = class {
      * @protected
      */
     async _initModules() {
-        const [Features, reactiveUtils] = await loadModules.loadModules([
-            "esri/widgets/Features",
+        const [FloorFilter, reactiveUtils] = await locale.loadModules([
+            "esri/widgets/FloorFilter",
             "esri/core/reactiveUtils"
         ]);
-        this.Features = Features;
+        this.FloorFilter = FloorFilter;
         this.reactiveUtils = reactiveUtils;
     }
     /**
-     * Initializes the features widget if not created and updates the feature widget and other required states
-     *
-     * @protected
+     * Initialize the floor filter or reset the current view if it already exists
      */
-    async setGraphics() {
+    _initFloorFilter(view) {
         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();
-    }
-    /**
-     * Init the Feature widget so we can display the popup content
-     *
-     * @returns a promise when the operation has completed
-     *
-     * @protected
-     */
-    async _initFeaturesWidget() {
-        var _a;
-        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
-                    }
+        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
                 });
-                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]);
-                        }
-                    });
+                if (this._levelHandle) {
+                    this._levelHandle.remove();
                 }
+                this._levelHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.level, (level) => {
+                    this.levelChanged.emit(level);
+                });
             }
             else {
-                this._features.view = this.mapView;
-                this._features.visibleElements.actionBar = false;
-                this._features.visibleElements.closeButton = false;
-                this._features.visibleElements.heading = !this.isMobile;
+                this.floorFilterWidget.view = view;
             }
-        })) : Promise.resolve();
+        }
     }
-    /**
-     * Close the popup and emit the selected features
-     */
-    _closePopup() {
-        this.popupClosed.emit();
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "mapView": ["mapViewWatchHandler"]
+    }; }
+};
+FloorFilter.style = floorFilterCss;
+
+const mapFullscreenCss = ":host{display:block}";
+
+const MapFullscreen = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.fullscreenStateChange = index.createEvent(this, "fullscreenStateChange", 7);
+        this.mapView = undefined;
+        this.fullscreenWidget = undefined;
     }
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
     /**
-     * Set the alertOpen member to false when the alert is closed
+     * Called each time the mapView prop is changed.
+     *
+     * @returns Promise when complete
      */
-    _alertClosed() {
-        this._alertOpen = false;
+    async mapViewWatchHandler() {
+        await this.mapView.when(async () => {
+            await this._initFullscreenWidget();
+        });
     }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (lifecycle)
+    //
+    //--------------------------------------------------------------------------
     /**
-     * Open the edit record
+     * StencilJS: Called once just after the component is first connected to the DOM.
      */
-    _openEditRecord() {
-        if (this._editEnabled) {
-            this._editRecordOpen = true;
-        }
-        else {
-            this._alertOpen = true;
-        }
+    async componentWillLoad() {
+        await this._initModules();
     }
     /**
-     * Go to the previous feature in the features widget
+     * Renders the component.
      */
-    _back() {
-        this._features.previous();
-        this._count = this._getCount();
+    render() {
+        return (index.h(index.Host, null, index.h("div", { class: "fullscreen-widget", ref: (el) => { this._fullscreenElement = el; } })));
     }
     /**
-     * Go to the next feature in the features widget
+     * StencilJS: Called just after the component updates.
+     * It's never called during the first render().
      */
-    _next() {
-        this._features.next();
-        this._count = this._getCount();
+    async componentDidUpdate() {
+        await this._initFullscreenWidget();
     }
     /**
-     * Get the current index of total string
-     *
-     * @returns the index of total string
+     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
      */
-    _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);
+    async componentDidLoad() {
+        await this._initFullscreenWidget();
     }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (protected)
+    //
+    //--------------------------------------------------------------------------
     /**
-     * Toggle the visibility of the features list view
+     * Load esri javascript api modules
+     *
+     * @returns Promise resolving when function is done
+     *
+     * @protected
      */
-    _toggleListView() {
-        this._showListView = !this._showListView;
-        const i = this._features.selectedFeatureIndex;
-        this._features.open({
-            features: this.graphics,
-            featureMenuOpen: this._showListView
-        });
-        this._features.selectedFeatureIndex = i;
+    async _initModules() {
+        const [Fullscreen, reactiveUtils] = await locale.loadModules([
+            "esri/widgets/Fullscreen",
+            "esri/core/reactiveUtils"
+        ]);
+        this.Fullscreen = Fullscreen;
+        this.reactiveUtils = reactiveUtils;
     }
     /**
-     * Fetches the component's translations
+     * Initialize the search widget
      *
-     * @returns Promise when complete
      * @protected
      */
-    async _getTranslations() {
-        const messages = await locale.getLocaleComponentStrings(this.el);
-        this._translations = messages[0];
+    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;
+        }
     }
-    get el() { return index.getElement(this); }
     static get watchers() { return {
-        "graphics": ["graphicsWatchHandler"],
-        "isMobile": ["isMobileWatchHandler"],
         "mapView": ["mapViewWatchHandler"]
     }; }
 };
-InfoCard.style = infoCardCss;
+MapFullscreen.style = mapFullscreenCss;
 
-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 mapLegendCss = ":host{display:block}";
 
-const MapCard = class {
+const MapLegend = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.mapChanged = index.createEvent(this, "mapChanged", 7);
-        this.beforeMapChanged = index.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.stackTools = true;
-        this.theme = undefined;
-        this.toolOrder = undefined;
-        this._searchConfiguration = undefined;
-        this._webMapInfo = undefined;
+        this.legendWidget = undefined;
     }
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
-    /**
-     * 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);
+    async mapViewWatchHandler() {
+        await this.mapView.when(() => {
+            this._initLegend(this.mapView);
+        });
     }
     //--------------------------------------------------------------------------
     //
+    //  Methods (public)
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Events (public)
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
     //  Functions (lifecycle)
     //
     //--------------------------------------------------------------------------
@@ -371,18 +340,21 @@ const MapCard = class {
      * StencilJS: Called once just after the component is first connected to the DOM.
      */
     async componentWillLoad() {
-        await this._initModules();
+        return this._initModules();
     }
     /**
-     * Renders the component.
+     * StencilJS: Renders the component.
      */
     render() {
-        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 (index.h(index.Host, null, index.h("map-picker", { class: mapPickerClass, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), index.h("div", { class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), index.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 })));
+        return (index.h(index.Host, null, index.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();
+        }
     }
     //--------------------------------------------------------------------------
     //
@@ -397,91 +369,33 @@ const MapCard = class {
      * @protected
      */
     async _initModules() {
-        const [WebMap, MapView, Home] = await loadModules.loadModules([
-            "esri/WebMap",
-            "esri/views/MapView",
-            "esri/widgets/Home"
+        const [Legend] = await locale.loadModules([
+            "esri/widgets/Legend"
         ]);
-        this.WebMap = WebMap;
-        this.MapView = MapView;
-        this.Home = Home;
+        this.Legend = Legend;
     }
     /**
-     * Load the webmap for the provided webMapInfo
-     *
-     * @param webMapInfo the webmap id and name to load
+     * Initialize the basemap gallery or reset the current view if it already exists
      */
-    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
+    _initLegend(view) {
+        if (view && this.Legend) {
+            if (!this.legendWidget) {
+                this.legendWidget = new this.Legend({
+                    container: this._legendElement,
+                    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);
+            }
+            else {
+                this.legendWidget.view = view;
+            }
         }
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "enableHome": ["enableHomeWatchHandler"]
+        "mapView": ["mapViewWatchHandler"]
     }; }
 };
-MapCard.style = mapCardCss;
+MapLegend.style = mapLegendCss;
 
 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}";
 
@@ -641,6 +555,175 @@ 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) {
+        index.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 (index.h(index.Host, null, index.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 locale.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 {
@@ -817,7 +900,7 @@ const MapTools = class {
      * @protected
      */
     async _initModules() {
-        const [Expand] = await loadModules.loadModules([
+        const [Expand] = await locale.loadModules([
             "esri/widgets/Expand"
         ]);
         this.Expand = Expand;
@@ -998,7 +1081,10 @@ const MapTools = class {
 };
 MapTools.style = mapToolsCss;
 
-exports.info_card = InfoCard;
-exports.map_card = MapCard;
+exports.basemap_gallery = BasemapGallery;
+exports.floor_filter = FloorFilter;
+exports.map_fullscreen = MapFullscreen;
+exports.map_legend = MapLegend;
 exports.map_picker = MapPicker;
+exports.map_search = MapSearch;
 exports.map_tools = MapTools;