@esri/solutions-components 0.8.6-6.3 → 0.8.6

package/dist/collection/components/floor-filter/floor-filter.js

@@ -31,22 +31,19 @@ export class FloorFilter {
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
-    /**
-     * Watch for changes to the mapView and re-init the floor filter
-     */
     async mapViewWatchHandler() {
-        await this._initFloorFilter(this.mapView);
-    }
-    /**
-     * Watch for changes to the enabled property and re-init or destroy the floor filter
-     */
-    async enabledWatchHandler() {
-        if (this.enabled) {
-            await this._initFloorFilter(this.mapView);
-        }
-        else if (!this.enabled) {
-            this._destroyWidget();
-        }
+        const webMap = this.mapView.map;
+        await webMap.when(() => {
+            if (this.floorFilterWidget) {
+                this.floorFilterWidget.destroy();
+                this.floorFilterWidget = undefined;
+            }
+            if (this._floorFilterElement) {
+                this._floorFilterElement.remove();
+                this._floorFilterElement = document.createElement("div");
+            }
+            this._initFloorFilter(this.mapView, webMap);
+        });
     }
     //--------------------------------------------------------------------------
     //
@@ -59,19 +56,8 @@ export class FloorFilter {
     async componentWillLoad() {
         return this._initModules();
     }
-    /**
-     * Renders the component.
-     */
     render() {
-        return (h(Host, { key: 'c80a8d46fb48f3789d9fa09c2400faad49e2e236' }, h("div", { key: '82919a3ba061a17c8aeaa0d2f6f4f13bc428b519', ref: (el) => { this._floorFilterElement = el; } })));
-    }
-    /**
-     * StencilJS: Called once just after the component is first loaded.
-     */
-    async componentDidLoad() {
-        if (this.mapView && !this.floorFilterWidget) {
-            await this._initFloorFilter(this.mapView);
-        }
+        return (h(Host, null, h("div", { ref: (el) => { this._floorFilterElement = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -93,56 +79,29 @@ export class FloorFilter {
         this.FloorFilter = FloorFilter;
         this.reactiveUtils = reactiveUtils;
     }
-    /**
-     * Destroy the widget and remove the containing element if it exists
-     *
-     * @protected
-     */
-    _destroyWidget() {
-        if (this.floorFilterWidget) {
-            this.floorFilterWidget.destroy();
-            this.floorFilterWidget = undefined;
-        }
-        if (this._floorFilterElement) {
-            this._floorFilterElement.remove();
-        }
-    }
-    /**
-     * Destroy the widget and remove the containing element then re-create the container element
-     *
-     * @protected
-     */
-    _initContainer() {
-        this._destroyWidget();
-        this._floorFilterElement = document.createElement("div");
-    }
     /**
      * Initialize the floor filter or reset the current view if it already exists
      */
-    async _initFloorFilter(view) {
-        const webMap = view === null || view === void 0 ? void 0 : view.map;
-        await webMap.when(() => {
-            var _a, _b, _c;
-            if (view && this.enabled && this.FloorFilter && (webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo)) {
-                this._initContainer();
-                this.floorFilterWidget = new this.FloorFilter({
-                    container: this._floorFilterElement,
-                    view
-                });
-                (_a = this._facilityHandle) === null || _a === void 0 ? void 0 : _a.remove();
-                this._facilityHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.facility, (facility) => {
-                    this.facilityChanged.emit(facility);
-                });
-                (_b = this._levelHandle) === null || _b === void 0 ? void 0 : _b.remove();
-                this._levelHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.level, (level) => {
-                    this.levelChanged.emit(level);
-                });
-                (_c = this._siteHandle) === null || _c === void 0 ? void 0 : _c.remove();
-                this._siteHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.site, (site) => {
-                    this.siteChanged.emit(site);
-                });
-            }
-        });
+    _initFloorFilter(view, webMap) {
+        var _a, _b, _c;
+        if (view && this.enabled && this.FloorFilter && (webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo)) {
+            this.floorFilterWidget = new this.FloorFilter({
+                container: this._floorFilterElement,
+                view
+            });
+            (_a = this._facilityHandle) === null || _a === void 0 ? void 0 : _a.remove();
+            this._facilityHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.facility, (facility) => {
+                this.facilityChanged.emit(facility);
+            });
+            (_b = this._levelHandle) === null || _b === void 0 ? void 0 : _b.remove();
+            this._levelHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.level, (level) => {
+                this.levelChanged.emit(level);
+            });
+            (_c = this._siteHandle) === null || _c === void 0 ? void 0 : _c.remove();
+            this._siteHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.site, (site) => {
+                this.siteChanged.emit(site);
+            });
+        }
     }
     static get is() { return "floor-filter"; }
     static get encapsulation() { return "shadow"; }
@@ -270,9 +229,6 @@ export class FloorFilter {
         return [{
                 "propName": "mapView",
                 "methodName": "mapViewWatchHandler"
-            }, {
-                "propName": "enabled",
-                "methodName": "enabledWatchHandler"
             }];
     }
 }

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

@@ -40,16 +40,12 @@
   overflow: auto;
 }
 
-.feature-node {
-  position: relative !important;
-}
-
 .feature-node .esri-features__footer {
   display: none !important;
 }
 
 .button-container {
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
 }
 
@@ -57,6 +53,10 @@
   border-top: 1px solid var(--calcite-color-border-1);
 }
 
+.min-width-100 {
+  min-width: 100px;
+}
+
 .width-100 {
   width: 100%;
 }
@@ -95,14 +95,3 @@
 .border-width-0 {
   border-width: 0px;
 }
-
-.pagination-action {
-  position: relative;
-  left: 3px;
-}
-
-.pagination-count {
-  color: var(--calcite-color-brand);
-  border-bottom: 1px solid var(--calcite-color-brand);
-  font-weight: bold;
-}

package/dist/collection/components/info-card/info-card.js

@@ -24,18 +24,13 @@ import { loadModules } from "../../utils/loadModules";
 import { PopupUtils } from "../../utils/popupUtils";
 export class InfoCard {
     constructor() {
-        /**
-         * string: unique id for the features node
-         */
-        this._featuresNodeId = 'features-node' + new Date().getMilliseconds().toString();
         this.graphics = undefined;
         this.isLoading = false;
         this.isMobile = undefined;
         this.mapView = undefined;
+        this.zoomAndScrollToSelected = undefined;
         this.allowEditing = true;
         this.highlightEnabled = true;
-        this.paginationEnabled = true;
-        this.position = 'absolute';
         this._alertOpen = false;
         this._count = "";
         this._editRecordOpen = false;
@@ -81,45 +76,6 @@ export class InfoCard {
     async getSelectedFeature() {
         return this._features.selectedFeature;
     }
-    /**
-     * Refresh the feature info
-     * @returns Promise when complete
-     */
-    async refresh() {
-        await this.setGraphics();
-    }
-    /**
-     * Go to the previous feature in the features widget
-     */
-    async back() {
-        this._features.previous();
-        this._count = this._getCount();
-    }
-    /**
-     * Go to the next feature in the features widget
-     */
-    async next() {
-        this._features.next();
-        this._count = this._getCount();
-    }
-    /**
-     * Toggle the visibility of the features list view
-     */
-    async toggleListView() {
-        this._showListView = !this._showListView;
-        const i = this._features.selectedFeatureIndex;
-        this._features.open({
-            features: this.graphics,
-            featureMenuOpen: this._showListView
-        });
-        this._features.selectedFeatureIndex = i;
-    }
-    /**
-     * update the current graphics to the features widget
-     */
-    async updateCurrentGraphic(selectedGraphic) {
-        this._features.selectedFeatureWidget.graphic = selectedGraphic;
-    }
     /**
      * Respond to and close the edit record display
      *
@@ -184,8 +140,8 @@ export class InfoCard {
         const id = (_d = (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeature) === null || _d === void 0 ? void 0 : _d.getObjectId();
         const ids = parseInt(id === null || id === void 0 ? void 0 : id.toString(), 10) > -1 ? [id] : [];
         const deleteEnabled = ((_e = this._layer) === null || _e === void 0 ? void 0 : _e.editingEnabled) && ((_h = (_g = (_f = this._layer) === null || _f === void 0 ? void 0 : _f.capabilities) === null || _g === void 0 ? void 0 : _g.operations) === null || _h === void 0 ? void 0 : _h.supportsDelete);
-        return (h(Host, { key: 'ac9c78b064154a666a50e7e8540f13bd541c4d37' }, h("calcite-shell", { key: 'e12b6fd8ac5f92282899edceb5818764fb543301', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: 'e73db3c6f71cddf497cb20e1f59e9f1d8b1ecdd6', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: 'ab1913d90206219978d425a45f312da3e73bcca8', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '67242dfb2b219e71a135c88d9d5e2fd40b083226', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
-            h("div", { key: '25ee3d9374a5ce97c4fcd672b1f78315d1294719', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: '840e3b4ae075fbfd7836f2757128e2cfe9f267e3', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: '747436c3815e94976c2838777a26185c9cb7ab28', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: 'd40dbe85eddaf99acc522f305960ce59c16a8b1f' }, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: '9a1b1e5d7e4432f6b2cd80f77a49f50b1910117f', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: '9b6fd66023b514ff996107ade3af93415f1353f1' }, h("calcite-button", { key: '823bcbe1a3b592344972e6ef39fd5088ab6197fa', appearance: 'transparent', disabled: nextBackDisabled, iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: 'f547487c9eae179e0c65015a24432c936de2ceca', placement: "top", "reference-element": "solutions-back" }, h("span", { key: 'f6f352416103008acc20238efe7e7714fca8d05e' }, this._translations.back))), h("calcite-action", { key: '799e06b8af5df338b920ddc578fa349de469e786', class: 'pagination-action', onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: 'adee5b6b5149dbb4c1d6136c1314db89a04e8913', class: "pagination-count" }, this._count)), h("div", { key: '87f181c53ad1806a9831d01b54fdd51434a5a4c2' }, h("calcite-button", { key: 'a4612a6f0d9b6a9412e60022599cba536cd4f623', appearance: "transparent", disabled: nextBackDisabled, iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '613849a34a568fe8df2abe8b1813070cb7a54633', placement: "top", "reference-element": "solutions-next" }, h("span", { key: '35a2e621ce4b3bccb2b859e961db1065d619b2d9' }, this._translations.next))))), h("edit-card", { key: 'a2054fc21fc09dbffc47e1a7617a4b91b29d26fd', class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: 'ec0fd6540b21987c80fe2035efa96d197c1e6cec', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: '721a363423ec61a9645b003a7d53849137fe1b82', slot: "title" }, this._translations.editDisabled), h("div", { key: '143e9ff06f5363682e8b9e1976fdbfdd1b56f2a9', slot: "message" }, this._translations.enableEditing)))));
+        return (h(Host, null, h("calcite-shell", null, this._getHeader(), h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget feature-node " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), !nextBackDisabled && h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, h("calcite-action", { icon: "list", onClick: () => this._toggleListView(), scale: "s", text: this._count, textEnabled: true })), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -244,7 +200,7 @@ export class InfoCard {
             if (!this._features) {
                 this._features = new this.Features({
                     view: this.mapView,
-                    container: this._featuresNodeId,
+                    container: "features-node",
                     visibleElements: {
                         actionBar: false,
                         closeButton: false,
@@ -253,16 +209,17 @@ export class InfoCard {
                 });
                 this._features.viewModel.highlightEnabled = this.highlightEnabled;
                 this.reactiveUtils.watch(() => this._features.viewModel.featureMenuOpen, (isOpen) => {
-                    this._count = this._getCount();
                     if (!isOpen) {
                         this._showListView = isOpen;
                     }
                 });
-                this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
-                    if (i > -1) {
-                        this.selectionChanged.emit({ selectedFeature: [this._features.selectedFeature], selectedFeatureIndex: this._features.selectedFeatureIndex });
-                    }
-                });
+                if (this.zoomAndScrollToSelected) {
+                    this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
+                        if (i > -1) {
+                            this.selectionChanged.emit([this._features.selectedFeature]);
+                        }
+                    });
+                }
             }
             else {
                 this._features.view = this.mapView;
@@ -442,7 +399,7 @@ export class InfoCard {
                     "text": "esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
                 }
             },
-            "allowEditing": {
+            "zoomAndScrollToSelected": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -451,16 +408,15 @@ export class InfoCard {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "boolean: If true will show edit button"
+                    "text": "boolean: When true the selected feature will zoomed to in the map and the row will be scrolled to within the table"
                 },
-                "attribute": "allow-editing",
-                "reflect": false,
-                "defaultValue": "true"
+                "attribute": "zoom-and-scroll-to-selected",
+                "reflect": false
             },
-            "highlightEnabled": {
+            "allowEditing": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -472,13 +428,13 @@ export class InfoCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "boolean: If true will highlights the features on map using Features Widget"
+                    "text": "boolean: If true will show edit button"
                 },
-                "attribute": "highlight-enabled",
+                "attribute": "allow-editing",
                 "reflect": false,
                 "defaultValue": "true"
             },
-            "paginationEnabled": {
+            "highlightEnabled": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -490,29 +446,11 @@ export class InfoCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "boolean: If true will show the pagination for multiple features"
+                    "text": "boolean: If true will highlights the features on map using Features Widget"
                 },
-                "attribute": "pagination-enabled",
+                "attribute": "highlight-enabled",
                 "reflect": false,
                 "defaultValue": "true"
-            },
-            "position": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "string: Set the position of the feature info"
-                },
-                "attribute": "position",
-                "reflect": false,
-                "defaultValue": "'absolute'"
             }
         };
     }
@@ -553,8 +491,8 @@ export class InfoCard {
                     "text": "Emitted on demand when the selected index changes"
                 },
                 "complexType": {
-                    "original": "{ selectedFeature: __esri.Graphic[], selectedFeatureIndex: number }",
-                    "resolved": "{ selectedFeature: Graphic[]; selectedFeatureIndex: number; }",
+                    "original": "__esri.Graphic[]",
+                    "resolved": "Graphic[]",
                     "references": {
                         "___esri": {
                             "location": "global",
@@ -585,102 +523,6 @@ export class InfoCard {
                             "text": "Promise resolving with the current feature"
                         }]
                 }
-            },
-            "refresh": {
-                "complexType": {
-                    "signature": "() => Promise<any>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<any>"
-                },
-                "docs": {
-                    "text": "Refresh the feature info",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "Promise when complete"
-                        }]
-                }
-            },
-            "back": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Go to the previous feature in the features widget",
-                    "tags": []
-                }
-            },
-            "next": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Go to the next feature in the features widget",
-                    "tags": []
-                }
-            },
-            "toggleListView": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Toggle the visibility of the features list view",
-                    "tags": []
-                }
-            },
-            "updateCurrentGraphic": {
-                "complexType": {
-                    "signature": "(selectedGraphic: __esri.Graphic) => Promise<void>",
-                    "parameters": [{
-                            "name": "selectedGraphic",
-                            "type": "Graphic",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "___esri": {
-                            "location": "global",
-                            "id": "global::___esri"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "update the current graphics to the features widget",
-                    "tags": []
-                }
             }
         };
     }

package/dist/collection/components/json-editor/json-editor.js

@@ -132,7 +132,7 @@ export class JsonEditor {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '160ba6c2961d67add84b4f23b4aacd2213d064b2' }, h("div", { key: 'bf0a77eed1d206376244526db6a261cce163ca69', id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, h("div", { key: '65a0f2f69d4b7f9694a6617755c638d9ad19e168', class: "editor-controls" }, h("div", { key: '3fccc399a3e2a45fe55a374c869a7a7c7533eafc', class: "editor-buttons" }, h("calcite-icon", { key: '5007e48c8ecf9d5a037e062bbb3b5ee3710b18eb', id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), h("calcite-button", { key: '37f8abf8027e0743e373de473421d06884f61d0b', id: `${this.instanceid}-undo`, color: "blue", appearance: "solid", title: this._translations.undo, onClick: () => this._undo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '31c88e27793f4e07ccc20df6d6c88fa0d6661977', icon: "undo", scale: "s" })), h("calcite-button", { key: '56a5945e706a5c66044678f768d567286893c7b1', id: `${this.instanceid}-redo`, color: "blue", appearance: "solid", title: this._translations.redo, onClick: () => this._redo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: 'b2a2d56e6818ee09be15114fcab357732f9f0c99', icon: "redo", scale: "s" })), h("calcite-button", { key: '63acf48f78d1f9cdcd86c5862e399be2217a16c1', id: `${this.instanceid}-diff`, color: "blue", appearance: "solid", title: this._translations.diff, onClick: () => this._toggleEditor(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '677f9c42bbb449fb51325a9dd4b60affd8a73cd7', icon: "compare", scale: "s" })), h("calcite-button", { key: '7cf8fac59ad4096ed541bfd1e6454cec70890c72', id: `${this.instanceid}-search`, appearance: "outline", color: "blue", title: this._translations.search, onClick: () => this._search(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '1e2e4290e7b7254a533a99d85ea2745050b22e55', icon: "search", scale: "s" })), h("calcite-button", { key: 'ec656bcb0a64a6ff6a42760710f8067eae18b9a5', id: `${this.instanceid}-reset`, color: "blue", appearance: "solid", disabled: true, title: this._translations.cancelEdits, onClick: () => this._reset(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '0210b400f5934c68c45fe61f4bf11d3efca97333', icon: "reset", scale: "s" })))), h("div", { key: 'd14efe742fe79b18a436bf522e33924c2a7e72d5', class: "edit-parent" }, h("div", { key: 'e550bbc5968b71701220a44cba17afa9f5f61c48', id: `${this.instanceid}-container`, class: "json-edit-container" }), h("div", { key: '9778b7229d2f3ec994c8a8d707a7f7b394697823', id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
+        return (h(Host, null, h("div", { id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, h("div", { class: "editor-controls" }, h("div", { class: "editor-buttons" }, h("calcite-icon", { id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), h("calcite-button", { id: `${this.instanceid}-undo`, color: "blue", appearance: "solid", title: this._translations.undo, onClick: () => this._undo(), scale: "s", class: "edit-button" }, h("calcite-icon", { icon: "undo", scale: "s" })), h("calcite-button", { id: `${this.instanceid}-redo`, color: "blue", appearance: "solid", title: this._translations.redo, onClick: () => this._redo(), scale: "s", class: "edit-button" }, h("calcite-icon", { icon: "redo", scale: "s" })), h("calcite-button", { id: `${this.instanceid}-diff`, color: "blue", appearance: "solid", title: this._translations.diff, onClick: () => this._toggleEditor(), scale: "s", class: "edit-button" }, h("calcite-icon", { icon: "compare", scale: "s" })), h("calcite-button", { id: `${this.instanceid}-search`, appearance: "outline", color: "blue", title: this._translations.search, onClick: () => this._search(), scale: "s", class: "edit-button" }, h("calcite-icon", { icon: "search", scale: "s" })), h("calcite-button", { id: `${this.instanceid}-reset`, color: "blue", appearance: "solid", disabled: true, title: this._translations.cancelEdits, onClick: () => this._reset(), scale: "s", class: "edit-button" }, h("calcite-icon", { icon: "reset", scale: "s" })))), h("div", { class: "edit-parent" }, h("div", { id: `${this.instanceid}-container`, class: "json-edit-container" }), h("div", { id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -24,8 +24,11 @@ import { getLocaleComponentStrings } from "../../utils/locale";
 import { formatNumber } from "../../utils/languageUtil";
 export class LayerList {
     constructor() {
+        //HARDCODED IN EN
+        this._noLayerToDisplayErrorMsg = "Web map does not contain any editable layers.";
         this.mapView = undefined;
         this.layers = undefined;
+        this.noLayerErrorMsg = undefined;
         this.showFeatureCount = true;
         this.showNextIcon = false;
         this._noLayersToDisplay = false;
@@ -74,9 +77,9 @@ export class LayerList {
      * Renders the component.
      */
     render() {
-        return (h(Fragment, { key: '9366302a704c1dbdd7a65aef5c43d0ad84a44b23' }, this._isLoading && h("calcite-loader", { key: '69974a23fd42bc37ef13816efbe6d06e28cb2749', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
-            h("calcite-notice", { key: 'a93abb55b4db09727b3634cb1935e482c377d662', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: 'b9046685353b8894e6c6094cff47fab7a8e07ffa', slot: "title" }, this._translations.error), h("div", { key: '90a052e1d80779a09a32fdd35563a1ce21d582e0', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
-            h("calcite-list", { key: '709c1b8edd5710a2476ecef638199c2f929b4165', "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
+        return (h(Fragment, null, this._isLoading && h("calcite-loader", { label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
+            h("calcite-notice", { class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
+            h("calcite-list", { "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //
@@ -104,7 +107,10 @@ export class LayerList {
         const allMapLayers = await getAllLayers(this.mapView);
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
         allMapLayers.forEach(async (eachLayer) => {
-            if ((eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.type) === "feature") {
+            var _a, _b;
+            //TODO: checking editable condition could be configurable
+            if ((eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.type) === "feature" && (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.editingEnabled) && ((_b = (_a = eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.capabilities) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.supportsAdd)) {
+                this._layerItemsHash[eachLayer.id].supportsAdd = true;
                 if (this.showFeatureCount) {
                     const q = eachLayer.createQuery();
                     const result = eachLayer.queryFeatureCount(q);
@@ -137,7 +143,7 @@ export class LayerList {
         this.layersListLoaded.emit(this._mapLayerIds);
     }
     /**
-     * Returns the ids of configured layers that needs to be shown in the list
+     * Returns the ids of all OR configured layers that needs to be shown in the list
      * @param hash each layer item details
      * @returns array of layer ids
      */
@@ -145,7 +151,11 @@ export class LayerList {
         var _a;
         const configuredLayers = ((_a = this.layers) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.layers : [];
         return Object.keys(hash).reduce((prev, cur) => {
-            if (configuredLayers.indexOf(cur) > -1) {
+            let showLayer = true;
+            if ((configuredLayers === null || configuredLayers === void 0 ? void 0 : configuredLayers.length) > 0) {
+                showLayer = configuredLayers.indexOf(cur) > -1;
+            }
+            if (showLayer) {
                 prev.push(cur);
             }
             return prev;
@@ -173,7 +183,7 @@ export class LayerList {
     getLayerListItem(layerId) {
         const layerName = this._layerItemsHash[layerId].name;
         const featureCount = this._layerItemsHash[layerId].formattedFeatureCount;
-        return (h("calcite-list-item", { onCalciteListItemSelect: () => { this.onLayerItemSelected(layerId); } }, h("div", { class: "layer-name", slot: "content-start" }, layerName), this.showFeatureCount && featureCount !== undefined && featureCount !== "" && h("div", { class: !this.showNextIcon ? "feature-count" : "", slot: "content-end" }, "(" + featureCount + ")"), this.showNextIcon && h("calcite-icon", { flipRtl: true, icon: "chevron-right", scale: "s", slot: "content-end" })));
+        return (h("calcite-list-item", { onCalciteListItemSelect: () => { this.onLayerItemSelected(layerId); } }, h("div", { class: "layer-name", slot: "content-start" }, layerName), this.showFeatureCount && featureCount !== undefined && featureCount !== "" && h("div", { class: !this.showNextIcon ? "feature-count" : "", slot: "content-end" }, "(" + featureCount + ")"), this.showNextIcon && h("calcite-icon", { icon: "chevron-right", scale: "s", slot: "content-end" })));
     }
     /**On click of layer list item emit the event along with the selected layerId and layerName
      * @param layerId Layer id
@@ -239,6 +249,23 @@ export class LayerList {
                     "text": "string[]: If passed will show only these layers in the list if they are present in map and are editable"
                 }
             },
+            "noLayerErrorMsg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Error message to be displayed when no layers found"
+                },
+                "attribute": "no-layer-error-msg",
+                "reflect": false
+            },
             "showFeatureCount": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -135,7 +135,3 @@ html[dir="rtl"] .share-action {
 .modal {
   --calcite-modal-content-padding: 0;
 }
-
-.esri-feature-table__table-container {
-  height: 100%;
-}