@esri/solutions-components 0.10.7 → 0.10.8

package/dist/collection/components/layer-table/layer-table.js

@@ -46,6 +46,7 @@ export class LayerTable {
         this.showNewestFirst = undefined;
         this.zoomAndScrollToSelected = undefined;
         this.zoomToScale = undefined;
+        this.createFilterModal = true;
         this._allIds = [];
         this._controlsThatFit = undefined;
         this._csvExporting = false;
@@ -302,7 +303,9 @@ export class LayerTable {
      */
     async mapInfoWatchHandler() {
         this._resetColumnTemplates();
-        this._initLayerExpressions();
+        if (this.createFilterModal) {
+            this._initLayerExpressions();
+        }
         this._initToolInfos();
         this._updateToolbar();
         await this._sortTable();
@@ -332,7 +335,9 @@ export class LayerTable {
             this._floorField = this._layer.floorInfo?.floorField;
             this._updateFloorDefinitionExpression();
             await this._resetTable();
-            this._initLayerExpressions();
+            if (this.createFilterModal) {
+                this._initLayerExpressions();
+            }
             this._updateShareUrl();
             this._fetchingData = false;
         });
@@ -356,6 +361,30 @@ export class LayerTable {
     //  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)
@@ -365,6 +394,10 @@ export class LayerTable {
      * 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.
      *
@@ -396,6 +429,14 @@ export class LayerTable {
             }
         }
     }
+    /**
+   * 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
      */
@@ -463,9 +504,9 @@ export class LayerTable {
         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
@@ -534,7 +575,7 @@ export class LayerTable {
     _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
@@ -579,15 +620,19 @@ export class LayerTable {
      */
     _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;
             }
         });
     }
@@ -621,6 +666,7 @@ export class LayerTable {
      */
     _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) {
@@ -639,10 +685,20 @@ export class LayerTable {
                     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",
@@ -827,7 +883,7 @@ export class LayerTable {
     _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;
             }
@@ -1999,6 +2055,24 @@ export class LayerTable {
                 },
                 "attribute": "zoom-to-scale",
                 "reflect": false
+            },
+            "createFilterModal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: create filter modal optional (default true) boolean value to create filter modal in layer table"
+                },
+                "attribute": "create-filter-modal",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }
@@ -2034,8 +2108,95 @@ export class LayerTable {
                     "resolved": "number[]",
                     "references": {}
                 }
+            }, {
+                "method": "toggleFilter",
+                "name": "toggleFilter",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when filter action is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
+    static get methods() {
+        return {
+            "filterReset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Reset the filter",
+                    "tags": []
+                }
+            },
+            "filterUpdate": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Updates the filter",
+                    "tags": []
+                }
+            },
+            "closeFilter": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the filter",
+                    "tags": []
+                }
+            },
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "refresh the feature table",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
@@ -2083,6 +2244,12 @@ export class LayerTable {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "layerSelectionChange",
+                "method": "layerSelectionChange",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }, {
                 "name": "editsComplete",
                 "method": "editsComplete",

package/dist/collection/components/map-card/map-card.css

@@ -28,6 +28,10 @@
   height: 100%;
 }
 
+.height-50-px {
+  height: 50px;
+}
+
 .box-shadow {
   box-shadow: none !important;
 }