@esri/solutions-components 0.8.7 → 0.8.9

package/dist/components/feature-details.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FeatureDetails extends Components.FeatureDetails, HTMLElement {}
+export const FeatureDetails: {
+    prototype: FeatureDetails;
+    new (): FeatureDetails;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/feature-details.js

@@ -0,0 +1,11 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { F as FeatureDetails$1, d as defineCustomElement$1 } from './feature-details2.js';
+
+const FeatureDetails = FeatureDetails$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FeatureDetails, defineCustomElement };

package/dist/components/feature-details2.js

@@ -0,0 +1,449 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { l as loadModules } from './loadModules.js';
+import { d as defineCustomElement$h } from './action.js';
+import { d as defineCustomElement$g } from './action-menu.js';
+import { d as defineCustomElement$f } from './alert.js';
+import { d as defineCustomElement$e } from './button.js';
+import { d as defineCustomElement$d } from './chip.js';
+import { d as defineCustomElement$c } from './icon.js';
+import { d as defineCustomElement$b } from './loader.js';
+import { d as defineCustomElement$a } from './modal.js';
+import { d as defineCustomElement$9 } from './notice.js';
+import { d as defineCustomElement$8 } from './panel.js';
+import { d as defineCustomElement$7 } from './popover.js';
+import { d as defineCustomElement$6 } from './scrim.js';
+import { d as defineCustomElement$5 } from './shell.js';
+import { d as defineCustomElement$4 } from './tooltip.js';
+import { d as defineCustomElement$3 } from './delete-button2.js';
+import { d as defineCustomElement$2 } from './edit-card2.js';
+import { d as defineCustomElement$1 } from './info-card2.js';
+
+const featureDetailsCss = ":host{display:block}.buttons{align-items:center;background-color:white;display:flex;padding:10px 0 10px 15px;border-block-start:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3)}.comment-btn{display:flex;gap:5px;width:35px}";
+
+const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.loadingStatus = createEvent(this, "loadingStatus", 7);
+        /**
+         * string[]: Valid field types for like and dislike
+         */
+        this._validFieldTypes = ["small-integer", "integer", "big-integer", "single", "long"];
+        this.mapView = undefined;
+        this.graphics = undefined;
+        this.reportingOptions = undefined;
+        this._likeFieldAvailable = false;
+        this._likeCount = 0;
+        this._disLikeCount = 0;
+        this._dislikeFieldAvailable = false;
+        this._isLikeBtnClicked = false;
+        this._isDislikeBtnClicked = false;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Called each time the graphics prop is changed
+     */
+    async graphicsWatchHandler() {
+        await this.getCompleteGraphic(this.graphics[0]);
+        this.checkLikeDislikeFields();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Methods (public)
+    /**
+     * Refresh the features comments which will fetch like, dislike and update the component
+     * @returns Promise that resolves when the operation is complete
+     */
+    async refresh(graphic) {
+        if (this.isLikeDislikeConfigured(graphic.layer)) {
+            // in case of multiple features selected fetch complete feature and update like dislike for current feature 
+            if (graphic && this.graphics.length > 1) {
+                await this.getCompleteGraphic(graphic);
+                this.checkLikeDislikeFields();
+            }
+        }
+        else {
+            this._likeFieldAvailable = false;
+            this._dislikeFieldAvailable = false;
+        }
+    }
+    /**
+     * Go to the previous feature in the features widget
+     */
+    async back() {
+        void this._infoCard.back();
+    }
+    /**
+     * Go to the next feature in the features widget
+     */
+    async next() {
+        void this._infoCard.next();
+    }
+    /**
+     * Toggle the visibility of the features list view
+     */
+    async toggleListView() {
+        void this._infoCard.toggleListView();
+    }
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     *
+     * @returns Promise when complete
+     */
+    async componentWillLoad() {
+        await this._initModules();
+        await this.getCompleteGraphic(this.graphics[0]);
+        this.checkLikeDislikeFields();
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el, zoomAndScrollToSelected: true }), (this._likeFieldAvailable || this._dislikeFieldAvailable) &&
+            h("div", { class: 'buttons' }, this._likeFieldAvailable &&
+                h("calcite-button", { appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", onClick: this.onLikeButtonClick.bind(this), scale: 's' }, (_b = (_a = this._likeCount) !== null && _a !== void 0 ? _a : this._selectedGraphic.attributes[this._likeField]) !== null && _b !== void 0 ? _b : 0), this._dislikeFieldAvailable &&
+                h("calcite-button", { appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", onClick: this.onDislikeButtonClick.bind(this), scale: 's' }, (_d = (_c = this._disLikeCount) !== null && _c !== void 0 ? _c : this._selectedGraphic.attributes[this._dislikeField]) !== null && _d !== void 0 ? _d : 0))));
+    }
+    /**
+     * Load esri javascript api modules
+     *
+     * @returns Promise resolving when function is done
+     *
+     * @protected
+     */
+    async _initModules() {
+        const [Graphic] = await loadModules([
+            "esri/Graphic"
+        ]);
+        this.Graphic = Graphic;
+    }
+    /**
+     * Get complete graphic with complete attributes
+     * @param graphic selected feature graphic
+     * @protected
+     */
+    async getCompleteGraphic(graphic) {
+        const layer = graphic.layer;
+        const query = layer.createQuery();
+        query.objectIds = [graphic.getObjectId()];
+        const completeGraphic = await layer.queryFeatures(query);
+        this._selectedGraphic = completeGraphic.features[0];
+    }
+    /**
+     * Checks if the layers is configured for like dislike or not
+     * @param selectedLayer Feature layer
+     * @returns boolean
+     * @protected
+     */
+    isLikeDislikeConfigured(selectedLayer) {
+        let likeFieldAvailable = false;
+        let dislikeFieldAvailable = false;
+        // check if reporting options are configured for the current selected feature's layer
+        if (this.reportingOptions && this.reportingOptions[selectedLayer.id]) {
+            //return false if both like and dislike are disabled for the layer
+            if (!this.reportingOptions[selectedLayer.id].like && !this.reportingOptions[selectedLayer.id].dislike) {
+                return false;
+            }
+            const likeField = this.reportingOptions[selectedLayer.id].likeField;
+            const dislikeField = this.reportingOptions[selectedLayer.id].dislikeField;
+            //if both fields are not configured return false
+            if (!likeField && !dislikeField) {
+                return false;
+            }
+            selectedLayer.fields.forEach((eachField) => {
+                if (this._validFieldTypes.indexOf(eachField.type) > -1) {
+                    if (eachField.name === likeField && this.reportingOptions[selectedLayer.id].like) {
+                        likeFieldAvailable = true;
+                    }
+                    else if (eachField.name === dislikeField && this.reportingOptions[selectedLayer.id].dislike) {
+                        dislikeFieldAvailable = true;
+                    }
+                }
+            });
+        }
+        return likeFieldAvailable || dislikeFieldAvailable;
+    }
+    /**
+     * Check if configured like or dislike fields are available in the selected layer
+     * @protected
+     */
+    checkLikeDislikeFields() {
+        this._likeFieldAvailable = false;
+        this._dislikeFieldAvailable = false;
+        this._isLikeBtnClicked = false;
+        this._isDislikeBtnClicked = false;
+        this._likeCount = 0;
+        this._disLikeCount = 0;
+        const selectedLayer = this._selectedGraphic.layer;
+        // check if reporting options are configured for the current selected feature's layer
+        if (this.reportingOptions && this.reportingOptions[selectedLayer.id]) {
+            this._likeField = this.reportingOptions[selectedLayer.id].likeField;
+            this._dislikeField = this.reportingOptions[selectedLayer.id].dislikeField;
+            //if both fields are not found return
+            if (!this._likeField && !this._dislikeField) {
+                return;
+            }
+            //Check if selected layer have the configured like and dislike fields
+            //also, get the current value for like and dislike field from the attributes
+            selectedLayer.fields.forEach((eachField) => {
+                if (this._validFieldTypes.indexOf(eachField.type) > -1) {
+                    if (eachField.name === this._likeField && this.reportingOptions[this._selectedGraphic.layer.id].like) {
+                        this._likeFieldAvailable = true;
+                        this._likeCount = this._selectedGraphic.attributes[eachField.name];
+                    }
+                    else if (eachField.name === this._dislikeField && this.reportingOptions[this._selectedGraphic.layer.id].dislike) {
+                        this._dislikeFieldAvailable = true;
+                        this._disLikeCount = this._selectedGraphic.attributes[eachField.name];
+                    }
+                }
+            });
+            this.getFromLocalStorage();
+        }
+    }
+    /**
+     * On like button click highlight the like button and update the feature
+     * @protected
+     */
+    onLikeButtonClick() {
+        this.loadingStatus.emit(true);
+        if (this._isDislikeBtnClicked && this.reportingOptions[this._selectedGraphic.layer.id].dislike) {
+            this.onDislikeButtonClick();
+        }
+        this._isLikeBtnClicked = !this._isLikeBtnClicked;
+        if (this._isLikeBtnClicked) {
+            this._likeCount++;
+        }
+        else {
+            this._likeCount--;
+        }
+        void this.updateFeaturesLikeDislikeField(this._likeField, this._isLikeBtnClicked);
+    }
+    /**
+     * On dislike button click highlight the dislike button and update the feature
+     * @protected
+     */
+    onDislikeButtonClick() {
+        this.loadingStatus.emit(true);
+        if (this._isLikeBtnClicked && this.reportingOptions[this._selectedGraphic.layer.id].like) {
+            this.onLikeButtonClick();
+        }
+        this._isDislikeBtnClicked = !this._isDislikeBtnClicked;
+        if (this._isDislikeBtnClicked) {
+            this._disLikeCount++;
+        }
+        else {
+            this._disLikeCount--;
+        }
+        void this.updateFeaturesLikeDislikeField(this._dislikeField, this._isDislikeBtnClicked);
+    }
+    /**
+     * Update the feature if user click on like or dislike button
+     * @param fieldName field name of the feature for like or dislike attribute
+     * @param buttonClicked is like or dislike button clicked
+     * @protected
+     */
+    async updateFeaturesLikeDislikeField(fieldName, buttonClicked) {
+        const attributesToUpdate = {};
+        const selectedLayer = this._selectedGraphic.layer;
+        //Increment the value if button is clicked or else decrement it
+        const selectFeatureAttr = this._selectedGraphic;
+        if (buttonClicked) {
+            selectFeatureAttr.attributes[fieldName] = Number(selectFeatureAttr.attributes[fieldName]) + 1;
+        }
+        else {
+            selectFeatureAttr.attributes[fieldName] = Number(selectFeatureAttr.attributes[fieldName]) - 1;
+        }
+        //use the oid and like/dislike field value to update 
+        attributesToUpdate[selectedLayer.objectIdField] = selectFeatureAttr.attributes[selectedLayer.objectIdField];
+        attributesToUpdate[fieldName] = selectFeatureAttr.attributes[fieldName];
+        const newGraphicInstance = new this.Graphic();
+        newGraphicInstance.attributes = attributesToUpdate;
+        // Update the feature attribute in the feature layer
+        const param = { updateFeatures: [newGraphicInstance] };
+        await selectedLayer.applyEdits(param).then(() => {
+            this._selectedGraphic = selectFeatureAttr;
+            //update the current graphics in info card so that, the updated values are reflected in popup content
+            if (this._infoCard) {
+                void this._infoCard.updateCurrentGraphic(this._selectedGraphic);
+            }
+            //store the like dislike value for the current selected graphic in local storage
+            this.setInLocalStorage();
+            this.loadingStatus.emit(false);
+        }, (err) => {
+            this.loadingStatus.emit(false);
+            console.log(err);
+        });
+    }
+    /**
+     * Gets the like/dislike information form local storage and updates the like and dislike button states
+     * @protected
+     */
+    getFromLocalStorage() {
+        const uniqueLayerId = this._selectedGraphic.layer.id;
+        //get the data from local storage and check current feature is liked or disliked 
+        const localStorageUser = localStorage[uniqueLayerId];
+        if (localStorageUser) {
+            const parseArr = JSON.parse(localStorageUser);
+            const res = parseArr.filter((arr) => arr.id === this._selectedGraphic.getObjectId());
+            if (res.length > 0) {
+                this._isLikeBtnClicked = res[0].like;
+                this._isDislikeBtnClicked = res[0].dislike;
+            }
+        }
+    }
+    /**
+     * Sets the like/dislike information for the current selected graphic in local storage
+     * @protected
+     */
+    setInLocalStorage() {
+        const uniqueLayerId = this._selectedGraphic.layer.id;
+        const localStorageInfo = localStorage[uniqueLayerId];
+        let information = [];
+        //if information for the current layer found in local storage update it
+        //else add new information for the current layer in the local storage
+        if (localStorageInfo) {
+            information = JSON.parse(localStorageInfo);
+            const index = information.findIndex((arr) => arr.id === this._selectedGraphic.getObjectId());
+            //if information for current objectid found delete it, so that we always have info for each oid in a layer only once
+            if (index >= 0) {
+                information.splice(index, 1);
+            }
+        }
+        //add the information for current selected graphic
+        information.push({
+            id: this._selectedGraphic.getObjectId(),
+            like: this._isLikeBtnClicked && this._likeCount !== 0,
+            dislike: this._isDislikeBtnClicked && this._disLikeCount !== 0
+        });
+        localStorage.setItem(uniqueLayerId, JSON.stringify(information));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "graphics": ["graphicsWatchHandler"]
+    }; }
+    static get style() { return featureDetailsCss; }
+}, [0, "feature-details", {
+        "mapView": [16],
+        "graphics": [16],
+        "reportingOptions": [16],
+        "_likeFieldAvailable": [32],
+        "_likeCount": [32],
+        "_disLikeCount": [32],
+        "_dislikeFieldAvailable": [32],
+        "_isLikeBtnClicked": [32],
+        "_isDislikeBtnClicked": [32],
+        "refresh": [64],
+        "back": [64],
+        "next": [64],
+        "toggleListView": [64]
+    }, undefined, {
+        "graphics": ["graphicsWatchHandler"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["feature-details", "calcite-action", "calcite-action-menu", "calcite-alert", "calcite-button", "calcite-chip", "calcite-icon", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-panel", "calcite-popover", "calcite-scrim", "calcite-shell", "calcite-tooltip", "delete-button", "edit-card", "info-card"];
+    components.forEach(tagName => { switch (tagName) {
+        case "feature-details":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, FeatureDetails);
+            }
+            break;
+        case "calcite-action":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "calcite-action-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "calcite-alert":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "calcite-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "calcite-chip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "calcite-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "calcite-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "calcite-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "calcite-notice":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "calcite-panel":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "calcite-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "calcite-scrim":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "calcite-shell":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "calcite-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "delete-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "edit-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "info-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { FeatureDetails as F, defineCustomElement as d };

package/dist/components/feature-list2.js

@@ -155,7 +155,20 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
             const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayerId);
             this._highlightHandle = await highlightFeatures([selectedFeatureObjectId], selectedLayerView, this.mapView, true);
         }
-        this.featureSelect.emit(selectedFeature);
+        await this.emitSelectedFeature(selectedFeature);
+    }
+    /**
+     * Emit selected feature with its complete graphics and attributes
+     * @param graphic selected feature graphic
+     * @protected
+     */
+    async emitSelectedFeature(graphic) {
+        const layer = graphic.layer;
+        const query = layer.createQuery();
+        query.returnGeometry = true;
+        query.objectIds = [graphic.getObjectId()];
+        const completeGraphic = await layer.queryFeatures(query);
+        this.featureSelect.emit(completeGraphic.features[0]);
     }
     /**
      * On feature hover in feature list highlight the feature on the map

package/dist/components/info-card2.js

@@ -24,7 +24,7 @@ import { d as defineCustomElement$3 } from './tooltip.js';
 import { d as defineCustomElement$2 } from './delete-button2.js';
 import { d as defineCustomElement$1 } from './edit-card2.js';
 
-const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.feature-node .esri-features__footer{display:none !important}.button-container{justify-content:space-between;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.min-width-100{min-width:100px}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}";
+const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.feature-node{position:relative !important}.feature-node .esri-features__footer{display:none !important}.button-container{justify-content:center;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.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)}";
 
 const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLElement {
     constructor() {
@@ -39,6 +39,8 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         this.zoomAndScrollToSelected = undefined;
         this.allowEditing = true;
         this.highlightEnabled = true;
+        this.paginationEnabled = true;
+        this.position = 'absolute';
         this._alertOpen = false;
         this._count = "";
         this._editRecordOpen = false;
@@ -84,6 +86,45 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
     async getSelectedFeature() {
         return this._features.selectedFeature;
     }
+    /**
+     * Get the current selected feature from the Features widget
+     * @returns Promise resolving with the current feature
+     */
+    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
      *
@@ -148,8 +189,8 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         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, 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)))));
+        return (h(Host, null, h("calcite-shell", { style: { position: this.position } }, 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", { placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, 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", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", null, h("calcite-button", { appearance: 'transparent', disabled: nextBackDisabled, iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("calcite-action", { class: 'pagination-action', onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { class: "pagination-count" }, this._count)), h("div", null, h("calcite-button", { appearance: "transparent", disabled: nextBackDisabled, iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { 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)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -224,7 +265,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
                 if (this.zoomAndScrollToSelected) {
                     this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
                         if (i > -1) {
-                            this.selectionChanged.emit([this._features.selectedFeature]);
+                            this.selectionChanged.emit({ selectedFeature: [this._features.selectedFeature], selectedFeatureIndex: this._features.selectedFeatureIndex });
                         }
                     });
                 }
@@ -334,13 +375,20 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
         "allowEditing": [4, "allow-editing"],
         "highlightEnabled": [4, "highlight-enabled"],
+        "paginationEnabled": [4, "pagination-enabled"],
+        "position": [1],
         "_alertOpen": [32],
         "_count": [32],
         "_editRecordOpen": [32],
         "_mobileTitle": [32],
         "_showListView": [32],
         "_translations": [32],
-        "getSelectedFeature": [64]
+        "getSelectedFeature": [64],
+        "refresh": [64],
+        "back": [64],
+        "next": [64],
+        "toggleListView": [64],
+        "updateCurrentGraphic": [64]
     }, [[8, "closeEdit", "closeEdit"], [8, "layerSelectionChange", "layerSelectionChange"], [8, "refreshGraphics", "refreshGraphics"]], {
         "graphics": ["graphicsWatchHandler"],
         "isMobile": ["isMobileWatchHandler"],

package/dist/components/layer-table2.js

@@ -249,7 +249,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * @param evt CustomEvent the graphic for the current selection
      */
     async selectionChanged(evt) {
-        const g = evt.detail[0];
+        const g = evt.detail.selectedFeature[0];
         const oid = g.getObjectId();
         if (this.zoomAndScrollToSelected) {
             const i = this._table.viewModel.getObjectIdIndex(oid);
@@ -406,7 +406,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) => 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, onLayerSelectionChange: (evt) => void this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), !this.isMobile ? this._getActions() : undefined));
     }
     /**
      * Get the actions that are used for various interactions with the table

package/dist/components/map-card2.js

@@ -209,7 +209,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
         }
         else if (loadDefaultMap) {
             this._defaultWebmapHonored = true;
-            this._mapPicker.setMapByID(id);
+            void this._mapPicker.setMapByID(id);
         }
         else if (mapConfigChanged) {
             // Map is the same so no need to reload but we need to update for any changes from the config