@esri/solutions-components 0.6.28 → 0.6.29

package/dist/components/layer-table2.js

@@ -33,7 +33,7 @@ import { d as defineCustomElement$3 } from './shell.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 import { d as defineCustomElement$1 } from './map-layer-picker2.js';
 
-const layerTableCss = ":host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.border-end{border-inline-end:1px solid var(--calcite-ui-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.bottom-left{position:absolute;left:0;bottom:0}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0}.background{background-color:var(--calcite-ui-background)}.text-color{color:var(--calcite-ui-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-ui-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{padding:var(--lumo-space-xs) var(--lumo-space-m) !important;font-size:14px !important}";
+const layerTableCss = ":host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.border-end{border-inline-end:1px solid var(--calcite-ui-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.bottom-left{position:absolute;left:5;bottom:0}html[dir=\"rtl\"] .bottom-left{position:absolute;right:5;bottom:0}.height-19{height:19px}.background{background-color:var(--calcite-ui-background)}.text-color{color:var(--calcite-ui-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-ui-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{padding:var(--lumo-space-xs) var(--lumo-space-m) !important;font-size:14px !important}";
 
 const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTMLElement {
   constructor() {
@@ -69,6 +69,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     this.showNewestFirst = undefined;
     this.zoomAndScrollToSelected = undefined;
     this._confirmDelete = false;
+    this._controlsThatFit = undefined;
     this._fetchingData = false;
     this._isDeleting = false;
     this._layer = undefined;
@@ -82,6 +83,22 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
   //  Watch handlers
   //
   //--------------------------------------------------------------------------
+  /**
+   * watch for changes to the list of controls that will currently fit in the display
+   */
+  _controlsThatFitWatchHandler() {
+    const ids = this._controlsThatFit ? this._controlsThatFit.reduce((prev, cur) => {
+      prev.push(cur.id);
+      return prev;
+    }, []) : [];
+    this._toolInfos = this._toolInfos.map(ti => {
+      if (ti && this._controlsThatFit) {
+        const id = this._getId(ti.icon);
+        ti.isOverflow = ids.indexOf(id) < 0;
+        return ti;
+      }
+    });
+  }
   /**
    * watch for changes in map view and get the first layer
    */
@@ -103,6 +120,12 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     await this._resetTable();
     this._fetchingData = false;
   }
+  /**
+   * watch for selection changes
+   */
+  async _selectedIndexesWatchHandler() {
+    this._validateEnabledActions();
+  }
   /**
    * When sortActive is false the user has not defined a sort and we should use the default sort
    */
@@ -140,8 +163,8 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    * Refresh the table when edits are completed
    *
    */
-  editsComplete() {
-    this._refresh();
+  async editsComplete() {
+    await this._refresh();
   }
   /**
    * Refresh the table when edits are completed
@@ -165,6 +188,8 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
   async componentWillLoad() {
     await this._getTranslations();
     await this._initModules();
+    this._initToolInfos();
+    this._resizeObserver = new ResizeObserver(() => this._onResize());
   }
   /**
    * Renders the component.
@@ -174,10 +199,22 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     const loadingClass = this._fetchingData ? "" : "display-none";
     const total = this._allIds.length.toString();
     const selected = this._selectedIndexes.length.toString();
-    return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: "height-full-adjusted width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate })), h("div", { class: "bottom-left text-color" }, this._translations.recordsSelected
+    return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: "height-full-adjusted width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate })), h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
       .replace("{{total}}", total)
       .replace("{{selected}}", selected)))), this._deleteMessage()));
   }
+  /**
+   * Called once after the component is loaded
+   */
+  async componentDidLoad() {
+    this._resizeObserver.observe(this._toolbar);
+  }
+  /**
+   * Called after the component is rendered
+   */
+  componentDidRender() {
+    this._updateToolbar();
+  }
   //--------------------------------------------------------------------------
   //
   //  Functions (protected)
@@ -198,6 +235,14 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     this.FeatureTable = FeatureTable;
     this.reactiveUtils = reactiveUtils;
   }
+  /**
+   * Update the toolbar when its size changes
+   *
+   * @returns void
+   */
+  _onResize() {
+    this._updateToolbar();
+  }
   /**
    * Gets a row of controls that can be used for various interactions with the table
    *
@@ -206,11 +251,261 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    * @returns The dom node that contains the controls
    */
   _getTableControlRow(slot) {
+    const id = "more-table-options";
+    return (h("div", { class: "display-flex border-bottom height-51", ref: (el) => this._toolbar = el, slot: slot }, this._getActionBar(), this._getDropdown(id), this._getToolTip("", "bottom", id, this._translations.moreOptions)));
+  }
+  /**
+   * Gets a row of controls that can be used for various interactions with the table
+   *
+   * @param slot string optional slot to display the control within
+   *
+   * @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", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showTables: true, type: "dropdown" })), this._getActions()));
+  }
+  /**
+   * Get the actions that are used for various interactions with the table
+   *
+   * @returns VNode[] the action nodes
+   */
+  _getActions() {
+    const actions = this._getActionItems();
+    return actions.reduce((prev, cur) => {
+      if (cur && !cur.isOverflow) {
+        prev.push(cur.isDanger ?
+          this._getDangerAction(cur.icon, cur.label, cur.func, cur.disabled) :
+          this._getAction(cur.icon, cur.label, cur.func, cur.disabled));
+      }
+      return prev;
+    }, []);
+  }
+  /**
+   * Update actions enabled prop based on number of selected indexes
+   *
+   * @returns void
+   */
+  _validateEnabledActions() {
+    const featuresSelected = this._selectedIndexes.length > 0;
+    const selectionDependant = [
+      "zoom-to-object",
+      "trash",
+      "erase",
+      "selected-items-filter"
+    ];
+    this._toolInfos.forEach(ti => {
+      if (ti && selectionDependant.indexOf(ti.icon) > -1) {
+        ti.disabled = !featuresSelected;
+      }
+    });
+  }
+  /**
+   * Get the full list of toolInfos.
+   * Order is important. They should be listed in the order they should display in the UI from
+   * Left to Right for the action bar and Top to Bottom for the dropdown.
+   *
+   * @returns void
+   */
+  _initToolInfos() {
     var _a;
     const featuresSelected = this._selectedIndexes.length > 0;
-    const id = "more-table-options";
-    return (h("div", { class: "display-flex border-bottom height-51", slot: slot }, h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, h("div", { class: "border-end" }, h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showTables: true, type: "dropdown" })), this._getAction("zoom-to-object", this._translations.zoom, () => this._zoom(), !featuresSelected), ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? this._getAction("filter", this._translations.filters, () => this._filter(), false) : undefined, this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !featuresSelected), this._getAction("selected-items-filter", this._showOnlySelected ? this._translations.showAll : this._translations.showSelected, () => this._toggleShowSelected(), !featuresSelected)), h("calcite-dropdown", { disabled: this._layer === undefined }, h("calcite-action", { appearance: "solid", id: id, label: "", slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), h("calcite-dropdown-item", { iconStart: "compare", onClick: () => this._switchSelected() }, this._translations.switchSelected), h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._refresh() }, this._translations.refresh), this.enableCSV ?
-      (h("calcite-dropdown-item", { iconStart: "export", onClick: () => void this._exportToCSV() }, this._translations.exportCSV)) : undefined)), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.moreOptions))));
+    this._toolInfos = [{
+        icon: "zoom-to-object",
+        label: this._translations.zoom,
+        func: () => this._zoom(),
+        disabled: !featuresSelected,
+        isOverflow: false
+      }, ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? {
+        icon: "filter",
+        label: this._translations.filters,
+        func: () => this._filter(),
+        disabled: false,
+        isOverflow: false
+      } : undefined,
+      this._deleteEnabled ? {
+        icon: "trash",
+        label: this._translations.delete,
+        func: () => this._delete(),
+        disabled: !featuresSelected,
+        isDanger: true,
+        isOverflow: false
+      } : undefined, {
+        icon: "erase",
+        label: this._translations.clearSelection,
+        func: () => this._clearSelection(),
+        disabled: !featuresSelected,
+        isOverflow: false
+      }, {
+        icon: "selected-items-filter",
+        label: this._showOnlySelected ? this._translations.showAll : this._translations.showSelected,
+        func: () => this._toggleShowSelected(),
+        disabled: !featuresSelected,
+        isOverflow: false
+      }, {
+        icon: "list-check-all",
+        func: () => this._selectAll(),
+        label: this._translations.selectAll,
+        disabled: false,
+        isOverflow: true
+      }, {
+        icon: "compare",
+        func: () => this._switchSelected(),
+        label: this._translations.switchSelected,
+        disabled: false,
+        isOverflow: true
+      }, {
+        icon: "refresh",
+        func: () => this._refresh(),
+        label: this._translations.refresh,
+        disabled: false,
+        isOverflow: true
+      },
+      this.enableCSV ? {
+        icon: "export",
+        func: () => void this._exportToCSV(),
+        label: this._translations.exportCSV,
+        disabled: false,
+        isOverflow: true
+      } : undefined];
+    this._defaultVisibleToolSizeInfos = undefined;
+  }
+  /**
+   * Add/Remove tools from the action bar and dropdown based on available size
+   *
+   * @returns void
+   */
+  _updateToolbar() {
+    if (this._timeout) {
+      clearTimeout(this._timeout);
+    }
+    this._timeout = setTimeout(() => {
+      clearTimeout(this._timeout);
+      this._setToolbarSizeInfos();
+      const toolbarWidth = this._toolbar.offsetWidth;
+      let controlsWidth = this._toolbarSizeInfos.reduce((prev, cur) => {
+        prev += cur.width;
+        return prev;
+      }, 0);
+      const skipControls = ["solutions-more", "solutions-map-layer-picker-container"];
+      if (controlsWidth > toolbarWidth) {
+        if (this._toolbarSizeInfos.length > 0) {
+          const controlsThatFit = [...this._toolbarSizeInfos].reverse().reduce((prev, cur) => {
+            if (skipControls.indexOf(cur.id) < 0) {
+              if (controlsWidth > toolbarWidth) {
+                controlsWidth -= cur.width;
+              }
+              else {
+                prev.push(cur);
+              }
+            }
+            return prev;
+          }, []).reverse();
+          this._setControlsThatFit(controlsThatFit, skipControls);
+        }
+      }
+      else {
+        if (this._defaultVisibleToolSizeInfos) {
+          const currentTools = this._toolbarSizeInfos.reduce((prev, cur) => {
+            prev.push(cur.id);
+            return prev;
+          }, []);
+          const controlsThatFit = [...this._defaultVisibleToolSizeInfos].reduce((prev, cur) => {
+            if (skipControls.indexOf(cur.id) < 0 &&
+              (currentTools.indexOf(cur.id) > -1 || (controlsWidth + cur.width) <= toolbarWidth)) {
+              if (currentTools.indexOf(cur.id) < 0) {
+                controlsWidth += cur.width;
+              }
+              prev.push(cur);
+            }
+            return prev;
+          }, []);
+          this._setControlsThatFit(controlsThatFit, skipControls);
+        }
+      }
+    }, 5);
+  }
+  /**
+   * Validate if controls that fit the current display has changed or
+   * is different from what is currently displayed
+   *
+   * @returns void
+   */
+  _setControlsThatFit(controlsThatFit, skipControls) {
+    let update = JSON.stringify(controlsThatFit) !== JSON.stringify(this._controlsThatFit);
+    const actionbar = document.getElementById("solutions-action-bar");
+    actionbar.childNodes.forEach((n) => {
+      if (skipControls.indexOf(n.id) < 0 && !update) {
+        update = this._controlsThatFit.map(c => c.id).indexOf(n.id) < 0;
+      }
+    });
+    if (update) {
+      this._controlsThatFit = [...controlsThatFit];
+    }
+  }
+  /**
+   * Get the id and size for the toolbars current items
+   *
+   * @returns void
+   */
+  _setToolbarSizeInfos() {
+    let hasWidth = false;
+    this._toolbarSizeInfos = [];
+    this._toolbar.childNodes.forEach((c, i) => {
+      // handle the action bar
+      if (i === 0) {
+        c.childNodes.forEach((actionbarChild) => {
+          this._toolbarSizeInfos.push({
+            id: actionbarChild.id,
+            width: actionbarChild.offsetWidth
+          });
+          if (!hasWidth) {
+            hasWidth = actionbarChild.offsetWidth > 0;
+          }
+        });
+      }
+      else if (!c.referenceElement) {
+        // skip tooltips
+        this._toolbarSizeInfos.push({
+          id: c.id,
+          width: c.offsetWidth
+        });
+        if (!hasWidth) {
+          hasWidth = c.offsetWidth > 0;
+        }
+      }
+    });
+    if (hasWidth && !this._defaultVisibleToolSizeInfos) {
+      this._defaultVisibleToolSizeInfos = [...this._toolbarSizeInfos];
+    }
+  }
+  /**
+   * Get a list of toolInfos that should display outside of the dropdown
+   *
+   * @returns IToolInfo[] the list of toolInfos that should not display in the overflow dropdown
+   */
+  _getActionItems() {
+    return this._toolInfos.filter(toolInfo => toolInfo && !toolInfo.isOverflow);
+  }
+  /**
+   * Get a list of toolInfos that should display in the dropdown
+   *
+   * @param id string the id for the dropdown and its tooltip
+   *
+   * @returns VNode the dropdown node
+   */
+  _getDropdown(id) {
+    const dropdownItems = this._getDropdownItems();
+    return (h("calcite-dropdown", { disabled: this._layer === undefined, id: "solutions-more" }, h("calcite-action", { appearance: "solid", id: id, label: "", slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, dropdownItems.map(item => {
+      return (h("calcite-dropdown-item", { iconStart: item.icon, onClick: item.func }, item.label));
+    }))));
+  }
+  /**
+   * Get a list of toolInfos that should display in the dropdown
+   *
+   * @returns IToolInfo[] the list of toolInfos that should display in the dropdown
+   */
+  _getDropdownItems() {
+    return this._toolInfos.filter(toolInfo => toolInfo && toolInfo.isOverflow);
   }
   /**
    * Get an action and tooltip
@@ -224,7 +519,30 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    */
   _getAction(icon, label, func, disabled) {
     const _disabled = this._layer === undefined ? true : disabled;
-    return (h("div", { class: "display-flex" }, h("calcite-action", { appearance: "solid", disabled: _disabled, icon: icon, id: icon, label: label, onClick: func, text: label, textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, label))));
+    return (h("div", { class: "display-flex", id: this._getId(icon) }, h("calcite-action", { appearance: "solid", disabled: _disabled, icon: icon, id: icon, label: label, onClick: func, text: label, textEnabled: true }), this._getToolTip("", "bottom", icon, label)));
+  }
+  /**
+   * Get a tooltip
+   *
+   * @param label string accessible name for the component
+   * @param placement string where the tooltip should display
+   * @param referenceElement string the element the tooltip will be associated with
+   * @param text string the text to display in the tooltip
+   *
+   * @returns VNode The tooltip node
+   */
+  _getToolTip(label, placement, referenceElement, text) {
+    return (h("calcite-tooltip", { label: label, placement: placement, "reference-element": referenceElement }, h("span", null, text)));
+  }
+  /**
+   * Get an id with a prefix to the user supplied value
+   *
+   * @param id the unique value for the id
+   *
+   * @returns the new id with the prefix value
+   */
+  _getId(id) {
+    return `solutions-action-${id}`;
   }
   /**
    * Get an action with danger color icon and text
@@ -238,7 +556,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    */
   _getDangerAction(icon, label, func, disabled) {
     const _disabled = this._layer === undefined ? true : disabled;
-    return (h("div", { class: "display-flex" }, h("calcite-action", { appearance: "solid", disabled: _disabled, id: icon, onClick: func, text: "" }, h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label)), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, label))));
+    return (h("div", { class: "display-flex", id: this._getId(icon) }, h("calcite-action", { appearance: "solid", disabled: _disabled, id: icon, onClick: func, text: "" }, h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label)), this._getToolTip("", "bottom", icon, label)));
   }
   /**
    * Initialize the FeatureTable
@@ -309,6 +627,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
           this._table.view = this.mapView;
           this._checkEditEnabled();
           this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
+          this._initToolInfos();
         });
         await this._table.when(() => {
           this._table.clearSelectionFilter();
@@ -495,8 +814,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    *
    * @returns void
    */
-  _refresh() {
-    void this._table.refresh();
+  async _refresh() {
+    await this._table.refresh();
+    this.featureSelectionChange.emit(this._selectedIndexes);
   }
   /**
    * Zoom to all selected features
@@ -594,8 +914,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
   }
   get el() { return this; }
   static get watchers() { return {
+    "_controlsThatFit": ["_controlsThatFitWatchHandler"],
     "mapView": ["mapViewWatchHandler"],
     "_layer": ["_layerWatchHandler"],
+    "_selectedIndexes": ["_selectedIndexesWatchHandler"],
     "_sortActive": ["_sortActiveWatchHandler"]
   }; }
   static get style() { return layerTableCss; }
@@ -609,6 +931,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     "showNewestFirst": [4, "show-newest-first"],
     "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
     "_confirmDelete": [32],
+    "_controlsThatFit": [32],
     "_fetchingData": [32],
     "_isDeleting": [32],
     "_layer": [32],
@@ -617,8 +940,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     "_sortActive": [32],
     "_translations": [32]
   }, [[8, "selectionChanged", "selectionChanged"], [8, "editsComplete", "editsComplete"], [8, "noLayersFound", "noLayersFound"]], {
+    "_controlsThatFit": ["_controlsThatFitWatchHandler"],
     "mapView": ["mapViewWatchHandler"],
     "_layer": ["_layerWatchHandler"],
+    "_selectedIndexes": ["_selectedIndexesWatchHandler"],
     "_sortActive": ["_sortActiveWatchHandler"]
   }]);
 function defineCustomElement() {

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

@@ -202,8 +202,8 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
       const mapTableIds = this.showTables ? this.onlyShowUpdatableLayers ?
         this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
       this.ids = [
-        ...mapLayerIds.filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.indexOf(n) > -1 : true; }),
-        ...mapTableIds.filter(n => { var _a; return ((_a = this.enabledTableIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledTableIds.indexOf(n) > -1 : true; }),
+        ...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; }),
       ];
     }
   }

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

@@ -89,9 +89,9 @@ const BasemapGallery = class {
       }
       const source = new this.PortalBasemapsSource({
         query: ((_a = this.basemapConfig) === null || _a === void 0 ? void 0 : _a.basemapGroupId) ? `id:${this.basemapConfig.basemapGroupId}` : null,
-        filterFunction: (basemap) => {
+        filterFunction: this.basemapConfig ? (basemap) => {
           return !this.basemapConfig.basemapIdsToFilter.includes(basemap.portalItem.id);
-        }
+        } : () => true
       });
       await source.refresh();
       this.basemapWidget = new this.BasemapGallery({

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

@@ -1866,8 +1866,8 @@ const MapLayerPicker = class {
       const mapTableIds = this.showTables ? this.onlyShowUpdatableLayers ?
         this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
       this.ids = [
-        ...mapLayerIds.filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.indexOf(n) > -1 : true; }),
-        ...mapTableIds.filter(n => { var _a; return ((_a = this.enabledTableIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledTableIds.indexOf(n) > -1 : true; }),
+        ...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; }),
       ];
     }
   }