@esri/solutions-components 0.8.27 → 0.8.29

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

@@ -22,7 +22,7 @@ import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { getFeatureLayerView, getLayerOrTable, goToSelection } from "../../utils/mapViewUtils";
-import { queryAllIds, queryFeatureIds, queryFeaturesByGlobalID } from "../../utils/queryUtils";
+import { queryAllIds, queryAllOidsWithQueryFeatures, queryFeaturesByGlobalID } from "../../utils/queryUtils";
 import * as downloadUtils from "../../utils/downloadUtils";
 import "@esri/instant-apps-components/dist/components/instant-apps-social-share";
 export class LayerTable {
@@ -172,6 +172,7 @@ export class LayerTable {
         this._initLayerExpressions();
         this._initToolInfos();
         this._updateToolbar();
+        console.log("mapInfoWatchHandler");
         await this._sortTable();
     }
     /**
@@ -215,6 +216,10 @@ export class LayerTable {
         if (this._selectAllActive && this.selectedIds.length !== this._allIds.length) {
             this._selectAllActive = false;
         }
+        if (this.selectedIds.length > 0) {
+            this._table.rowHighlightIds.removeAll();
+            this._table.rowHighlightIds.add(this.selectedIds[0]);
+        }
     }
     /**
      * Scroll and zoom to the selected feature from the Features widget.
@@ -314,7 +319,7 @@ export class LayerTable {
         const selected = this.selectedIds.length.toString();
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         this._validateActiveActions();
-        return (h(Host, { key: 'c0451b25b6253fc017f59f471ced6347a618bdcf' }, h("calcite-shell", { key: 'b71245a1b347aae2e06ccccd750875d9c0571b1b' }, this._getTableControlRow("header"), h("div", { key: 'a4c9e51f2cfa9e90bd1b67e8d542e93896321037', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'e50e3a4165c02c56f99897fa29f079b2ef1e02ff', class: "height-full width-full" }, h("calcite-loader", { key: 'ad263eb3ac8558d6cd0777f993f663ddd0f7fbe6', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '2bcbdf8197b4bcc5102d408538dab17acd803ae9', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '928286a8e4d1159b56b2aa4384f0d6eed38c9e76' }, h("calcite-shell", { key: '7c9b98056ee867df54ebfd31fee6f046f5152f64' }, this._getTableControlRow("header"), h("div", { key: 'b1a9a9cca100c7bef335afd5b6c7d7384ca7536c', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'ceeead9900f43c94f46c8c94698ae17f3ae558b7', class: "height-full width-full" }, h("calcite-loader", { key: '7bf3c9ba21daa27dd387ba5413b6f6e982e1f10d', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '7d0440047453a45fe1688ad373ab2463fe7479ba', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
             .replace("{{selected}}", selected))) : undefined)), this._filterModal()));
     }
@@ -915,43 +920,38 @@ export class LayerTable {
             else if (this._shiftIsPressed) {
                 this._skipOnChange = true;
                 this._previousCurrentId = this._currentId;
-                this._currentId = [...this._table.highlightIds.toArray()].reverse()[0];
-                if (this._previousCurrentId !== this._currentId) {
+                this._currentId = [...ids].reverse()[0];
+                if (ids.length === 1) {
+                    this._skipOnChange = false;
+                }
+                else 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);
+                    const oids = await queryAllOidsWithQueryFeatures(0, this._layer, [], 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._skipOnChange = startIndex + 1 !== endIndex;
-                    const selectedIds = oids.reduce((prev, cur) => {
+                    const idsInRange = 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.selectedIds.indexOf(id) > -1 || (index >= startIndex && index <= endIndex)) && prev.indexOf(id) < 0 && index > -1) {
+                        else if (isBetween && prev.indexOf(id) < 0) {
                             prev.push(id);
                         }
                         return prev;
                     }, []);
-                    this.selectedIds = _start < _end ? selectedIds.reverse() : selectedIds;
+                    const selectedIds = _start < _end ? idsInRange.reverse() : idsInRange;
+                    this.selectedIds = [...new Set([...selectedIds, ...this.selectedIds])];
                     this._table.highlightIds.addMany(this.selectedIds.filter(i => ids.indexOf(i) < 0));
                 }
             }
@@ -1014,6 +1014,7 @@ export class LayerTable {
         this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
         await this.reactiveUtils.once(() => this._table.state === "loaded")
             .then(async () => {
+            console.log("this._table.state === 'loaded'");
             this._table.highlightIds.removeAll();
             this._table.clearSelectionFilter();
             this._resetColumnTemplates();
@@ -1117,18 +1118,18 @@ export class LayerTable {
      * Sort the table with the configured field and the sort order
      */
     async _sortTable() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         //By default sort the table using objectIdField and in descending order
         let sortField = (_a = this._layer) === null || _a === void 0 ? void 0 : _a.objectIdField;
         let sortOrder = 'desc';
         let configuredLayer;
         //get the sortField and sortOrder from the configuration
-        if (((_d = (_c = (_b = this.mapInfo) === null || _b === void 0 ? void 0 : _b.layerOptions) === null || _c === void 0 ? void 0 : _c.layers) === null || _d === void 0 ? void 0 : _d.length) > 0) {
+        if (((_d = (_c = (_b = this.mapInfo) === null || _b === void 0 ? void 0 : _b.layerOptions) === null || _c === void 0 ? void 0 : _c.layers) === null || _d === void 0 ? void 0 : _d.length) > 0 && ((_e = this._layer) === null || _e === void 0 ? void 0 : _e.id)) {
             configuredLayer = this.mapInfo.layerOptions.layers.filter((layer) => layer.id === this._layer.id);
             if (configuredLayer && configuredLayer.length > 0) {
                 configuredLayer = configuredLayer[0];
                 //if sort field is defined and sortField is available in the fields then use it
-                if (configuredLayer.sortField && ((_e = configuredLayer.fields) === null || _e === void 0 ? void 0 : _e.includes(configuredLayer.sortField))) {
+                if (configuredLayer.sortField && ((_f = configuredLayer.fields) === null || _f === void 0 ? void 0 : _f.includes(configuredLayer.sortField))) {
                     sortField = configuredLayer.sortField;
                 }
                 //use sort order if configured
@@ -1138,6 +1139,7 @@ export class LayerTable {
         if (this._table && this._layer) {
             await this._table.when();
             await this._layer.when(() => {
+                console.log("sort on this._layer.when");
                 this._table.sortColumn(sortField, sortOrder);
             });
         }
@@ -1291,9 +1293,10 @@ export class LayerTable {
      * Clears the selected indexes
      */
     _clearSelection() {
-        var _a;
+        var _a, _b;
         this.selectedIds = [];
         (_a = this._table) === null || _a === void 0 ? void 0 : _a.highlightIds.removeAll();
+        (_b = this._table) === null || _b === void 0 ? void 0 : _b.rowHighlightIds.removeAll();
         this._finishOnChange();
     }
     /**

package/dist/collection/components/map-select-tools/map-select-tools.js

@@ -200,14 +200,14 @@ export class MapSelectTools {
         var _a, _b;
         const showBufferToolsClass = this._searchDistanceEnabled ? "search-distance" : "div-not-visible";
         const bufferDistance = typeof ((_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.distance) === "number" ? this.selectionSet.distance : this.defaultBufferDistance;
-        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.searchDistance, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "search-distance-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "search-distance-icon" }, h("span", { class: "tooltip-message" }, this._translations.useSearchDistanceTootip)), h("calcite-switch", { checked: this._searchDistanceEnabled, onCalciteSwitchChange: () => this._searchDistanceEnabled = !this._searchDistanceEnabled })), h("div", { class: showBufferToolsClass }, h("buffer-tools", { disabled: !this._searchDistanceEnabled, distance: bufferDistance, geometries: this.geometries, onBufferComplete: (evt) => void this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.unit) || this.defaultBufferUnit }))));
+        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.searchDistance, h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: true, icon: "question", id: "search-distance-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "search-distance-icon" }, h("span", { class: "tooltip-message" }, this._translations.useSearchDistanceTootip)), h("calcite-switch", { checked: this._searchDistanceEnabled, onCalciteSwitchChange: () => this._searchDistanceEnabled = !this._searchDistanceEnabled })), h("div", { class: showBufferToolsClass }, h("buffer-tools", { disabled: !this._searchDistanceEnabled, distance: bufferDistance, geometries: this.geometries, onBufferComplete: (evt) => void this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.unit) || this.defaultBufferUnit }))));
     }
     /**
      * Renders the map layer picker component.
      */
     _getUseLayerFeaturesOptions() {
         const useLayerFeaturesClass = this._useLayerFeaturesEnabled ? "div-visible" : "div-not-visible";
-        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.useLayerFeatures, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "use-layer-features-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "use-layer-features-icon" }, h("span", { class: "tooltip-message" }, this._translations.useLayerFeaturesTooltip)), h("calcite-switch", { checked: this._useLayerFeaturesEnabled, onCalciteSwitchChange: () => { this._useLayerFeaturesEnabledChanged(); } })), h("div", { class: useLayerFeaturesClass + " padding-top-1" }, h("map-layer-picker", { enabledLayerIds: this.selectionLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedIds: this.layerViews.map(l => l.layer.id), showTables: false }))));
+        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.useLayerFeatures, h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: true, icon: "question", id: "use-layer-features-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "use-layer-features-icon" }, h("span", { class: "tooltip-message" }, this._translations.useLayerFeaturesTooltip)), h("calcite-switch", { checked: this._useLayerFeaturesEnabled, onCalciteSwitchChange: () => { this._useLayerFeaturesEnabledChanged(); } })), h("div", { class: useLayerFeaturesClass + " padding-top-1" }, h("map-layer-picker", { enabledLayerIds: this.selectionLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedIds: this.layerViews.map(l => l.layer.id), showTables: false }))));
     }
     /**
      * Renders the number of selected features

package/dist/collection/components/refine-selection/refine-selection.js

@@ -77,7 +77,7 @@ export class RefineSelection {
     render() {
         var _a, _b;
         const layerPickerClass = this._enabledLayerIds.length > 1 ? "display-block" : "display-none";
-        return (h(Host, { key: 'abb0520889c7e739ccd0f7ef1cf5371169b09a4f' }, h("div", { key: '3772abb5d1f741644edd934e13ce25588714be0d', class: layerPickerClass + " padding-top-sides-1" }, h("div", { key: 'd0205e6127cf2df2eeb6ff9269ee0f64ccb0506b', class: "display-flex" }, h("calcite-label", { key: 'c6bdf8e921b6d7460198c5ea773c9f29f86dd7a4', class: "font-bold width-full label-margin-0" }, h("div", { key: '49969bbbb52f847764cddd748d9ebb01ee261de1', class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { key: '749c671b5b75d91e84f732daa4acb2264ed95f6c', class: "padding-start-1-2 icon", icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { key: 'b0d7a600796e8b438db67b8d0dba74066bf3261f', enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedIds: [this._refineLayer.layer.id], showTables: false })), h("calcite-popover", { key: '6ed81245f48aa8c1163031625e276a3d708fca73', closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { key: '00e817a3d1f08b5f61f262eae88859d291444294', class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { key: '0298fa4e89b539aba1aa602a84f224da905bf4f2', class: "padding-1" }, h("div", { key: '385699e47f1304a89b3abfe63f0d612b8b153c54', class: "padding-bottom-1" }, h("calcite-segmented-control", { key: 'a3d8bc30f9df92a98bd1dad2a4b7fd6221b4ea97', class: "w-100", width: "full" }, h("calcite-segmented-control-item", { key: 'f45b25ce69039e7de4b416a9498b6ec8cc850c60', checked: this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { key: 'fcaa2cfc47ef7d46c1bf6080bbed2ab8c1b2a0a1', class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { key: '3be785a5d23b559021a609ae39950f7937d9b9e4', checked: !this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { key: 'ee4d85f969762c87e30f07b6d518c4ca088fdbb3', class: "font-weight-500" }, this._translations.remove)))), h("div", { key: 'a1717a51a57bd216a04c13e9b04baaa5510bf33b' }, h("map-draw-tools", { key: '6063f82aea3984aa792e2f89e688eeaf0327ff1e', active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), h("br", { key: '76d977c28df03e57cde309eaaa300a9f013fae2c' }), (h("calcite-list", { key: 'e596cc82c03ffc277dbbad244de7a985fcfcc40a', class: "list-border" }, this._getRefineSelectionSetList())))));
+        return (h(Host, { key: 'abb0520889c7e739ccd0f7ef1cf5371169b09a4f' }, h("div", { key: '3772abb5d1f741644edd934e13ce25588714be0d', class: layerPickerClass + " padding-top-sides-1" }, h("div", { key: 'd0205e6127cf2df2eeb6ff9269ee0f64ccb0506b', class: "display-flex" }, h("calcite-label", { key: 'c6bdf8e921b6d7460198c5ea773c9f29f86dd7a4', class: "font-bold width-full label-margin-0" }, h("div", { key: '49969bbbb52f847764cddd748d9ebb01ee261de1', class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { key: 'e214244ee8305ffc6214df5d456340ffff2e48d5', class: "padding-start-1-2 icon", flipRtl: true, icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { key: '5141de15e7492342fa735b941d11713d9b6b940f', enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedIds: [this._refineLayer.layer.id], showTables: false })), h("calcite-popover", { key: 'fcc6af19fb88b1cffd386fc499ef90e94530a033', closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { key: 'b740844b112e2bd8d42dbd0e87c0201a4b64b171', class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { key: 'fe3fdd55ef90be673e89a31a2faf4cb83de132f5', class: "padding-1" }, h("div", { key: 'ee3d2c2d3b4ab82c39bceffd8fda755c172e18b6', class: "padding-bottom-1" }, h("calcite-segmented-control", { key: '960d56c2a480e00410dc1f075e99f747c71a1cdb', class: "w-100", width: "full" }, h("calcite-segmented-control-item", { key: '048cfef7ac5f23a6ad2c663cb3704f673a0a0fbd', checked: this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { key: '4777b29c110bf5055622d5de8a60d0633bb1498f', class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { key: 'ae9147508332307320f34d8997ca10f42a8df704', checked: !this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { key: 'e9c94444fbb17b86d04fcc8a51c83c9ef1c09cf5', class: "font-weight-500" }, this._translations.remove)))), h("div", { key: '6c1e7c69a983f69930f8a084746233603db56727' }, h("map-draw-tools", { key: 'dcb2d5ddb6a62b4d45d9416b1c8f49ba3ce0ed08', active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), h("br", { key: '14e8f85ee2f281f757c9f9a66b5ddb818310f8fc' }), (h("calcite-list", { key: '0be153af5a6c87289ee49ffe6b46c35a4d943b50', class: "list-border" }, this._getRefineSelectionSetList())))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/utils/queryUtils.js

@@ -40,6 +40,36 @@ export async function queryAllFeatures(start, layer, graphics) {
         queryAllFeatures(start += num, layer, graphics) :
         Promise.resolve(graphics);
 }
+/**
+ * Query the layer for all OIDs valid for any definition expressions applied to the layer.
+ *
+ * This query allows OIDs to be returned in the same order as shown in the FeatureTable.
+ * FeatureLayer.queryObjectIds can return OIDs in a different order.
+ *
+ * @param start zero-based index indicating where to begin retrieving features
+ * @param layer the layer to retrieve features from
+ * @param graphics stores the features
+ * @param orderBy One or more field names used to order the query results.
+ *                Specify ASC (ascending) or DESC (descending) after the field name to control the order.
+ *                The default order is ASC.
+ *
+ * @returns Promise with the OIDs sorted based on any orderBy definitions
+ */
+export async function queryAllOidsWithQueryFeatures(start, layer, graphics, orderBy) {
+    const num = layer.capabilities.query.maxRecordCount;
+    const query = layer.createQuery();
+    query.start = start;
+    query.num = num;
+    query.returnGeometry = false;
+    query.orderByFields = orderBy;
+    query.outFields = [layer.objectIdField];
+    query.where = layer.definitionExpression || "1=1";
+    const result = await layer.queryFeatures(query);
+    graphics = graphics.concat(result.features);
+    return result.exceededTransferLimit ?
+        queryAllOidsWithQueryFeatures(start += num, layer, graphics, orderBy) :
+        Promise.resolve(graphics.map(g => g.attributes[layer.objectIdField]));
+}
 /**
  * Query the layer for all IDs
  *

package/dist/collection/utils/queryUtils.ts

@@ -48,6 +48,47 @@ export async function queryAllFeatures(
     Promise.resolve(graphics);
 }
 
+/**
+ * Query the layer for all OIDs valid for any definition expressions applied to the layer.
+ *
+ * This query allows OIDs to be returned in the same order as shown in the FeatureTable.
+ * FeatureLayer.queryObjectIds can return OIDs in a different order.
+ *
+ * @param start zero-based index indicating where to begin retrieving features
+ * @param layer the layer to retrieve features from
+ * @param graphics stores the features
+ * @param orderBy One or more field names used to order the query results.
+ *                Specify ASC (ascending) or DESC (descending) after the field name to control the order.
+ *                The default order is ASC.
+ *
+ * @returns Promise with the OIDs sorted based on any orderBy definitions
+ */
+export async function queryAllOidsWithQueryFeatures(
+  start: number,
+  layer: __esri.FeatureLayer,
+  graphics: __esri.Graphic[],
+  orderBy?: string[]
+): Promise<number[]> {
+  const num = layer.capabilities.query.maxRecordCount;
+  const query = layer.createQuery();
+  query.start = start;
+  query.num = num;
+  query.returnGeometry = false;
+  query.orderByFields = orderBy;
+  query.outFields = [layer.objectIdField];
+  query.where = layer.definitionExpression || "1=1";
+
+  const result = await layer.queryFeatures(query);
+
+  graphics = graphics.concat(
+    result.features
+  );
+
+  return result.exceededTransferLimit ?
+    queryAllOidsWithQueryFeatures(start += num, layer, graphics, orderBy) :
+    Promise.resolve(graphics.map(g => g.attributes[layer.objectIdField]));
+}
+
 /**
  * Query the layer for all IDs
  *

package/dist/components/floor-filter2.js

@@ -27,15 +27,19 @@ const FloorFilter = /*@__PURE__*/ proxyCustomElement(class FloorFilter extends H
     //
     //--------------------------------------------------------------------------
     async mapViewWatchHandler() {
+        console.log("mapViewWatchHandler FF");
         const webMap = this.mapView.map;
         await webMap.when(() => {
+            console.log("webMap.when FF");
             if (this.floorFilterWidget) {
                 this.floorFilterWidget.destroy();
                 this.floorFilterWidget = undefined;
+                console.log("floorFilterWidget destroyed");
             }
             if (this._floorFilterElement) {
                 this._floorFilterElement.remove();
                 this._floorFilterElement = document.createElement("div");
+                console.log("this._floorFilterElement created");
             }
             this._initFloorFilter(this.mapView, webMap);
         });
@@ -52,7 +56,7 @@ const FloorFilter = /*@__PURE__*/ proxyCustomElement(class FloorFilter extends H
         return this._initModules();
     }
     render() {
-        return (h(Host, { key: '98769446b20d8a9432b571b5653abbc6613bdfe5' }, h("div", { key: '6606a2593fec1885fc02b07a168bdea43e7f864a', ref: (el) => { this._floorFilterElement = el; } })));
+        return (h(Host, { key: 'df3c419f3eaf30590c44c4919f0eeddfc333b81d' }, h("div", { key: '8496099f3bc35f34db6e47f73870ead9144df0a4', ref: (el) => { this._floorFilterElement = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -79,6 +83,11 @@ const FloorFilter = /*@__PURE__*/ proxyCustomElement(class FloorFilter extends H
      */
     _initFloorFilter(view, webMap) {
         var _a, _b, _c;
+        console.log("_initFloorFilter");
+        console.log(`view: ${view}`);
+        console.log(`this.enabled: ${this.enabled}`);
+        console.log(`this.FloorFilter: ${this.FloorFilter}`);
+        console.log(`webMap?.floorInfo: ${webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo}`);
         if (view && this.enabled && this.FloorFilter && (webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo)) {
             this.floorFilterWidget = new this.FloorFilter({
                 container: this._floorFilterElement,

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, c as getFeatureLayerView, g as getLayerOrTable } from './mapViewUtils.js';
-import { b as queryAllIds, c as queryFeatureIds, d as queryFeaturesByGlobalID } from './queryUtils.js';
+import { b as queryAllIds, c as queryAllOidsWithQueryFeatures, d as queryFeaturesByGlobalID } from './queryUtils.js';
 import { d as downloadCSV } from './downloadUtils.js';
 import { d as defineCustomElement$D } from './action.js';
 import { d as defineCustomElement$C } from './action-bar.js';
@@ -202,6 +202,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this._initLayerExpressions();
         this._initToolInfos();
         this._updateToolbar();
+        console.log("mapInfoWatchHandler");
         await this._sortTable();
     }
     /**
@@ -245,6 +246,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         if (this._selectAllActive && this.selectedIds.length !== this._allIds.length) {
             this._selectAllActive = false;
         }
+        if (this.selectedIds.length > 0) {
+            this._table.rowHighlightIds.removeAll();
+            this._table.rowHighlightIds.add(this.selectedIds[0]);
+        }
     }
     /**
      * Scroll and zoom to the selected feature from the Features widget.
@@ -344,7 +349,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         const selected = this.selectedIds.length.toString();
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         this._validateActiveActions();
-        return (h(Host, { key: 'c0451b25b6253fc017f59f471ced6347a618bdcf' }, h("calcite-shell", { key: 'b71245a1b347aae2e06ccccd750875d9c0571b1b' }, this._getTableControlRow("header"), h("div", { key: 'a4c9e51f2cfa9e90bd1b67e8d542e93896321037', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'e50e3a4165c02c56f99897fa29f079b2ef1e02ff', class: "height-full width-full" }, h("calcite-loader", { key: 'ad263eb3ac8558d6cd0777f993f663ddd0f7fbe6', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '2bcbdf8197b4bcc5102d408538dab17acd803ae9', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '928286a8e4d1159b56b2aa4384f0d6eed38c9e76' }, h("calcite-shell", { key: '7c9b98056ee867df54ebfd31fee6f046f5152f64' }, this._getTableControlRow("header"), h("div", { key: 'b1a9a9cca100c7bef335afd5b6c7d7384ca7536c', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'ceeead9900f43c94f46c8c94698ae17f3ae558b7', class: "height-full width-full" }, h("calcite-loader", { key: '7bf3c9ba21daa27dd387ba5413b6f6e982e1f10d', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '7d0440047453a45fe1688ad373ab2463fe7479ba', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
             .replace("{{selected}}", selected))) : undefined)), this._filterModal()));
     }
@@ -945,43 +950,38 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             else if (this._shiftIsPressed) {
                 this._skipOnChange = true;
                 this._previousCurrentId = this._currentId;
-                this._currentId = [...this._table.highlightIds.toArray()].reverse()[0];
-                if (this._previousCurrentId !== this._currentId) {
+                this._currentId = [...ids].reverse()[0];
+                if (ids.length === 1) {
+                    this._skipOnChange = false;
+                }
+                else 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);
+                    const oids = await queryAllOidsWithQueryFeatures(0, this._layer, [], 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._skipOnChange = startIndex + 1 !== endIndex;
-                    const selectedIds = oids.reduce((prev, cur) => {
+                    const idsInRange = 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.selectedIds.indexOf(id) > -1 || (index >= startIndex && index <= endIndex)) && prev.indexOf(id) < 0 && index > -1) {
+                        else if (isBetween && prev.indexOf(id) < 0) {
                             prev.push(id);
                         }
                         return prev;
                     }, []);
-                    this.selectedIds = _start < _end ? selectedIds.reverse() : selectedIds;
+                    const selectedIds = _start < _end ? idsInRange.reverse() : idsInRange;
+                    this.selectedIds = [...new Set([...selectedIds, ...this.selectedIds])];
                     this._table.highlightIds.addMany(this.selectedIds.filter(i => ids.indexOf(i) < 0));
                 }
             }
@@ -1044,6 +1044,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
         await this.reactiveUtils.once(() => this._table.state === "loaded")
             .then(async () => {
+            console.log("this._table.state === 'loaded'");
             this._table.highlightIds.removeAll();
             this._table.clearSelectionFilter();
             this._resetColumnTemplates();
@@ -1147,18 +1148,18 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * Sort the table with the configured field and the sort order
      */
     async _sortTable() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         //By default sort the table using objectIdField and in descending order
         let sortField = (_a = this._layer) === null || _a === void 0 ? void 0 : _a.objectIdField;
         let sortOrder = 'desc';
         let configuredLayer;
         //get the sortField and sortOrder from the configuration
-        if (((_d = (_c = (_b = this.mapInfo) === null || _b === void 0 ? void 0 : _b.layerOptions) === null || _c === void 0 ? void 0 : _c.layers) === null || _d === void 0 ? void 0 : _d.length) > 0) {
+        if (((_d = (_c = (_b = this.mapInfo) === null || _b === void 0 ? void 0 : _b.layerOptions) === null || _c === void 0 ? void 0 : _c.layers) === null || _d === void 0 ? void 0 : _d.length) > 0 && ((_e = this._layer) === null || _e === void 0 ? void 0 : _e.id)) {
             configuredLayer = this.mapInfo.layerOptions.layers.filter((layer) => layer.id === this._layer.id);
             if (configuredLayer && configuredLayer.length > 0) {
                 configuredLayer = configuredLayer[0];
                 //if sort field is defined and sortField is available in the fields then use it
-                if (configuredLayer.sortField && ((_e = configuredLayer.fields) === null || _e === void 0 ? void 0 : _e.includes(configuredLayer.sortField))) {
+                if (configuredLayer.sortField && ((_f = configuredLayer.fields) === null || _f === void 0 ? void 0 : _f.includes(configuredLayer.sortField))) {
                     sortField = configuredLayer.sortField;
                 }
                 //use sort order if configured
@@ -1168,6 +1169,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         if (this._table && this._layer) {
             await this._table.when();
             await this._layer.when(() => {
+                console.log("sort on this._layer.when");
                 this._table.sortColumn(sortField, sortOrder);
             });
         }
@@ -1321,9 +1323,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * Clears the selected indexes
      */
     _clearSelection() {
-        var _a;
+        var _a, _b;
         this.selectedIds = [];
         (_a = this._table) === null || _a === void 0 ? void 0 : _a.highlightIds.removeAll();
+        (_b = this._table) === null || _b === void 0 ? void 0 : _b.rowHighlightIds.removeAll();
         this._finishOnChange();
     }
     /**

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

@@ -217,14 +217,14 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class MapSelectTools ext
         var _a, _b;
         const showBufferToolsClass = this._searchDistanceEnabled ? "search-distance" : "div-not-visible";
         const bufferDistance = typeof ((_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.distance) === "number" ? this.selectionSet.distance : this.defaultBufferDistance;
-        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.searchDistance, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "search-distance-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "search-distance-icon" }, h("span", { class: "tooltip-message" }, this._translations.useSearchDistanceTootip)), h("calcite-switch", { checked: this._searchDistanceEnabled, onCalciteSwitchChange: () => this._searchDistanceEnabled = !this._searchDistanceEnabled })), h("div", { class: showBufferToolsClass }, h("buffer-tools", { disabled: !this._searchDistanceEnabled, distance: bufferDistance, geometries: this.geometries, onBufferComplete: (evt) => void this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.unit) || this.defaultBufferUnit }))));
+        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.searchDistance, h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: true, icon: "question", id: "search-distance-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "search-distance-icon" }, h("span", { class: "tooltip-message" }, this._translations.useSearchDistanceTootip)), h("calcite-switch", { checked: this._searchDistanceEnabled, onCalciteSwitchChange: () => this._searchDistanceEnabled = !this._searchDistanceEnabled })), h("div", { class: showBufferToolsClass }, h("buffer-tools", { disabled: !this._searchDistanceEnabled, distance: bufferDistance, geometries: this.geometries, onBufferComplete: (evt) => void this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.unit) || this.defaultBufferUnit }))));
     }
     /**
      * Renders the map layer picker component.
      */
     _getUseLayerFeaturesOptions() {
         const useLayerFeaturesClass = this._useLayerFeaturesEnabled ? "div-visible" : "div-not-visible";
-        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.useLayerFeatures, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "use-layer-features-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "use-layer-features-icon" }, h("span", { class: "tooltip-message" }, this._translations.useLayerFeaturesTooltip)), h("calcite-switch", { checked: this._useLayerFeaturesEnabled, onCalciteSwitchChange: () => { this._useLayerFeaturesEnabledChanged(); } })), h("div", { class: useLayerFeaturesClass + " padding-top-1" }, h("map-layer-picker", { enabledLayerIds: this.selectionLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedIds: this.layerViews.map(l => l.layer.id), showTables: false }))));
+        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.useLayerFeatures, h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: true, icon: "question", id: "use-layer-features-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "use-layer-features-icon" }, h("span", { class: "tooltip-message" }, this._translations.useLayerFeaturesTooltip)), h("calcite-switch", { checked: this._useLayerFeaturesEnabled, onCalciteSwitchChange: () => { this._useLayerFeaturesEnabledChanged(); } })), h("div", { class: useLayerFeaturesClass + " padding-top-1" }, h("map-layer-picker", { enabledLayerIds: this.selectionLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedIds: this.layerViews.map(l => l.layer.id), showTables: false }))));
     }
     /**
      * Renders the number of selected features

package/dist/components/queryUtils.js

@@ -18,6 +18,36 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * Query the layer for all OIDs valid for any definition expressions applied to the layer.
+ *
+ * This query allows OIDs to be returned in the same order as shown in the FeatureTable.
+ * FeatureLayer.queryObjectIds can return OIDs in a different order.
+ *
+ * @param start zero-based index indicating where to begin retrieving features
+ * @param layer the layer to retrieve features from
+ * @param graphics stores the features
+ * @param orderBy One or more field names used to order the query results.
+ *                Specify ASC (ascending) or DESC (descending) after the field name to control the order.
+ *                The default order is ASC.
+ *
+ * @returns Promise with the OIDs sorted based on any orderBy definitions
+ */
+async function queryAllOidsWithQueryFeatures(start, layer, graphics, orderBy) {
+    const num = layer.capabilities.query.maxRecordCount;
+    const query = layer.createQuery();
+    query.start = start;
+    query.num = num;
+    query.returnGeometry = false;
+    query.orderByFields = orderBy;
+    query.outFields = [layer.objectIdField];
+    query.where = layer.definitionExpression || "1=1";
+    const result = await layer.queryFeatures(query);
+    graphics = graphics.concat(result.features);
+    return result.exceededTransferLimit ?
+        queryAllOidsWithQueryFeatures(start += num, layer, graphics, orderBy) :
+        Promise.resolve(graphics.map(g => g.attributes[layer.objectIdField]));
+}
 /**
  * Query the layer for all IDs
  *
@@ -125,22 +155,6 @@ 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
  *
@@ -198,4 +212,4 @@ async function _intersectQuery(geometry, layer) {
     return layer.queryObjectIds(q);
 }
 
-export { queryExtent as a, queryAllIds as b, queryFeatureIds as c, queryFeaturesByGlobalID as d, queryObjectIds as e, queryFeaturesByGeometry as f, getQueryGeoms as g, queryFeaturesByID as q };
+export { queryExtent as a, queryAllIds as b, queryAllOidsWithQueryFeatures as c, queryFeaturesByGlobalID as d, queryObjectIds as e, queryFeaturesByGeometry as f, getQueryGeoms as g, queryFeaturesByID as q };

package/dist/components/refine-selection2.js

@@ -98,7 +98,7 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class RefineSelection e
     render() {
         var _a, _b;
         const layerPickerClass = this._enabledLayerIds.length > 1 ? "display-block" : "display-none";
-        return (h(Host, { key: 'abb0520889c7e739ccd0f7ef1cf5371169b09a4f' }, h("div", { key: '3772abb5d1f741644edd934e13ce25588714be0d', class: layerPickerClass + " padding-top-sides-1" }, h("div", { key: 'd0205e6127cf2df2eeb6ff9269ee0f64ccb0506b', class: "display-flex" }, h("calcite-label", { key: 'c6bdf8e921b6d7460198c5ea773c9f29f86dd7a4', class: "font-bold width-full label-margin-0" }, h("div", { key: '49969bbbb52f847764cddd748d9ebb01ee261de1', class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { key: '749c671b5b75d91e84f732daa4acb2264ed95f6c', class: "padding-start-1-2 icon", icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { key: 'b0d7a600796e8b438db67b8d0dba74066bf3261f', enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedIds: [this._refineLayer.layer.id], showTables: false })), h("calcite-popover", { key: '6ed81245f48aa8c1163031625e276a3d708fca73', closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { key: '00e817a3d1f08b5f61f262eae88859d291444294', class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { key: '0298fa4e89b539aba1aa602a84f224da905bf4f2', class: "padding-1" }, h("div", { key: '385699e47f1304a89b3abfe63f0d612b8b153c54', class: "padding-bottom-1" }, h("calcite-segmented-control", { key: 'a3d8bc30f9df92a98bd1dad2a4b7fd6221b4ea97', class: "w-100", width: "full" }, h("calcite-segmented-control-item", { key: 'f45b25ce69039e7de4b416a9498b6ec8cc850c60', checked: this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { key: 'fcaa2cfc47ef7d46c1bf6080bbed2ab8c1b2a0a1', class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { key: '3be785a5d23b559021a609ae39950f7937d9b9e4', checked: !this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { key: 'ee4d85f969762c87e30f07b6d518c4ca088fdbb3', class: "font-weight-500" }, this._translations.remove)))), h("div", { key: 'a1717a51a57bd216a04c13e9b04baaa5510bf33b' }, h("map-draw-tools", { key: '6063f82aea3984aa792e2f89e688eeaf0327ff1e', active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), h("br", { key: '76d977c28df03e57cde309eaaa300a9f013fae2c' }), (h("calcite-list", { key: 'e596cc82c03ffc277dbbad244de7a985fcfcc40a', class: "list-border" }, this._getRefineSelectionSetList())))));
+        return (h(Host, { key: 'abb0520889c7e739ccd0f7ef1cf5371169b09a4f' }, h("div", { key: '3772abb5d1f741644edd934e13ce25588714be0d', class: layerPickerClass + " padding-top-sides-1" }, h("div", { key: 'd0205e6127cf2df2eeb6ff9269ee0f64ccb0506b', class: "display-flex" }, h("calcite-label", { key: 'c6bdf8e921b6d7460198c5ea773c9f29f86dd7a4', class: "font-bold width-full label-margin-0" }, h("div", { key: '49969bbbb52f847764cddd748d9ebb01ee261de1', class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { key: 'e214244ee8305ffc6214df5d456340ffff2e48d5', class: "padding-start-1-2 icon", flipRtl: true, icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { key: '5141de15e7492342fa735b941d11713d9b6b940f', enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedIds: [this._refineLayer.layer.id], showTables: false })), h("calcite-popover", { key: 'fcc6af19fb88b1cffd386fc499ef90e94530a033', closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { key: 'b740844b112e2bd8d42dbd0e87c0201a4b64b171', class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { key: 'fe3fdd55ef90be673e89a31a2faf4cb83de132f5', class: "padding-1" }, h("div", { key: 'ee3d2c2d3b4ab82c39bceffd8fda755c172e18b6', class: "padding-bottom-1" }, h("calcite-segmented-control", { key: '960d56c2a480e00410dc1f075e99f747c71a1cdb', class: "w-100", width: "full" }, h("calcite-segmented-control-item", { key: '048cfef7ac5f23a6ad2c663cb3704f673a0a0fbd', checked: this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { key: '4777b29c110bf5055622d5de8a60d0633bb1498f', class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { key: 'ae9147508332307320f34d8997ca10f42a8df704', checked: !this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { key: 'e9c94444fbb17b86d04fcc8a51c83c9ef1c09cf5', class: "font-weight-500" }, this._translations.remove)))), h("div", { key: '6c1e7c69a983f69930f8a084746233603db56727' }, h("map-draw-tools", { key: 'dcb2d5ddb6a62b4d45d9416b1c8f49ba3ce0ed08', active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), h("br", { key: '14e8f85ee2f281f757c9f9a66b5ddb818310f8fc' }), (h("calcite-list", { key: '0be153af5a6c87289ee49ffe6b46c35a4d943b50', class: "list-border" }, this._getRefineSelectionSetList())))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -133,15 +133,19 @@ const FloorFilter = class {
     //
     //--------------------------------------------------------------------------
     async mapViewWatchHandler() {
+        console.log("mapViewWatchHandler FF");
         const webMap = this.mapView.map;
         await webMap.when(() => {
+            console.log("webMap.when FF");
             if (this.floorFilterWidget) {
                 this.floorFilterWidget.destroy();
                 this.floorFilterWidget = undefined;
+                console.log("floorFilterWidget destroyed");
             }
             if (this._floorFilterElement) {
                 this._floorFilterElement.remove();
                 this._floorFilterElement = document.createElement("div");
+                console.log("this._floorFilterElement created");
             }
             this._initFloorFilter(this.mapView, webMap);
         });
@@ -158,7 +162,7 @@ const FloorFilter = class {
         return this._initModules();
     }
     render() {
-        return (h(Host, { key: '98769446b20d8a9432b571b5653abbc6613bdfe5' }, h("div", { key: '6606a2593fec1885fc02b07a168bdea43e7f864a', ref: (el) => { this._floorFilterElement = el; } })));
+        return (h(Host, { key: 'df3c419f3eaf30590c44c4919f0eeddfc333b81d' }, h("div", { key: '8496099f3bc35f34db6e47f73870ead9144df0a4', ref: (el) => { this._floorFilterElement = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -185,6 +189,11 @@ const FloorFilter = class {
      */
     _initFloorFilter(view, webMap) {
         var _a, _b, _c;
+        console.log("_initFloorFilter");
+        console.log(`view: ${view}`);
+        console.log(`this.enabled: ${this.enabled}`);
+        console.log(`this.FloorFilter: ${this.FloorFilter}`);
+        console.log(`webMap?.floorInfo: ${webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo}`);
         if (view && this.enabled && this.FloorFilter && (webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo)) {
             this.floorFilterWidget = new this.FloorFilter({
                 container: this._floorFilterElement,