@esri/solutions-components 0.7.8 → 0.7.10

package/dist/components/layer-table2.js

@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { l as loadModules } from './loadModules.js';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { b as goToSelection, g as getLayerOrTable } from './mapViewUtils.js';
-import { b as queryAllIds, c as queryFeaturesByGlobalID } from './queryUtils.js';
+import { b as queryFeatureIds, c as queryAllIds, d as queryFeaturesByGlobalID } from './queryUtils.js';
 import { d as downloadCSV } from './downloadUtils.js';
 import { d as defineCustomElement$C } from './action.js';
 import { d as defineCustomElement$B } from './action-bar.js';
@@ -59,6 +59,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
          * number[]: A list of all IDs for the current layer
          */
         this._allIds = [];
+        /**
+         * boolean: When true the ctrl key is currently pressed
+         */
+        this._ctrlIsPressed = false;
         /**
          * boolean: When true the default global id provided via url param has been honored and should now be ignored
          */
@@ -67,6 +71,14 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
          * boolean: When true the default OID provided via url param has been honored and should now be ignored
          */
         this._defaultOidHonored = false;
+        /**
+         * boolean: When true the shift key is currently pressed
+         */
+        this._shiftIsPressed = false;
+        /**
+         * boolean: When true any onChange handeling will be skipped
+         */
+        this._skipOnChange = false;
         /**
          * bool: When true the table is being sorted
          */
@@ -271,6 +283,8 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     async componentDidLoad() {
         this._resizeObserver.observe(this._toolbar);
         document.onclick = (e) => this._handleDocumentClick(e);
+        document.onkeydown = (e) => this._handleKeyDown(e);
+        document.onkeyup = (e) => this._handleKeyUp(e);
     }
     /**
      * Called after the component is rendered
@@ -325,7 +339,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * @returns The dom node that contains the controls
      */
     _getActionBar() {
-        return (h("calcite-action-bar", { expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: "border-end", id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getActions()));
+        return (h("calcite-action-bar", { expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: "border-end", id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getActions()));
     }
     /**
      * Get the actions that are used for various interactions with the table
@@ -750,18 +764,8 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             this._initColumnsInfo();
             this._checkEditEnabled();
             await this._table.when(() => {
-                this._table.highlightIds.on("change", () => {
-                    // https://github.com/Esri/solutions-components/issues/365
-                    this._selectedIndexes = this._table.highlightIds.toArray().reverse();
-                    if (this._showOnlySelected) {
-                        if (this._featuresSelected()) {
-                            this._table.filterBySelection();
-                        }
-                        else {
-                            this._toggleShowSelected();
-                        }
-                    }
-                    this.featureSelectionChange.emit(this._selectedIndexes);
+                this._table.highlightIds.on("change", (evt) => {
+                    void this._handleOnChange(evt);
                 });
                 this.reactiveUtils.watch(() => this._table.activeSortOrders, (sortOrders) => {
                     var _a, _b, _c, _d;
@@ -771,6 +775,93 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             });
         }
     }
+    async _handleOnChange(evt) {
+        const ids = [...this._table.highlightIds.toArray()];
+        if (!this._skipOnChange) {
+            if (!this._ctrlIsPressed && !this._shiftIsPressed) {
+                if (this._selectedIndexes.length > 0) {
+                    this._skipOnChange = true;
+                    // only readd in specific case where we have multiple selected and then click one of the currently selected
+                    const reAdd = this._selectedIndexes.length > 1 && evt.removed.length === 1;
+                    const newIndexes = reAdd ? evt.removed : ids.filter(id => this._selectedIndexes.indexOf(id) < 0);
+                    this._clearSelection();
+                    this._selectedIndexes = [...newIndexes];
+                    if (newIndexes.length > 0) {
+                        this._table.highlightIds.add(newIndexes[0]);
+                    }
+                }
+                else {
+                    // https://github.com/Esri/solutions-components/issues/365
+                    this._selectedIndexes = ids.reverse();
+                }
+            }
+            else if (this._ctrlIsPressed) {
+                this._selectedIndexes = ids.reverse();
+            }
+            else if (this._shiftIsPressed) {
+                this._skipOnChange = true;
+                this._previousCurrentId = this._currentId;
+                this._currentId = [...this._table.highlightIds.toArray()].reverse()[0];
+                if (this._previousCurrentId !== this._currentId) {
+                    // query the layer based on current sort and filters then grab between the current id and previous id
+                    const orderBy = this._table.activeSortOrders.reduce((prev, cur) => {
+                        prev.push(`${cur.fieldName} ${cur.direction}`);
+                        return prev;
+                    }, []);
+                    const oids = await queryFeatureIds(this._layer, this._layer.definitionExpression, orderBy);
+                    let isBetween = false;
+                    const _start = this._table.viewModel.getObjectIdIndex(this._previousCurrentId);
+                    const _end = this._table.viewModel.getObjectIdIndex(this._currentId);
+                    const startIndex = _start < _end ? _start : _end;
+                    const endIndex = _end > _start ? _end : _start;
+                    this._selectedIndexes = oids.reduce((prev, cur) => {
+                        const id = cur;
+                        const index = this._table.viewModel.getObjectIdIndex(id);
+                        if ((id === this._currentId || id === this._previousCurrentId)) {
+                            isBetween = !isBetween;
+                            if (prev.indexOf(id) < 0) {
+                                prev.push(id);
+                            }
+                        }
+                        // The oids are sorted so after we have reached the start or end oid add all ids even if the index is -1.
+                        // Index of -1 will occur for features between the start and and oid if
+                        // you select a row then scroll faster than the FeatureTable loads the data to select the next id
+                        if (isBetween && prev.indexOf(id) < 0) {
+                            prev.push(id);
+                        }
+                        // Also add index based check.
+                        // In some cases the FeatureTable and Layer query will have differences in how null/undefined field values are sorted
+                        if ((this._selectedIndexes.indexOf(id) > -1 || (index >= startIndex && index <= endIndex)) && prev.indexOf(id) < 0 && index > -1) {
+                            prev.push(id);
+                        }
+                        return prev;
+                    }, []);
+                    this._table.highlightIds.addMany(this._selectedIndexes.filter(i => ids.indexOf(i) < 0));
+                }
+            }
+            this._finishOnChange();
+        }
+        else {
+            this._skipOnChange = false;
+        }
+        this._currentId = [...this._table.highlightIds.toArray()].reverse()[0];
+    }
+    /**
+     * Handle any updates after a selection change has occured and emit the results
+     *
+     * @returns void
+     */
+    _finishOnChange() {
+        if (this._showOnlySelected) {
+            if (this._featuresSelected()) {
+                this._table.filterBySelection();
+            }
+            else {
+                this._toggleShowSelected();
+            }
+        }
+        this.featureSelectionChange.emit(this._selectedIndexes);
+    }
     /**
      * Reset basic table props
      *
@@ -906,6 +997,24 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             }
         }
     }
+    /**
+     * Keep track of key down for ctrl and shift
+     *
+     * @returns void
+     */
+    _handleKeyDown(e) {
+        this._ctrlIsPressed = e.ctrlKey;
+        this._shiftIsPressed = e.shiftKey;
+    }
+    /**
+     * Keep track of key up for ctrl and shift
+     *
+     * @returns void
+     */
+    _handleKeyUp(e) {
+        this._ctrlIsPressed = e.ctrlKey;
+        this._shiftIsPressed = e.shiftKey;
+    }
     /**
      * Show filter component in modal
      *
@@ -913,15 +1022,19 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      */
     _filterModal() {
         var _a, _b, _c;
-        return (h("calcite-modal", { "aria-labelledby": "modal-title", kind: "brand", onCalciteModalClose: () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: () => this._closeFilter(), layerExpressions: this._layerExpressions, ref: (el) => this._filterList = el, view: this.mapView }))));
+        return (h("calcite-modal", { "aria-labelledby": "modal-title", kind: "brand", onCalciteModalClose: async () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), layerExpressions: this._layerExpressions, ref: (el) => this._filterList = el, view: this.mapView }))));
     }
     /**
      * Close the filter modal
      *
      * @returns void
      */
-    _closeFilter() {
-        this._filterOpen = false;
+    async _closeFilter() {
+        if (this._filterOpen) {
+            // reset allIds
+            this._allIds = await queryAllIds(this._layer);
+            this._filterOpen = false;
+        }
     }
     /**
      * Show delete confirmation message
@@ -994,8 +1107,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     _selectAll() {
         const ids = this._allIds;
         this._table.highlightIds.removeAll();
+        this._skipOnChange = true;
         this._table.highlightIds.addMany(ids);
         this._selectedIndexes = ids;
+        this._finishOnChange();
     }
     /**
      * Toggle the show only selected flag
@@ -1037,9 +1152,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * @returns void
      */
     _initLayerExpressions() {
-        var _a;
-        const layerExpressions = (_a = this.mapInfo.filterConfig) === null || _a === void 0 ? void 0 : _a.layerExpressions;
-        this._layerExpressions = layerExpressions.filter((exp) => exp.id === this._layer.id);
+        var _a, _b;
+        const layerExpressions = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions;
+        this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer.id) : [];
     }
     /**
      * Select all rows that are not currently selectd
@@ -1055,8 +1170,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             }
             return prev;
         }, []).sort((a, b) => a - b);
+        this._skipOnChange = true;
         this._table.highlightIds.addMany(ids);
         this._selectedIndexes = ids;
+        this._finishOnChange();
     }
     /**
      * Export all selected rows as CSV
@@ -1142,6 +1259,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
                 fieldInfos.some(fieldInfo => {
                     if (fieldInfo.name === columnTemplate.fieldName) {
                         columnTemplate.label = fieldInfo.alias;
+                        columnTemplate.menuConfig = this._getMenuConfig(fieldInfo.name);
                         return true;
                     }
                 });
@@ -1150,12 +1268,48 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
                 return {
                     type: "field",
                     fieldName: fieldInfo.name,
-                    label: fieldInfo.alias
+                    label: fieldInfo.alias,
+                    menuConfig: this._getMenuConfig(fieldInfo.name)
                 };
             });
         }
         return columnTemplates;
     }
+    /**
+     * Get the menu config that adds the ability to hide the current column
+     *
+     * @returns void
+     * @protected
+     */
+    _getMenuConfig(name) {
+        return {
+            items: [
+                {
+                    label: this._translations.hideField,
+                    iconClass: "esri-icon-non-visible",
+                    autoCloseMenu: true,
+                    clickFunction: () => {
+                        this._handleHideClick(name);
+                    }
+                }
+            ]
+        };
+    }
+    /**
+     * Hide the table column for the provided name
+     *
+     * @returns void
+     * @protected
+     */
+    _handleHideClick(name) {
+        this._columnsInfo[name] = false;
+        this._table.hideColumn(name);
+        this._table.tableTemplate.columnTemplates.forEach((columnTemplate) => {
+            if (columnTemplate.fieldName === name) {
+                columnTemplate.visible = false;
+            }
+        });
+    }
     /**
      * Fetches the component's translations
      *

package/dist/components/map-layer-picker2.js

@@ -23,12 +23,13 @@ import { d as defineCustomElement$3 } from './option.js';
 import { d as defineCustomElement$2 } from './select.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
-const mapLayerPickerCss = ":host{display:block}.map-layer-picker-container{width:100%}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.no-bottom-margin{--calcite-label-margin-bottom:0px}.layer-picker-label-container{align-items:center;display:inline-flex;height:100%;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.cursor-default{cursor:default}";
+const mapLayerPickerCss = ":host{display:block}.map-layer-picker-container{width:100%;align-items:center}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.no-bottom-margin{--calcite-label-margin-bottom:0px}.layer-picker-label-container{align-items:center;display:inline-flex;height:100%;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.cursor-default{cursor:default}";
 
 const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.idsFound = createEvent(this, "idsFound", 7);
         this.noLayersFound = createEvent(this, "noLayersFound", 7);
         this.layerSelectionChange = createEvent(this, "layerSelectionChange", 7);
         //--------------------------------------------------------------------------
@@ -42,8 +43,10 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
         this.defaultLayerHonored = false;
         this.appearance = "transparent";
         this.defaultLayerId = "";
+        this.display = "inline-block";
         this.enabledLayerIds = [];
         this.enabledTableIds = [];
+        this.height = undefined;
         this.mapView = undefined;
         this.onlyShowUpdatableLayers = undefined;
         this.placeholderIcon = "";
@@ -98,7 +101,9 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
      */
     render() {
         const id = "map-layer-picker";
-        return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
+        let style = this.height > 0 ? { "height": `${this.height.toString()}px` } : {};
+        style = Object.assign(Object.assign({}, style), { "display": this.display });
+        return (h(Host, null, h("div", { class: "map-layer-picker-container", style: style }, h("div", { class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
             !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() :
                 this.type === "combobox" ? this._getCombobox(id) :
                     this.type === "select" ? this._getSelect(id) : this._getDropdown(id), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.switchLayer))))));
@@ -235,14 +240,18 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
     async _setLayers() {
         if (this.mapView) {
             await this._initLayerTableHash();
-            const mapLayerIds = this.onlyShowUpdatableLayers ?
+            const layerIds = this.onlyShowUpdatableLayers ?
                 this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash);
-            const mapTableIds = this.showTables ? this.onlyShowUpdatableLayers ?
+            const tableIds = this.showTables ? this.onlyShowUpdatableLayers ?
                 this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
             this.ids = [
-                ...mapLayerIds.reverse().filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.reverse().indexOf(n) > -1 : true; }),
-                ...mapTableIds.reverse().filter(n => { var _a; return ((_a = this.enabledTableIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledTableIds.reverse().indexOf(n) > -1 : true; }),
+                ...layerIds.reverse().filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.reverse().indexOf(n) > -1 : true; }),
+                ...tableIds.reverse().filter(n => { var _a; return ((_a = this.enabledTableIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledTableIds.reverse().indexOf(n) > -1 : true; }),
             ];
+            this.idsFound.emit({
+                layerIds,
+                tableIds
+            });
         }
     }
     /**
@@ -320,8 +329,10 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
 }, [0, "map-layer-picker", {
         "appearance": [1],
         "defaultLayerId": [1, "default-layer-id"],
+        "display": [1],
         "enabledLayerIds": [16],
         "enabledTableIds": [16],
+        "height": [2],
         "mapView": [16],
         "onlyShowUpdatableLayers": [4, "only-show-updatable-layers"],
         "placeholderIcon": [1, "placeholder-icon"],

package/dist/components/map-picker2.js

@@ -141,7 +141,7 @@ const MapPicker = /*@__PURE__*/ proxyCustomElement(class MapPicker extends HTMLE
      * @protected
      */
     _getMapNameList(show) {
-        const listClass = show ? "map-list" : "display-none";
+        const listClass = show ? "map-list border-bottom-1" : "display-none";
         return (h("div", { class: listClass }, h("calcite-list", { id: "mapList", ref: (el) => this._list = el, selectionAppearance: "border", selectionMode: "single" }, this.mapInfos.map(mapInfo => {
             return (h("calcite-list-item", { label: mapInfo.name, onClick: () => this._webMapSelected(mapInfo), selected: mapInfo.id === this._loadedId, value: mapInfo.id }));
         }))));

package/dist/components/map-select-tools2.js

@@ -6,7 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
 import { b as goToSelection, h as highlightFeatures, e as getFeatureLayerView } from './mapViewUtils.js';
-import { d as queryObjectIds, g as getQueryGeoms, e as queryFeaturesByGeometry } from './queryUtils.js';
+import { e as queryObjectIds, g as getQueryGeoms, f as queryFeaturesByGeometry } from './queryUtils.js';
 import { E as EWorkflowType } from './interfaces.js';
 import { s as state } from './publicNotificationStore.js';
 import { a as getComponentClosestLanguage, g as getLocaleComponentStrings } from './locale.js';

package/dist/components/queryUtils.js

@@ -122,6 +122,22 @@ async function queryFeaturesByGeometry(start, layer, geometry, featuresCollectio
         queryFeaturesByGeometry(start += num, layer, geometry, featuresCollection) :
         Promise.resolve(featuresCollection);
 }
+/**
+ * Query the layer for feature ids that match the provided where clause.
+ * If no where clause is provided all features will be returned.
+ *
+ * @param layer the layer to retrieve features from
+ * @param where the where clause for the query
+ * @param orderBy any sort order to apply to the query
+ *
+ * @returns Promise with the ids from the layer that match the where and are sorted as defined by orderBy
+ */
+async function queryFeatureIds(layer, where, orderBy) {
+    const query = layer.createQuery();
+    query.where = where ? where : "1=1";
+    query.orderByFields = orderBy;
+    return await layer.queryObjectIds(query);
+}
 /**
  * Query the layer for the extent of features with the provided OIDs
  *
@@ -179,4 +195,4 @@ async function _intersectQuery(geometry, layer) {
     return layer.queryObjectIds(q);
 }
 
-export { queryExtent as a, queryAllIds as b, queryFeaturesByGlobalID as c, queryObjectIds as d, queryFeaturesByGeometry as e, getQueryGeoms as g, queryFeaturesByID as q };
+export { queryExtent as a, queryFeatureIds as b, queryAllIds as c, queryFeaturesByGlobalID as d, queryObjectIds as e, queryFeaturesByGeometry as f, getQueryGeoms as g, queryFeaturesByID as q };

package/dist/components/refine-selection2.js

@@ -6,7 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { e as ESelectionMode, b as EDrawMode, E as EWorkflowType } from './interfaces.js';
 import { e as getFeatureLayerView, f as getIdSets, i as highlightAllFeatures } from './mapViewUtils.js';
-import { e as queryFeaturesByGeometry } from './queryUtils.js';
+import { f as queryFeaturesByGeometry } from './queryUtils.js';
 import { s as state } from './publicNotificationStore.js';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { d as defineCustomElement$s } from './action.js';

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

@@ -521,7 +521,7 @@ const MapPicker = class {
      * @protected
      */
     _getMapNameList(show) {
-        const listClass = show ? "map-list" : "display-none";
+        const listClass = show ? "map-list border-bottom-1" : "display-none";
         return (h("div", { class: listClass }, h("calcite-list", { id: "mapList", ref: (el) => this._list = el, selectionAppearance: "border", selectionMode: "single" }, this.mapInfos.map(mapInfo => {
             return (h("calcite-list-item", { label: mapInfo.name, onClick: () => this._webMapSelected(mapInfo), selected: mapInfo.id === this._loadedId, value: mapInfo.id }));
         }))));

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

@@ -13,7 +13,7 @@ import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as
 import { K as KindIcons } from './resources-6e00e0d1.js';
 import { l as loadModules } from './loadModules-cea493da.js';
 import { g as getLocaleComponentStrings } from './locale-834c52c6.js';
-import { l as getAllLayers } from './mapViewUtils-3ff1c264.js';
+import { m as getAllLayers } from './mapViewUtils-066602d5.js';
 import './guid-36c6c6a5.js';
 import './resources-cdc36705.js';
 import './key-af303047.js';

package/dist/esm/calcite-combobox_6.entry.js

@@ -22,7 +22,7 @@ import { d as debounce } from './debounce-229b1a22.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-1149b5cb.js';
 import { i as isActivationKey } from './key-af303047.js';
 import { g as getLocaleComponentStrings } from './locale-834c52c6.js';
-import { m as getMapLayerHash, n as getMapTableHash } from './mapViewUtils-3ff1c264.js';
+import { n as getMapLayerHash, o as getMapTableHash } from './mapViewUtils-066602d5.js';
 import { s as state } from './publicNotificationStore-9362d7ae.js';
 import './resources-cdc36705.js';
 import './browser-b4c16201.js';
@@ -1895,11 +1895,12 @@ const DropdownItem = class {
 };
 DropdownItem.style = dropdownItemCss;
 
-const mapLayerPickerCss = ":host{display:block}.map-layer-picker-container{width:100%}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.no-bottom-margin{--calcite-label-margin-bottom:0px}.layer-picker-label-container{align-items:center;display:inline-flex;height:100%;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.cursor-default{cursor:default}";
+const mapLayerPickerCss = ":host{display:block}.map-layer-picker-container{width:100%;align-items:center}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.no-bottom-margin{--calcite-label-margin-bottom:0px}.layer-picker-label-container{align-items:center;display:inline-flex;height:100%;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.cursor-default{cursor:default}";
 
 const MapLayerPicker = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.idsFound = createEvent(this, "idsFound", 7);
         this.noLayersFound = createEvent(this, "noLayersFound", 7);
         this.layerSelectionChange = createEvent(this, "layerSelectionChange", 7);
         //--------------------------------------------------------------------------
@@ -1913,8 +1914,10 @@ const MapLayerPicker = class {
         this.defaultLayerHonored = false;
         this.appearance = "transparent";
         this.defaultLayerId = "";
+        this.display = "inline-block";
         this.enabledLayerIds = [];
         this.enabledTableIds = [];
+        this.height = undefined;
         this.mapView = undefined;
         this.onlyShowUpdatableLayers = undefined;
         this.placeholderIcon = "";
@@ -1969,7 +1972,9 @@ const MapLayerPicker = class {
      */
     render() {
         const id = "map-layer-picker";
-        return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
+        let style = this.height > 0 ? { "height": `${this.height.toString()}px` } : {};
+        style = Object.assign(Object.assign({}, style), { "display": this.display });
+        return (h(Host, null, h("div", { class: "map-layer-picker-container", style: style }, h("div", { class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
             !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() :
                 this.type === "combobox" ? this._getCombobox(id) :
                     this.type === "select" ? this._getSelect(id) : this._getDropdown(id), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.switchLayer))))));
@@ -2106,14 +2111,18 @@ const MapLayerPicker = class {
     async _setLayers() {
         if (this.mapView) {
             await this._initLayerTableHash();
-            const mapLayerIds = this.onlyShowUpdatableLayers ?
+            const layerIds = this.onlyShowUpdatableLayers ?
                 this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash);
-            const mapTableIds = this.showTables ? this.onlyShowUpdatableLayers ?
+            const tableIds = this.showTables ? this.onlyShowUpdatableLayers ?
                 this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
             this.ids = [
-                ...mapLayerIds.reverse().filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.reverse().indexOf(n) > -1 : true; }),
-                ...mapTableIds.reverse().filter(n => { var _a; return ((_a = this.enabledTableIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledTableIds.reverse().indexOf(n) > -1 : true; }),
+                ...layerIds.reverse().filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.reverse().indexOf(n) > -1 : true; }),
+                ...tableIds.reverse().filter(n => { var _a; return ((_a = this.enabledTableIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledTableIds.reverse().indexOf(n) > -1 : true; }),
             ];
+            this.idsFound.emit({
+                layerIds,
+                tableIds
+            });
         }
     }
     /**