@esri/solutions-components 0.7.19 → 0.7.20

package/dist/cjs/basemap-gallery_7.cjs.entry.js

@@ -731,17 +731,24 @@ const mapToolsCss = ":host{display:block}.display-none{display:none}.margin-top-
 const MapTools = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * string[]: List of widget names that have been added to the UI
+         * This prop is only used when enableSingleExpand is false
+         */
+        this._widgets = [];
         this.basemapConfig = undefined;
         this.enableLegend = undefined;
         this.enableFloorFilter = undefined;
         this.enableFullscreen = undefined;
         this.enableSearch = undefined;
         this.enableBasemap = undefined;
-        this.enableMapToolsExpand = undefined;
+        this.enableHome = undefined;
+        this.enableSingleExpand = undefined;
         this.homeZoomToolsSize = "m";
         this.layout = "vertical";
         this.mapView = undefined;
         this.mapWidgetsSize = "m";
+        this.position = "top-right";
         this.searchConfiguration = undefined;
         this.stackTools = true;
         this.toolOrder = undefined;
@@ -774,7 +781,7 @@ const MapTools = class {
     async _showBasemapWidgetWatchHandler(v) {
         if (v) {
             this.mapView.ui.add(this._basemapElement.basemapWidget, {
-                position: "top-right",
+                position: this.position,
                 index: 1
             });
         }
@@ -789,7 +796,7 @@ const MapTools = class {
         const widget = this._floorFilterElement.floorFilterWidget;
         if (v) {
             this.mapView.ui.add(widget, {
-                position: "top-right",
+                position: this.position,
                 index: 1
             });
         }
@@ -819,7 +826,7 @@ const MapTools = class {
     async _showLegendWidgetWatchHandler(v) {
         if (v) {
             this.mapView.ui.add(this._legendElement.legendWidget, {
-                position: "top-right",
+                position: this.position,
                 index: 1
             });
         }
@@ -833,7 +840,7 @@ const MapTools = class {
     async _showSearchWidgetWatchHandler(v) {
         if (v) {
             this.mapView.ui.add(this._searchElement.searchWidget, {
-                position: "top-right",
+                position: this.position,
                 index: 1
             });
         }
@@ -861,6 +868,7 @@ const MapTools = class {
      */
     async componentWillLoad() {
         await this._getTranslations();
+        await this._initModules();
     }
     /**
      * StencilJS: Renders the component.
@@ -876,10 +884,28 @@ const MapTools = class {
         const fullscreenClass = this._showFullscreen ? "" : "display-none";
         const expandTip = this._showTools ? this._translations.collapse : this._translations.expand;
         const containerClass = !this.enableBasemap && !this.enableFullscreen && !this.enableLegend && !this.enableSearch ? "display-none" : "";
-        const toolMarginClass = this.enableMapToolsExpand ? "margin-top-1-2" : "";
+        const toolMarginClass = this.enableSingleExpand ? "margin-top-1-2" : "";
         const toolOrder = this.toolOrder ? this.toolOrder : ["legend", "search", "fullscreen", "floorfilter"];
         const shadowClass = this.stackTools ? "box-shadow" : "";
-        return (index.h(index.Host, null, index.h("div", { class: containerClass }, this.enableMapToolsExpand ? (index.h("div", { class: "box-shadow" }, this._getActionGroup(toggleIcon, false, expandTip, () => this._toggleTools()))) : undefined, index.h("div", { class: `${toolMarginClass} ${shadowClass} ${toolsClass}` }, this._getMapWidgets(toolOrder))), index.h("basemap-gallery", { basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), index.h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, resultGraphicEnabled: true, searchConfiguration: this.searchConfiguration }), index.h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), index.h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, onFullscreenStateChange: (evt) => this._fullscreenStateChange(evt.detail), ref: (el) => { this._fullscreenElement = el; } }), index.h("floor-filter", { class: floorFilterClass, enabled: this.enableFloorFilter, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
+        return (index.h(index.Host, null, index.h("div", { class: containerClass }, this.enableSingleExpand ? (index.h("div", { class: "box-shadow" }, this._getActionGroup(toggleIcon, false, expandTip, () => this._toggleTools()))) : undefined, index.h("div", { class: `${toolMarginClass} ${shadowClass} ${toolsClass}` }, this._getMapWidgets(toolOrder))), index.h("basemap-gallery", { basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), index.h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, resultGraphicEnabled: true, searchConfiguration: this.searchConfiguration }), index.h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), index.h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, onFullscreenStateChange: (evt) => this._fullscreenStateChange(evt.detail), ref: (el) => { this._fullscreenElement = el; } }), index.h("floor-filter", { class: floorFilterClass, enabled: this.enableFloorFilter, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Load esri javascript api modules
+     *
+     * @returns Promise resolving when function is done
+     *
+     * @protected
+     */
+    async _initModules() {
+        const [Expand] = await loadModules.loadModules([
+            "esri/widgets/Expand"
+        ]);
+        this.Expand = Expand;
     }
     /**
      * Set the size of the zoom tools based on the user defined homeZoomToolsSize variable.
@@ -907,27 +933,28 @@ const MapTools = class {
         const fullscreenIcon = this._showFullscreen ? "full-screen-exit" : "full-screen";
         const fullscreenTip = this._showFullscreen ? this._translations.exitFullscreen : this._translations.enterFullscreen;
         return toolOrder.map(t => {
+            var _a, _b, _c, _d, _e;
             switch (t) {
                 case "legend":
-                    return this.enableLegend ?
+                    return this.enableLegend && this.enableSingleExpand ?
                         this._getActionGroup("legend", false, this._translations.legend, () => this._showLegend()) :
-                        undefined;
+                        this.enableLegend ? this._getWidget(t, (_a = this._legendElement) === null || _a === void 0 ? void 0 : _a.legendWidget, true) : undefined;
                 case "search":
-                    return this.enableSearch ?
+                    return this.enableSearch && this.enableSingleExpand ?
                         this._getActionGroup("magnifying-glass", false, this._translations.search, () => this._search()) :
-                        undefined;
+                        this.enableSearch ? this._getWidget(t, (_b = this._searchElement) === null || _b === void 0 ? void 0 : _b.searchWidget, true) : undefined;
                 case "fullscreen":
-                    return this.enableFullscreen ?
+                    return this.enableFullscreen && this.enableSingleExpand ?
                         this._getActionGroup(fullscreenIcon, false, fullscreenTip, () => this._expand()) :
-                        undefined;
+                        this.enableFullscreen ? this._getWidget(t, (_c = this._fullscreenElement) === null || _c === void 0 ? void 0 : _c.fullscreenWidget, false) : undefined;
                 case "basemap":
-                    return this.enableBasemap ?
+                    return this.enableBasemap && this.enableSingleExpand ?
                         this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker()) :
-                        undefined;
+                        this.enableBasemap ? this._getWidget(t, (_d = this._basemapElement) === null || _d === void 0 ? void 0 : _d.basemapWidget, true) : undefined;
                 case "floorfilter":
-                    return this.enableFloorFilter && this._hasFloorInfo ?
+                    return this.enableFloorFilter && this._hasFloorInfo && this.enableSingleExpand ?
                         this._getActionGroup("urban-model", false, this._translations.floorFilter, () => this._toggleFloorFilter()) :
-                        undefined;
+                        this.enableFloorFilter && this._hasFloorInfo ? this._getWidget(t, (_e = this._floorFilterElement) === null || _e === void 0 ? void 0 : _e.floorFilterWidget, true) : undefined;
             }
         });
     }
@@ -946,11 +973,6 @@ const MapTools = class {
             this._showFullscreen = true;
         }
     }
-    //--------------------------------------------------------------------------
-    //
-    //  Functions (protected)
-    //
-    //--------------------------------------------------------------------------
     /**
      * Get a calcite action group for the current action
      *
@@ -969,12 +991,40 @@ const MapTools = class {
         const shadowClass = this.stackTools ? "" : "box-shadow";
         return (index.h("div", null, index.h("calcite-action", { alignment: "center", class: `${sizeClass} ${stackClass} border-bottom ${shadowClass}`, compact: false, disabled: disabled, icon: icon, id: icon, onClick: func, scale: "s", text: "" }, index.h("calcite-icon", { icon: "cheveron-up", scale: "s", slot: "icon" })), index.h("calcite-tooltip", { label: "", placement: "trailing", "reference-element": icon }, index.h("span", null, tip))));
     }
-    // need to discuss this with the team
+    /**
+     * Add the widget to the UI and optionally to an Expand widget
+     *
+     * @param name the icon to display for the current action
+     * @param content the widget to display
+     * @param internalExpand when true the widget will be added to an Expand widget
+     *
+     * @protected
+     */
+    _getWidget(name, content, internalExpand) {
+        if (this._widgets.indexOf(name) < 0 && this.mapView && content) {
+            const i = this.toolOrder.indexOf(name);
+            const exp = new this.Expand({
+                view: this.mapView,
+                content
+            });
+            const v = this.enableHome ? 2 : 1;
+            this.mapView.ui.add(internalExpand ? exp : content, {
+                position: this.position,
+                index: i > -1 ? i + v : 1
+            });
+            this._widgets.push(name);
+        }
+    }
+    /**
+     * Show/Hide the legend widget
+     */
     _showLegend() {
         this._showLegendWidget = !this._showLegendWidget;
         this._showTools = false;
     }
-    // Need to discuss this with the team
+    /**
+     * Show/Hide the search widget
+     */
     _search() {
         this._showSearchWidget = !this._showSearchWidget;
         this._showTools = false;

package/dist/cjs/calcite-alert_3.cjs.entry.js

@@ -643,6 +643,7 @@ const InfoCard = class {
             this._features.clear();
             this._features.close();
         }
+        this._count = this._getCount();
     }
     /**
      * Watch for changes to the isMobile prop then init the Features widget
@@ -679,6 +680,14 @@ const InfoCard = class {
     async closeEdit() {
         this._editRecordOpen = false;
     }
+    /**
+     * Reset key properties when the layer selection changes
+     */
+    async layerSelectionChange() {
+        this._showListView = false;
+        this._features.viewModel.featureMenuOpen = false;
+        this._features.close();
+    }
     /**
      * Refresh the info-card graphics
      */
@@ -712,7 +721,7 @@ const InfoCard = class {
         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" : "";
-        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" }, 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 ? (index.h("calcite-button", { appearance: "outline", class: "padding-inline-start-1", id: "solutions-cancel", onClick: () => this._closePopup(), width: "full" }, this._translations.cancel)) : 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-cancel" }, index.h("span", null, this._translations.cancel))) : undefined), 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._getCount(), 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: (_c = this._features) === null || _c === void 0 ? void 0 : _c.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, 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" }, 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 ? (index.h("calcite-button", { appearance: "outline", class: "padding-inline-start-1", id: "solutions-cancel", onClick: () => this._closePopup(), width: "full" }, this._translations.cancel)) : 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-cancel" }, index.h("span", null, this._translations.cancel))) : undefined), 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: (_c = this._features) === null || _c === void 0 ? void 0 : _c.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)))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/cjs/calcite-input-date-picker_3.cjs.entry.js

@@ -24,7 +24,7 @@ const focusTrapComponent = require('./focusTrapComponent-3add574e.js');
 const guid = require('./guid-1a466ca6.js');
 const component = require('./component-c270a500.js');
 const loadModules = require('./loadModules-51c30ab9.js');
-const locale$1 = require('./locale-9b9d0e94.js');
+const locale$1 = require('./locale-dab3f46a.js');
 const mode = require('./mode-d6c12b38.js');
 require('./resources-6c60363a.js');
 require('./debounce-30afab47.js');
@@ -783,6 +783,7 @@ const InstantAppsFilterList = class {
         this.extentSelectorConfig = undefined;
         this.urlParams = undefined;
         this.view = undefined;
+        this.zoomBtn = true;
         this.loading = undefined;
         this.filterLayerExpressions = undefined;
         this.messages = undefined;
@@ -937,7 +938,7 @@ const InstantAppsFilterList = class {
     renderZoomTo(layerExpression) {
         var _a;
         const id = (layerExpression === null || layerExpression === void 0 ? void 0 : layerExpression.sublayerId) ? `zoom-to-${layerExpression.id}-${layerExpression.sublayerId}` : `zoom-to-${layerExpression.id}`;
-        return (index.h("div", { class: CSS$1.zoomTo }, index.h("calcite-button", { id: id, appearance: "transparent", kind: "neutral", scale: "s", iconStart: "magnifying-glass-plus", onClick: this.handleZoomTo.bind(this, layerExpression) }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.zoomTo)));
+        return this.zoomBtn ? (index.h("div", { class: CSS$1.zoomTo }, index.h("calcite-button", { id: id, appearance: "transparent", kind: "neutral", scale: "s", iconStart: "magnifying-glass-plus", onClick: this.handleZoomTo.bind(this, layerExpression) }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.zoomTo))) : undefined;
     }
     handleResetDatePicker(expression, layerExpression) {
         const datePicker = this.panelEl.querySelector(`[id='${expression.id}']`);
@@ -1762,6 +1763,7 @@ const InstantAppsSocialShare = class {
         this.embed = false;
         this.shareButtonColor = 'neutral';
         this.shareButtonType = 'button';
+        this.shareButtonScale = undefined;
         this.iframeInnerText = '';
         this.popoverButtonIconScale = 'm';
         this.view = undefined;
@@ -1893,7 +1895,7 @@ const InstantAppsSocialShare = class {
         return (index.h(index.Host, null, this.mode === 'popover'
             ? [
                 index.h("calcite-popover", { ref: (el) => (this.popoverRef = el), label: (_b = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.share) === null || _b === void 0 ? void 0 : _b.label, referenceElement: "shareButton", placement: "bottom-start", scale: this.scale }, dialogContent),
-                (this.renderButton()),
+                this.renderButton(),
             ]
             : [
                 dialogContent,
@@ -1903,7 +1905,8 @@ const InstantAppsSocialShare = class {
     }
     renderButton() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        return this.shareButtonType === "button" ? (index.h("calcite-button", { ref: el => (this.popoverButtonRef = el), onClick: this.togglePopover.bind(this), id: "shareButton", class: CSS.popoverButton, kind: this.shareButtonColor, appearance: "transparent", label: (_b = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.share) === null || _b === void 0 ? void 0 : _b.label, title: (_d = (_c = this.messages) === null || _c === void 0 ? void 0 : _c.share) === null || _d === void 0 ? void 0 : _d.label, scale: this.scale }, index.h("div", { class: CSS.iconContainer }, index.h("calcite-icon", { icon: "share", scale: this.popoverButtonIconScale })))) : (index.h("calcite-action", { ref: el => (this.popoverButtonRef = el), onClick: this.togglePopover.bind(this), id: "shareButton", class: CSS.popoverButton, appearance: "transparent", label: (_f = (_e = this.messages) === null || _e === void 0 ? void 0 : _e.share) === null || _f === void 0 ? void 0 : _f.label, title: (_h = (_g = this.messages) === null || _g === void 0 ? void 0 : _g.share) === null || _h === void 0 ? void 0 : _h.label, scale: this.scale, text: "" }, index.h("div", { class: CSS.iconContainer }, index.h("calcite-icon", { icon: "share", scale: this.popoverButtonIconScale }))));
+        const scale = this.shareButtonScale != null ? this.shareButtonScale : this.scale;
+        return this.shareButtonType === 'button' ? (index.h("calcite-button", { ref: el => (this.popoverButtonRef = el), onClick: this.togglePopover.bind(this), id: "shareButton", class: CSS.popoverButton, kind: this.shareButtonColor, appearance: "transparent", label: (_b = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.share) === null || _b === void 0 ? void 0 : _b.label, title: (_d = (_c = this.messages) === null || _c === void 0 ? void 0 : _c.share) === null || _d === void 0 ? void 0 : _d.label, scale: scale }, index.h("div", { class: CSS.iconContainer }, index.h("calcite-icon", { icon: "share", scale: this.popoverButtonIconScale })))) : (index.h("calcite-action", { ref: el => (this.popoverButtonRef = el), onClick: this.togglePopover.bind(this), id: "shareButton", class: CSS.popoverButton, appearance: "transparent", label: (_f = (_e = this.messages) === null || _e === void 0 ? void 0 : _e.share) === null || _f === void 0 ? void 0 : _f.label, title: (_h = (_g = this.messages) === null || _g === void 0 ? void 0 : _g.share) === null || _h === void 0 ? void 0 : _h.label, scale: scale, text: "" }, index.h("div", { class: CSS.iconContainer }, index.h("calcite-icon", { icon: "share", scale: this.popoverButtonIconScale }))));
     }
     renderSuccess() {
         var _a;

package/dist/cjs/card-manager_3.cjs.entry.js

@@ -499,7 +499,8 @@ const LayerTable = class {
         var _a;
         const activeDependant = [
             "filter",
-            "list-check-all"
+            "list-check-all",
+            "selected-items-filter"
         ];
         (_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.forEach(ti => {
             if (ti && activeDependant.indexOf(ti.icon) > -1) {
@@ -509,6 +510,9 @@ const LayerTable = class {
                 if (ti.icon === "list-check-all") {
                     ti.active = this._selectAllActive;
                 }
+                if (ti.icon === "selected-items-filter") {
+                    ti.active = this._showOnlySelected;
+                }
             }
         });
     }
@@ -1137,7 +1141,7 @@ const LayerTable = class {
      */
     _filterModal() {
         var _a, _b, _c;
-        return (index.h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: async () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, index.h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), index.h("div", { slot: "content" }, index.h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView }))));
+        return (index.h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: async () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, index.h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), index.h("div", { slot: "content" }, index.h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
     }
     /**
      * Reset the filter active prop
@@ -1250,6 +1254,7 @@ const LayerTable = class {
         var _a;
         this._selectedIndexes = [];
         (_a = this._table) === null || _a === void 0 ? void 0 : _a.highlightIds.removeAll();
+        this._finishOnChange();
     }
     /**
      * When true the filter modal will be displayed
@@ -1462,7 +1467,7 @@ const MapCard = class {
         this.enableLegend = undefined;
         this.enableFloorFilter = undefined;
         this.enableFullscreen = undefined;
-        this.enableMapToolsExpand = true;
+        this.enableSingleExpand = true;
         this.enableSearch = undefined;
         this.enableBasemap = undefined;
         this.basemapConfig = undefined;
@@ -1518,7 +1523,7 @@ const MapCard = class {
         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, enableLegend: this.enableLegend, enableMapToolsExpand: this.enableMapToolsExpand, enableSearch: this.enableSearch, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
+        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 })));
     }
     //--------------------------------------------------------------------------
     //

package/dist/cjs/crowdsource-manager.cjs.entry.js

@@ -23,7 +23,6 @@ const CrowdsourceManager = class {
          * MapView.when is not fired when mapView is not currently visible
          */
         this._shouldSetMapView = false;
-        this.classicGrid = false;
         this.defaultCenter = "";
         this.defaultGlobalId = "";
         this.defaultLayer = "";
@@ -44,7 +43,6 @@ const CrowdsourceManager = class {
         this.enableBasemap = true;
         this.basemapConfig = undefined;
         this.showNewestFirst = true;
-        this.hideMap = false;
         this.mapInfos = [];
         this.onlyShowUpdatableLayers = true;
         this.searchConfiguration = undefined;
@@ -186,7 +184,7 @@ const CrowdsourceManager = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, null, index.h("calcite-shell", { class: "position-relative" }, index.h("calcite-panel", { class: "width-full height-full" }, this._getBody(this._layoutMode, this._panelOpen, this.hideMap, this._hideTable)), this._getFooter())));
+        return (index.h(index.Host, null, index.h("calcite-shell", { class: "position-relative" }, index.h("calcite-panel", { class: "width-full height-full" }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render
@@ -232,19 +230,13 @@ const CrowdsourceManager = class {
         let icon = "";
         switch (layoutMode) {
             case interfaces.ELayoutMode.HORIZONTAL:
-                icon = this.classicGrid ?
-                    (panelOpen ? "chevrons-down" : "chevrons-up") :
-                    (panelOpen ? "chevrons-up" : "chevrons-down");
+                icon = (panelOpen ? "chevrons-up" : "chevrons-down");
                 break;
             case interfaces.ELayoutMode.VERTICAL:
-                icon = this.classicGrid ?
-                    (panelOpen ? "chevrons-right" : "chevrons-left") :
-                    (panelOpen ? "chevrons-left" : "chevrons-right");
+                icon = (panelOpen ? "chevrons-left" : "chevrons-right");
                 break;
             case interfaces.ELayoutMode.GRID:
-                icon = this.classicGrid ?
-                    (panelOpen ? "chevrons-up" : "chevrons-down") :
-                    (panelOpen ? "chevrons-left" : "chevrons-right");
+                icon = (panelOpen ? "chevrons-left" : "chevrons-right");
                 break;
         }
         return icon;
@@ -262,11 +254,10 @@ const CrowdsourceManager = class {
         let sizeClass = "";
         switch (layoutMode) {
             case interfaces.ELayoutMode.HORIZONTAL:
-                sizeClass = `${this._isMobile && this.hideMap ? "height-0 " : panelOpen ? "height-1-2 display-grid" : "height-0"} width-full position-relative`;
+                sizeClass = `${panelOpen ? "height-1-2 display-grid" : "height-0"} width-full position-relative`;
                 break;
             case interfaces.ELayoutMode.GRID:
-                sizeClass = this.classicGrid ? `${panelOpen ? "position-relative" : "position-absolute-53"} height-full width-full display-flex` :
-                    `height-full position-relative ${panelOpen ? "width-1-3" : "width-0"}`;
+                sizeClass = `height-full position-relative ${panelOpen ? "width-1-3" : "width-0"}`;
                 break;
             case interfaces.ELayoutMode.VERTICAL:
                 sizeClass = `height-full position-relative ${panelOpen ? "width-1-2" : "width-0"}`;
@@ -290,9 +281,7 @@ const CrowdsourceManager = class {
                 sizeClass = `${panelOpen ? "height-1-2" : "height-full"} width-full display-flex flex-column`;
                 break;
             case interfaces.ELayoutMode.GRID:
-                sizeClass = this.classicGrid ?
-                    `${panelOpen ? "height-full" : "height-53"} position-relative width-full display-flex` :
-                    `${panelOpen ? "width-2-3" : "width-full"} height-full display-flex`;
+                sizeClass = `${panelOpen ? "width-2-3" : "width-full"} height-full display-flex`;
                 break;
             case interfaces.ELayoutMode.VERTICAL:
                 sizeClass = `${panelOpen ? "width-1-2" : "width-full"} height-full display-flex`;
@@ -305,47 +294,41 @@ const CrowdsourceManager = class {
      *
      * @param layoutMode ELayoutMode the current layout mode
      * @param panelOpen boolean indicates if all panels are open
-     * @param hideMap when true no map is displayed
      *
      * @returns the parent node that contains the table and map
      * @protected
      */
-    _getBody(layoutMode, panelOpen, hideMap, hideTable) {
-        const contentClass = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID && panelOpen ? "display-grid" :
-            layoutMode === interfaces.ELayoutMode.HORIZONTAL ? "" : "display-flex";
-        return this.classicGrid ? (index.h("calcite-panel", { class: "width-full height-full" }, index.h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getTable(layoutMode, panelOpen, hideTable), this._getMapAndCard(layoutMode, panelOpen, hideMap)))) : (index.h("calcite-panel", { class: "width-full height-full" }, index.h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideMap), this._getTable(layoutMode, panelOpen, hideTable))));
+    _getBody(layoutMode, panelOpen, hideTable) {
+        const contentClass = layoutMode === interfaces.ELayoutMode.HORIZONTAL ? "" : "display-flex";
+        return (index.h("calcite-panel", { class: "width-full height-full" }, index.h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen), this._getTable(layoutMode, panelOpen, hideTable))));
     }
     /**
      * Get the map and card nodes based for the current layout options
      *
      * @param layoutMode ELayoutMode the current layout mode
      * @param panelOpen boolean indicates if all panels are open
-     * @param hideMap when true no map is displayed
      *
      * @returns the map node
      * @protected
      */
-    _getMapAndCard(layoutMode, panelOpen, hideMap) {
+    _getMapAndCard(layoutMode, panelOpen) {
         const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen);
-        return this.classicGrid ? (index.h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getCardNode(), this._getMapNode(layoutMode, hideMap))) : (index.h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, hideMap), this._getPopupExpandNode()));
+        return (index.h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, panelOpen), this._getPopupExpandNode()));
     }
     /**
      * Get the map node based for the current layout options
      *
      * @param layoutMode ELayoutMode the current layout mode
-     * @param hideMap when true no map is displayed
+     * @param panelOpen boolean indicates if all panels are open
      *
      * @returns the map node
      * @protected
      */
-    _getMapNode(layoutMode, hideMap) {
+    _getMapNode(layoutMode, panelOpen) {
         var _a;
-        const mapDisplayClass = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ? "display-flex height-full width-1-2" :
-            layoutMode === interfaces.ELayoutMode.HORIZONTAL && !hideMap ? "" : layoutMode === interfaces.ELayoutMode.GRID && !hideMap ? "" : "visibility-hidden";
-        const mapContainerClass = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ? "width-full" :
-            this._layoutMode === interfaces.ELayoutMode.HORIZONTAL && !hideMap ? "" :
-                this._layoutMode === interfaces.ELayoutMode.HORIZONTAL && this._isMobile && this.hideMap ? "height-0" : "adjusted-height-50";
-        return (index.h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, index.h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableMapToolsExpand: true, enableSearch: this.enableSearch, hidden: this._expandPopup, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
+        const mapDisplayClass = layoutMode === interfaces.ELayoutMode.HORIZONTAL ? "" : layoutMode === interfaces.ELayoutMode.GRID ? "" : "visibility-hidden";
+        const mapContainerClass = this._layoutMode === interfaces.ELayoutMode.HORIZONTAL && (!this._isMobile || panelOpen) ? "" : "adjusted-height-50";
+        return (index.h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, index.h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: true, hidden: this._expandPopup, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
     }
     /**
      * Get the expand node for the popup information
@@ -362,7 +345,7 @@ const CrowdsourceManager = class {
         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._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
-        const containerClass = this._isMobile && this._hideTable && this.hideMap ? "position-fixed width-full height-full" : this._isMobile ? "display-none height-0" : "";
+        const containerClass = this._isMobile && this._hideTable ? "position-fixed width-full height-full" : this._isMobile ? "display-none height-0" : "";
         return (index.h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}` }, index.h("calcite-panel", null, !this._isMobile ? (index.h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, index.h("calcite-icon", { icon: "information", scale: "s" }), index.h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, index.h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? index.h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, index.h("span", null, tooltip)) : undefined, this._getCardNode())));
     }
     /**
@@ -399,10 +382,8 @@ const CrowdsourceManager = class {
         const icon = this._getDividerIcon(layoutMode, panelOpen);
         const tooltip = panelOpen ? this._translations.close : this._translations.open;
         const id = "toggle-layout";
-        const toggleLayout = layoutMode === interfaces.ELayoutMode.HORIZONTAL || this.classicGrid ? "horizontal" : "vertical";
-        const toggleSlot = this.classicGrid && layoutMode !== interfaces.ELayoutMode.VERTICAL ? "footer" :
-            this.classicGrid && layoutMode === interfaces.ELayoutMode.VERTICAL ? "panel-end" :
-                layoutMode === interfaces.ELayoutMode.HORIZONTAL ? "header" : "panel-start";
+        const toggleLayout = layoutMode === interfaces.ELayoutMode.HORIZONTAL ? "horizontal" : "vertical";
+        const toggleSlot = layoutMode === interfaces.ELayoutMode.HORIZONTAL ? "header" : "panel-start";
         const hasMapAndLayer = this.defaultWebmap && this.defaultLayer;
         return (index.h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (index.h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, index.h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), index.h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, index.h("span", null, tooltip)))) : undefined, index.h("div", { class: `width-full height-full position-relative` }, index.h("layer-table", { defaultGlobalId: hasMapAndLayer ? this._defaultGlobalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !this.defaultGlobalId ? this._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 }))));
     }
@@ -427,7 +408,6 @@ const CrowdsourceManager = class {
      * @param show when true the map, popup, and table will be displayed
      */
     showHideMapPopupAndTable(show) {
-        this.hideMap = show;
         this._expandPopup = false;
         this._hideTable = show;
         this._hideFooter = show;