@esri/solutions-components 0.10.7 → 0.10.8

package/dist/components/crowdsource-manager.js

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { a as ELayoutMode } from './interfaces.js';
 import { g as getLayerOrTable } from './mapViewUtils.js';
@@ -74,7 +74,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this.__registerHost();
         this.showIntroductionWindow = createEvent(this, "showIntroductionWindow", 7);
         this.showCoverPage = createEvent(this, "showCoverPage", 7);
-        this.appLayout = undefined;
+        this.appLayout = 'splitView';
         this.appProxies = undefined;
         this.basemapConfig = undefined;
         this.coverPageEnabled = undefined;
@@ -111,7 +111,6 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this.theme = "light";
         this.zoomAndScrollToSelected = false;
         this.zoomToScale = undefined;
-        this._expandPopup = false;
         this._hideFooter = false;
         this._hideTable = false;
         this._isMobile = false;
@@ -122,7 +121,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this._mapView = undefined;
         this._panelOpen = true;
         this._numSelected = 0;
-        this._tableOnly = false;
+        this._filterOpen = false;
     }
     get el() { return this; }
     //--------------------------------------------------------------------------
@@ -161,6 +160,18 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * MapView.when is not fired when mapView is not currently visible
      */
     _shouldSetMapView = false;
+    /**
+     * LayerExpression[]: All layer expressions from the current filter config for the currently selected layer
+     */
+    _layerExpressions;
+    /**
+     * HTMLInstantAppsFilterListElement: Component from Instant Apps that supports interacting with the current filter config
+     */
+    _filterList;
+    /**
+     * boolean: True when app is directly rendered to map view layout
+     */
+    _isMapViewOnLoad = false;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -177,7 +188,6 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      */
     hideMapOnLoadWatchHandler() {
         this.showHideMapPopupAndTable(this.hideMapOnLoad && !this._isMobile);
-        this._expandPopup = this.hideMapOnLoad && !this._isMobile;
     }
     //--------------------------------------------------------------------------
     //
@@ -211,16 +221,6 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
             this.showHideMapPopupAndTable(false);
         }
     }
-    /**
-     * Listen for idsFound event to be fired so we can know that all layer ids have been fetched
-     */
-    async idsFound(evt) {
-        const ids = evt.detail;
-        this._tableOnly = ids.tableIds.length > 0 && ids.layerIds.length === 0;
-        if (this._tableOnly) {
-            this._expandPopup = true;
-        }
-    }
     /**
      * Listen for layoutChanged event to be fired so we can adjust the layout
      */
@@ -236,14 +236,6 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
             await this._setMapView();
         });
     }
-    /**
-     * Listen for beforeMapChanged and minimize the popup if it's expanded
-     */
-    async beforeMapChanged() {
-        if (this._expandPopup) {
-            this._shouldSetMapView = true;
-        }
-    }
     /**
      * Get the layer for the provided layer id
      */
@@ -252,13 +244,13 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         const layer = await getLayerOrTable(this._mapView, id);
         await layer.when(() => {
             this._layer = layer;
+            this._initLayerExpressions();
         });
     }
     /**
      * Update the state expandPopup when mapInfoChange event occurs
      */
     async mapInfoChange() {
-        this._expandPopup = this.hideMapOnLoad && !this._isMobile;
         this._hideMapOnLoadHonored = false;
     }
     //--------------------------------------------------------------------------
@@ -281,7 +273,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     render() {
         // only avoid border when we have a header color that is not white
         const borderClass = this.popupHeaderColor && this.popupHeaderColor !== "#FFFFFF" ? "border-width-0" : "";
-        return (h(Host, { key: 'f434a8e24b111a32774e9d5683c2446ba35b504b' }, h("calcite-shell", { key: '017843c77fa2c52f0d957760ac3f57808d11d59f', class: "position-relative" }, h("calcite-panel", { key: 'bd8eeec3a013583789b9e1b251fed34e5896171e', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
+        return (h(Host, { key: 'bbe12b471976652c32fc0cb6277fdfc4171b2cd6' }, h("calcite-shell", { key: '00b85d8e681f5ab021e6efb63b603e3d2442f63c', class: "position-relative" }, h("calcite-panel", { key: 'f1a37f06f3023bb1c63b40eeca739e942c301e63', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal()));
     }
     /**
      * Called after each render
@@ -300,6 +292,12 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      */
     async componentDidLoad() {
         this._resizeObserver.observe(this.el);
+        // for backward compatibility if hidemaponload is true then render table layout as default
+        if (this.hideMapOnLoad) {
+            this.appLayout = 'tableView';
+        }
+        this._isMapViewOnLoad = this.appLayout === 'mapView';
+        this._setActiveLayout(this.appLayout);
     }
     //--------------------------------------------------------------------------
     //
@@ -317,6 +315,27 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         const deleteEnabled = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete;
         return this._isMobile && hasSelectedFeatures && !this._hideFooter ? (h("div", { class: `width-100`, slot: "footer" }, h("div", { class: "display-flex padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-show", onClick: () => this.showHideMapPopupAndTable(true), width: "full" }, this._translations.view.replace("{{n}}", this._numSelected.toString())), deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-full", id: "solutions-delete", ids: this._layerTable.selectedIds, layer: this._layer })) : undefined))) : undefined;
     }
+    /**
+     * sets the active layout to render
+     * @param appLayout new app layout
+     *
+     * @protected
+     */
+    _setActiveLayout(appLayout) {
+        //When going to splitView layout the panel should be open
+        if (appLayout === 'splitView' && !this._panelOpen) {
+            this._toggleLayout();
+        }
+        //Move the map node based on the selected layout
+        //for mapView layout show map in full view and or all other layout show in the card view
+        //for tableView the map will be hidden using css
+        if (appLayout === 'mapView') {
+            this._showMapInFullView();
+        }
+        else {
+            this._showMapInCardView();
+        }
+    }
     /**
      * Get the icon name to use for the divider icon based on the current layout
      *
@@ -442,8 +461,11 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * @protected
      */
     _getMapNode(panelOpen) {
-        const mapContainerClass = this._layoutMode === ELayoutMode.HORIZONTAL && (!this._isMobile || panelOpen) ? "" : "adjusted-height-50";
-        return (h("div", { class: `${mapContainerClass} overflow-hidden` }, h("map-card", { appProxies: this.appProxies, 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 && !this._isMobile, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: this.mapInfos?.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
+        const isMapLayout = this.appLayout === 'mapView';
+        const isTableLayout = this.appLayout === 'tableView';
+        const mapContainerClass = (isMapLayout || isTableLayout) ? "position-absolute-0" : this._layoutMode === ELayoutMode.HORIZONTAL && (!this._isMobile || panelOpen) ? "" : "adjusted-height-50";
+        const hasMapAndLayer = this.defaultWebmap && this.defaultLayer;
+        return (h("div", { class: `${mapContainerClass} overflow-hidden`, id: "card-mapView" }, h("map-card", { appProxies: this.appProxies, basemapConfig: this.basemapConfig, class: "width-full", defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", 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._isMobile && isTableLayout, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", isMapLayout: isMapLayout, isMobile: this._isMobile, mapInfo: this._mapInfo, mapInfos: this.mapInfos?.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", onToggleFilter: this._toggleFilter.bind(this), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, selectedFeaturesIds: this._layerTable?.selectedIds, selectedLayer: this._layer, stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"], zoomToScale: this.zoomToScale })));
     }
     /**
      * Get the expand node for the popup information
@@ -452,11 +474,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * @protected
      */
     _getPopupExpandNode() {
-        const icon = this._expandPopup ? "chevrons-down" : "chevrons-up";
-        const id = "expand-popup";
-        const tooltip = this._expandPopup ? this._translations.collapsePopup : this._translations.expandPopup;
-        const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        const popupNodeClass = !this._expandPopup ? "height-full" : this.mapInfos?.length === 1 || this._isMobile ? "position-absolute-0" : "position-absolute-50";
+        const popupNodeClass = "height-full";
         const headerClass = this._isMobile ? "display-none height-0" : "";
         const headerTheme = this.popupHeaderColor ? "" : !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
         const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
@@ -465,16 +483,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
                 '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* background color that will be displayed on button when hovered */
                 '--calcite-color-text-3': this.popupHeaderTextColor, /* font color that will be displayed on button */
                 '--calcite-color-text-2': this.popupHeaderTextColor, /* font color that will be displayed on popup header text*/
-            } }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
-    }
-    /**
-     * Toggle the popup information
-     *
-     * @protected
-     */
-    _togglePopup() {
-        this._expandPopup = !this._expandPopup;
-        this._hideMapOnLoadHonored = true;
+            } }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, this._getCardNode())));
     }
     /**
      * Get the card node
@@ -483,9 +492,11 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * @protected
      */
     _getCardNode() {
-        const cardManagerHeight = !this._expandPopup && !this._isMobile ? "height-50" : "height-full";
+        const isMapLayout = this.appLayout === 'mapView';
+        const isTableLayout = this.appLayout === 'tableView';
+        const cardManagerHeight = (isMapLayout || isTableLayout) ? "height-full" : !this._isMobile ? "height-50" : "height-full";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h("div", { class: `width-50 height-full ${themeClass}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, enableEditGeometry: this?._mapInfo?.enableEditGeometry, isMobile: this._isMobile, mapView: this?._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
+        return (h("div", { class: `width-50 height-full ${themeClass}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, enableEditGeometry: this?._mapInfo?.enableEditGeometry, isMobile: this._isMobile, layer: this._layer, mapView: this?._mapView, selectedFeaturesIds: this._layerTable?.selectedIds, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
     }
     /**
      * Get the table node based for the current layout
@@ -497,11 +508,11 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * @protected
      */
     _getTable(layoutMode, panelOpen, hideTable) {
-        const tableClass = hideTable && this._isMobile ? "visibility-hidden" : "";
+        const isMapLayout = this.appLayout === 'mapView';
+        const isTableLayout = this.appLayout === 'tableView';
+        const tableClass = hideTable && this._isMobile ? "visibility-hidden" : isMapLayout ? "display-none" : "";
+        const mapClass = isMapLayout ? "height-full width-full" : "display-none";
         const tableSizeClass = this._getTableSizeClass(layoutMode, panelOpen);
-        const icon = this._getDividerIcon(layoutMode, panelOpen);
-        const tooltip = panelOpen ? this._translations.close : this._translations.open;
-        const id = "toggle-layout";
         const toggleLayout = layoutMode === ELayoutMode.HORIZONTAL ? "horizontal" : "vertical";
         const toggleSlot = layoutMode === ELayoutMode.HORIZONTAL ? "header" : "panel-start";
         const hasMapAndLayer = this.defaultWebmap && this.defaultLayer;
@@ -509,10 +520,74 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
             this.defaultGlobalId?.indexOf(",") > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId];
         const defaultOid = !this.defaultOid ? undefined :
             this.defaultOid?.indexOf(",") > -1 ? this.defaultOid.split(",").map(o => parseInt(o, 10)) : [parseInt(this.defaultOid, 10)];
-        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this?._mapInfo?.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapHidden: this._expandPopup, mapInfo: this._mapInfo, mapView: this?._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale }))));
+        return (h("calcite-shell", { class: `${tableSizeClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, this.getActions(layoutMode, panelOpen))) : undefined, h("div", { class: `width-full height-full position-relative ${tableClass}` }, h("layer-table", { createFilterModal: false, defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this?._mapInfo?.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapHidden: isTableLayout, mapInfo: this._mapInfo, mapView: this?._mapView, onToggleFilter: this._toggleFilter.bind(this), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale })), h("div", { class: mapClass, id: "full-map-view" })));
+    }
+    /**
+     * Returns the Actions for table's node
+     *
+     * @returns Node
+     * @protected
+     */
+    getActions(layoutMode, panelOpen) {
+        const icon = this._getDividerIcon(layoutMode, panelOpen);
+        const tooltip = panelOpen ? this._translations.close : this._translations.open;
+        const id = "toggle-layout";
+        return (h(Fragment, null, h("calcite-action", { active: this.appLayout === 'splitView', class: "toggle-node", icon: "browser", id: "browser-action", onClick: () => { this._changeLayout('splitView'); }, text: "" }), h("calcite-tooltip", { placement: "right", "reference-element": "browser-action" }, h("span", null, this._translations.splitView)), h("calcite-action", { active: this.appLayout === 'tableView', class: "toggle-node", icon: "dock-left", id: "dock-left-action", onClick: () => { this._changeLayout('tableView'); }, text: "" }), h("calcite-tooltip", { placement: "right", "reference-element": "dock-left-action" }, h("span", null, this._translations.tableView)), h("calcite-action", { active: this.appLayout === 'mapView', class: "toggle-node", icon: "browser-map", id: "browser-map-action", onClick: () => { this._changeLayout('mapView'); }, text: "" }), h("calcite-tooltip", { placement: "right", "reference-element": "browser-map-action" }, h("span", null, this._translations.mapView)), h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), slot: "actions-end", text: "" }), h("calcite-tooltip", { placement: "bottom", "reference-element": id }, h("span", null, tooltip))));
+    }
+    /**
+     * Show filter component in modal
+     *
+     * @returns node to interact with any configured filters for the current layer
+     * @protected
+     */
+    _filterModal() {
+        return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.filter?.replace("{{title}}", this._layer?.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => void this._layerTable?.filterUpdate(), ref: (el) => this._filterList = el, view: this._mapView, zoomBtn: false }))));
+    }
+    /**
+     * Store any filters for the current layer.
+     * Should only occur on layer change
+     *
+     * @protected
+     */
+    _initLayerExpressions() {
+        const layerExpressions = this._mapInfo?.filterConfig?.layerExpressions;
+        this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer?.id) : [];
+        this._filterList.layerExpressions = this._layerExpressions;
+        this._layerExpressions.filter(lyrExp => {
+            return lyrExp.expressions.filter(exp => exp.active).length > 0;
+        }).length > 0;
+    }
+    /**
+     * Toggle the filter modal
+     *
+     * @protected
+     */
+    _toggleFilter() {
+        this._filterOpen = !this._filterOpen;
+    }
+    /**
+     * Reset the filter active prop
+     *
+     * @protected
+     */
+    _handleFilterListReset() {
+        void this._layerTable.filterReset();
+    }
+    /**
+     * Close the filter modal
+     *
+     * @protected
+     */
+    async _closeFilter() {
+        if (this._filterOpen) {
+            this._filterOpen = false;
+            void this._layerTable.closeFilter();
+        }
     }
     /**
      * Update the component layout when its size changes
+     *
+     * @protected
      */
     _onResize() {
         const isMobile = this.el.offsetWidth < 1024;
@@ -529,22 +604,67 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     /**
      * Open/Close the appropriate panel.
      * The panel that is toggled is dependent upon the layout mode and if using classic grid or not
+     *
+     * @protected
      */
     _toggleLayout() {
         this._panelOpen = !this._panelOpen;
     }
+    /**
+     * Changes the layout mode
+     * @param appLayout selected active app layout
+     *
+     * @protected
+     */
+    _changeLayout(appLayout) {
+        if (this.appLayout !== appLayout) {
+            this._setActiveLayout(appLayout);
+            this.appLayout = appLayout;
+            if (this._isMapViewOnLoad) {
+                void this._layerTable.refresh();
+                this._isMapViewOnLoad = false;
+            }
+        }
+    }
+    /**
+      * shows the map in card view
+      *
+      * @protected
+      */
+    _showMapInCardView() {
+        if (this.appLayout === 'mapView') {
+            const fullMapView = document.getElementById('full-map-view').childNodes[0];
+            const splitMapClass = document.getElementById('card-mapView');
+            if (fullMapView) {
+                splitMapClass.appendChild(fullMapView);
+            }
+        }
+    }
+    /**
+     * Shows the map in full view
+     *
+     * @protected
+     */
+    _showMapInFullView() {
+        const splitMap = document.getElementById('card-mapView').childNodes[0];
+        const fullMapViewClass = document.getElementById('full-map-view');
+        if (splitMap) {
+            fullMapViewClass.appendChild(splitMap);
+        }
+    }
     /**
      * Show/Hide the map, popup, and table
      *
      * @param show when true the map, popup, and table will be displayed
+     * @protected
      */
     showHideMapPopupAndTable(show) {
-        this._expandPopup = false;
         this._hideTable = show;
         this._hideFooter = show;
     }
     /**
      * Get the current map info (configuration details) when maps change
+     * @param id map changed id
      *
      * @returns IMapInfo for the provided id
      * @protected
@@ -652,7 +772,6 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         "theme": [1],
         "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
         "zoomToScale": [2, "zoom-to-scale"],
-        "_expandPopup": [32],
         "_hideFooter": [32],
         "_hideTable": [32],
         "_isMobile": [32],
@@ -663,8 +782,8 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         "_mapView": [32],
         "_panelOpen": [32],
         "_numSelected": [32],
-        "_tableOnly": [32]
-    }, [[8, "featureSelectionChange", "featureSelectionChange"], [8, "popupClosed", "popupClosed"], [8, "idsFound", "idsFound"], [8, "layoutChanged", "layoutChanged"], [8, "mapChanged", "mapChanged"], [8, "beforeMapChanged", "beforeMapChanged"], [8, "layerSelectionChange", "layerSelectionChange"], [8, "mapInfoChange", "mapInfoChange"]], {
+        "_filterOpen": [32]
+    }, [[8, "featureSelectionChange", "featureSelectionChange"], [8, "popupClosed", "popupClosed"], [8, "layoutChanged", "layoutChanged"], [8, "mapChanged", "mapChanged"], [8, "layerSelectionChange", "layerSelectionChange"], [8, "mapInfoChange", "mapInfoChange"]], {
         "enableZoom": ["enableZoomWatchHandler"],
         "hideMapOnLoad": ["hideMapOnLoadWatchHandler"]
     }]);

package/dist/components/layer-table2.js

@@ -57,6 +57,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         super();
         this.__registerHost();
         this.featureSelectionChange = createEvent(this, "featureSelectionChange", 7);
+        this.toggleFilter = createEvent(this, "toggleFilter", 7);
         this.defaultGlobalId = undefined;
         this.defaultLayerId = undefined;
         this.defaultOid = undefined;
@@ -76,6 +77,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this.showNewestFirst = undefined;
         this.zoomAndScrollToSelected = undefined;
         this.zoomToScale = undefined;
+        this.createFilterModal = true;
         this._allIds = [];
         this._controlsThatFit = undefined;
         this._csvExporting = false;
@@ -327,7 +329,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      */
     async mapInfoWatchHandler() {
         this._resetColumnTemplates();
-        this._initLayerExpressions();
+        if (this.createFilterModal) {
+            this._initLayerExpressions();
+        }
         this._initToolInfos();
         this._updateToolbar();
         await this._sortTable();
@@ -357,7 +361,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             this._floorField = this._layer.floorInfo?.floorField;
             this._updateFloorDefinitionExpression();
             await this._resetTable();
-            this._initLayerExpressions();
+            if (this.createFilterModal) {
+                this._initLayerExpressions();
+            }
             this._updateShareUrl();
             this._fetchingData = false;
         });
@@ -381,6 +387,30 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     //  Methods (public)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Reset the filter
+     */
+    async filterReset() {
+        void this._handleFilterListReset();
+    }
+    /**
+     * Updates the filter
+     */
+    async filterUpdate() {
+        this._handleFilterUpdate();
+    }
+    /**
+     * Closes the filter
+     */
+    async closeFilter() {
+        await this._closeFilter();
+    }
+    /**
+     * refresh the feature table
+     */
+    async refresh() {
+        await this._refresh();
+    }
     //--------------------------------------------------------------------------
     //
     //  Events (public)
@@ -390,6 +420,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * Emitted on demand when a layer is selected
      */
     featureSelectionChange;
+    /**
+     * Emitted on demand when filter action is clicked
+     */
+    toggleFilter;
     /**
      * Scroll and zoom to the selected feature from the Features widget.
      *
@@ -421,6 +455,14 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             }
         }
     }
+    /**
+   * Handles layer selection change to show new table
+   *
+   * @param evt CustomEvent the id for the current layer
+   */
+    async layerSelectionChange(evt) {
+        await this._layerSelectionChanged(evt);
+    }
     /**
      * Refresh the table when edits are completed
      */
@@ -488,9 +530,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         const selected = this.selectedIds.length.toString();
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         this._validateActiveActions();
-        return (h(Host, { key: '547a08c45cc3a0b0bdb5ab841ee202d2d43018dc' }, h("calcite-shell", { key: '7ac39e863586727df7685eb5c3faffd87c46bf9d' }, this._getTableControlRow("header"), h("div", { key: '322dc4820b17365f3f202ce43d85330d25081eb5', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '764955f3cf9371a5ff554821613fffbc9e0bd705', class: "height-full width-full" }, h("calcite-loader", { key: '031fc6520de11b166111626501f0208f1b69c9ff', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '8d62258ee356fdf6bc6c03f88848a32270ce5eed', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '17071727cb283d84afb8beab8382bd3623f35920' }, h("calcite-shell", { key: 'f8508d67fd4b100fdc3f52b7db63194714cf216b' }, this._getTableControlRow("header"), h("div", { key: '5c1ebcb0530764a9568dc5dae153632a3d9491c8', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '7a6420894e4e50e2b4cda6e5ebe043134f4c0397', class: "height-full width-full" }, h("calcite-loader", { key: '48d4fe7e27fae877ca0e4caa22555968636f6c33', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: 'cce71356e8ca141d1a18b32944d4fa03af8aae33', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
-            .replace("{{selected}}", selected))) : undefined)), this._filterModal()));
+            .replace("{{selected}}", selected))) : undefined)), this.createFilterModal && this._filterModal()));
     }
     /**
      * Called once after the component is loaded
@@ -559,7 +601,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     _getActionBar() {
         const containerClass = this.isMobile ? "width-full" : "";
         const mobileClass = this.isMobile ? "border-top" : "";
-        return (h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onLayerSelectionChange: (evt) => void this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), !this.isMobile ? this._getActions() : undefined));
+        return (h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", selectedIds: this._layer ? [this._layer?.id] : [], showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), !this.isMobile ? this._getActions() : undefined));
     }
     /**
      * Get the actions that are used for various interactions with the table
@@ -604,15 +646,19 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      */
     _validateEnabledActions() {
         const featuresSelected = this._featuresSelected();
+        const showMultipleEdits = this.selectedIds.length > 1 && this._layer?.capabilities?.operations?.supportsUpdate;
         const selectionDependant = [
             "zoom-to-object",
+            "pencil",
             "trash",
             "erase",
             "selected-items-filter"
         ];
         this._toolInfos?.forEach(ti => {
             if (ti && selectionDependant.indexOf(ti.icon) > -1) {
-                ti.disabled = !featuresSelected;
+                // disable the pencil icon if multiple features are not selected
+                // For other icons disable them if any feature is not selected
+                ti.disabled = ti.icon === "pencil" ? !showMultipleEdits : !featuresSelected;
             }
         });
     }
@@ -646,6 +692,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      */
     _initToolInfos() {
         const featuresSelected = this._featuresSelected();
+        const showMultipleEdits = this.selectedIds.length > 1 && this._layer?.capabilities?.operations?.supportsUpdate;
         const featuresEmpty = this._featuresEmpty();
         const hasFilterExpressions = this._hasFilterExpressions();
         if (this._translations) {
@@ -664,10 +711,20 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
                     icon: "filter",
                     indicator: false,
                     label: this._translations.filters,
-                    func: () => this._toggleFilter(),
+                    func: () => this.createFilterModal ? this._toggleFilter() : this.toggleFilter.emit(),
                     disabled: false,
                     isOverflow: false
                 } : undefined,
+                !this.mapHidden ? {
+                    active: false,
+                    icon: "pencil",
+                    indicator: false,
+                    label: this._translations.editMultiple,
+                    func: () => alert(this._translations.editMultiple),
+                    disabled: !showMultipleEdits,
+                    isOverflow: false,
+                    isSublist: false
+                } : undefined,
                 this._deleteEnabled ? {
                     active: undefined,
                     icon: "trash",
@@ -852,7 +909,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     _setControlsThatFit(controlsThatFit, skipControls) {
         let update = JSON.stringify(controlsThatFit) !== JSON.stringify(this._controlsThatFit);
         const actionbar = document.getElementById("solutions-action-bar");
-        actionbar.childNodes.forEach((n) => {
+        actionbar?.childNodes?.forEach((n) => {
             if (skipControls.indexOf(n.id) < 0 && !update) {
                 update = this._controlsThatFit.map(c => c.id).indexOf(n.id) < 0;
             }
@@ -1721,6 +1778,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         "showNewestFirst": [4, "show-newest-first"],
         "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
         "zoomToScale": [2, "zoom-to-scale"],
+        "createFilterModal": [4, "create-filter-modal"],
         "_allIds": [32],
         "_controlsThatFit": [32],
         "_csvExporting": [32],
@@ -1732,8 +1790,12 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         "_showHideOpen": [32],
         "_showOnlySelected": [32],
         "_toolInfos": [32],
-        "_translations": [32]
-    }, [[8, "selectionChanged", "selectionChanged"], [8, "editsComplete", "editsComplete"], [8, "facilityChanged", "facilityChanged"], [8, "levelChanged", "levelChanged"], [8, "siteChanged", "siteChanged"], [8, "noLayersFound", "noLayersFound"]], {
+        "_translations": [32],
+        "filterReset": [64],
+        "filterUpdate": [64],
+        "closeFilter": [64],
+        "refresh": [64]
+    }, [[8, "selectionChanged", "selectionChanged"], [8, "layerSelectionChange", "layerSelectionChange"], [8, "editsComplete", "editsComplete"], [8, "facilityChanged", "facilityChanged"], [8, "levelChanged", "levelChanged"], [8, "siteChanged", "siteChanged"], [8, "noLayersFound", "noLayersFound"]], {
         "defaultOid": ["defaultOidWatchHandler"],
         "defaultGlobalId": ["defaultGlobalIdWatchHandler"],
         "enableCSV": ["enableCSVWatchHandler"],