@esri/solutions-components 0.6.28 → 0.6.31

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

@@ -60,16 +60,20 @@
 
 .bottom-left {
   position: absolute;
-  left: 0;
+  left: 5;
   bottom: 0;
 }
 
 html[dir="rtl"] .bottom-left {
   position: absolute;
-  right: 0;
+  right: 5;
   bottom: 0;
 }
 
+.height-19 {
+  height: 19px;
+}
+
 .background {
   background-color: var(--calcite-ui-background);
 }

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

@@ -54,6 +54,7 @@ export class LayerTable {
     this.showNewestFirst = undefined;
     this.zoomAndScrollToSelected = undefined;
     this._confirmDelete = false;
+    this._controlsThatFit = undefined;
     this._fetchingData = false;
     this._isDeleting = false;
     this._layer = undefined;
@@ -67,6 +68,22 @@ export class LayerTable {
   //  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
    */
@@ -88,6 +105,12 @@ export class LayerTable {
     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
    */
@@ -125,8 +148,8 @@ export class LayerTable {
    * Refresh the table when edits are completed
    *
    */
-  editsComplete() {
-    this._refresh();
+  async editsComplete() {
+    await this._refresh();
   }
   /**
    * Refresh the table when edits are completed
@@ -150,6 +173,8 @@ export class LayerTable {
   async componentWillLoad() {
     await this._getTranslations();
     await this._initModules();
+    this._initToolInfos();
+    this._resizeObserver = new ResizeObserver(() => this._onResize());
   }
   /**
    * Renders the component.
@@ -159,10 +184,22 @@ export class LayerTable {
     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)
@@ -183,6 +220,14 @@ export class LayerTable {
     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
    *
@@ -191,11 +236,261 @@ export class LayerTable {
    * @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
@@ -209,7 +504,30 @@ export class LayerTable {
    */
   _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
@@ -223,7 +541,7 @@ export class LayerTable {
    */
   _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
@@ -294,6 +612,7 @@ export class LayerTable {
           this._table.view = this.mapView;
           this._checkEditEnabled();
           this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
+          this._initToolInfos();
         });
         await this._table.when(() => {
           this._table.clearSelectionFilter();
@@ -480,8 +799,9 @@ export class LayerTable {
    *
    * @returns void
    */
-  _refresh() {
-    void this._table.refresh();
+  async _refresh() {
+    await this._table.refresh();
+    this.featureSelectionChange.emit(this._selectedIndexes);
   }
   /**
    * Zoom to all selected features
@@ -738,6 +1058,7 @@ export class LayerTable {
   static get states() {
     return {
       "_confirmDelete": {},
+      "_controlsThatFit": {},
       "_fetchingData": {},
       "_isDeleting": {},
       "_layer": {},
@@ -783,11 +1104,17 @@ export class LayerTable {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
+        "propName": "_controlsThatFit",
+        "methodName": "_controlsThatFitWatchHandler"
+      }, {
         "propName": "mapView",
         "methodName": "mapViewWatchHandler"
       }, {
         "propName": "_layer",
         "methodName": "_layerWatchHandler"
+      }, {
+        "propName": "_selectedIndexes",
+        "methodName": "_selectedIndexesWatchHandler"
       }, {
         "propName": "_sortActive",
         "methodName": "_sortActiveWatchHandler"

package/dist/collection/components/map-layer-picker/map-layer-picker.js

@@ -196,8 +196,8 @@ export class MapLayerPicker {
       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/collection/utils/interfaces.ts

@@ -478,3 +478,17 @@ export interface IBasemapConfig {
   basemapIdsToFilter: string[];
   basemapGroupId: string;
 }
+
+export interface IToolInfo {
+  icon: string;
+  func: any;
+  label: string;
+  disabled: boolean;
+  isDanger?: boolean;
+  isOverflow: boolean;
+}
+
+export interface IToolSizeInfo {
+  id: string;
+  width: number;
+}

package/dist/components/basemap-gallery2.js

@@ -89,9 +89,9 @@ const BasemapGallery = /*@__PURE__*/ proxyCustomElement(class BasemapGallery ext
       }
       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/components/crowdsource-manager.js

@@ -50,7 +50,7 @@ import { d as defineCustomElement$4 } from './map-picker2.js';
 import { d as defineCustomElement$3 } from './map-search2.js';
 import { d as defineCustomElement$2 } from './map-tools2.js';
 
-const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-ui-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-ui-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-3)}.border-sides{border-left:1px solid var(--calcite-ui-border-3);border-right:1px solid var(--calcite-ui-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-50{height:calc(100% - 50px)}.display-none{display:none}.height-53{height:53px}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-49-px{height:49px}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}";
+const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-ui-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-ui-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-3)}.border-sides{border-left:1px solid var(--calcite-ui-border-3);border-right:1px solid var(--calcite-ui-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-50{height:calc(100% - 50px)}.display-none{display:none}.height-53{height:53px}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}";
 
 const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceManager extends HTMLElement {
   constructor() {
@@ -279,11 +279,11 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
    * @protected
    */
   _getMapNode(layoutMode, hideMap) {
-    var _a, _b;
+    var _a, _b, _c;
     const mapDisplayClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "display-flex height-full width-1-2" :
       layoutMode === ELayoutMode.GRID && !hideMap ? "" : "display-none";
     const mapContainerClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "width-full" : this._expandPopup ? "height-50-px" : "adjusted-height-50";
-    return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter && ((_b = (_a = this._mapView) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.floorInfo), enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, mapInfos: this.mapInfos.filter(mapInfo => mapInfo.visible !== false) })));
+    return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter && ((_b = (_a = this._mapView) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.floorInfo), enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, mapInfos: (_c = this.mapInfos) === null || _c === void 0 ? void 0 : _c.filter(mapInfo => mapInfo.visible !== false) })));
   }
   /**
    * Get the expand node for the popup information
@@ -296,7 +296,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     const id = "expand-popup";
     const tooltip = this._expandPopup ? this._translations.collapsePopup : this._translations.expandPopup;
     const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-    return (h("div", { class: "calcite-mode-dark height-full" }, h("calcite-panel", null, h("div", { class: "display-flex align-items-center", slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information)), h("calcite-action", { class: "height-49-px", icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end" }), h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)), this._getCardNode())));
+    return (h("div", { class: "calcite-mode-dark height-full" }, h("calcite-panel", null, h("div", { class: "display-flex align-items-center", slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information)), h("calcite-action", { icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end" }), h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)), this._getCardNode())));
   }
   /**
    * Toggle the popup information

package/dist/components/edit-card2.js

@@ -10,7 +10,7 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './loader.js';
 import { d as defineCustomElement$1 } from './notice.js';
 
-const editCardCss = ":host{display:block}.padding-bottom-1{padding-bottom:1rem}.font-bold{font-weight:var(--calcite-font-weight-bold)}.font-500{font-weight:var(--calcite-font-weight-medium)}.font-italic{font-style:italic}#feature-form{--calcite-ui-background:none;padding-top:0px}.padding-sides-bottom-1{padding:0 1rem 1rem 1rem}.position-relative{position:relative}.esri-editor__prompt--danger{position:relative !important;width:100% !important;background-color:var(--calcite-ui-foreground-1) !important}.esri-feature__content-node{background-color:var(--calcite-ui-foreground-1) !important}.esri-editor__panel-toolbar{display:none !important}";
+const editCardCss = ":host{display:block}.padding-bottom-1{padding-bottom:1rem}.font-bold{font-weight:var(--calcite-font-weight-bold)}.font-500{font-weight:var(--calcite-font-weight-medium)}.font-italic{font-style:italic}#feature-form{--calcite-ui-background:none;padding-top:0px}.padding-sides-bottom-1{padding:0 1rem 1rem 1rem}.position-relative{position:relative}.esri-editor__prompt--danger{position:relative !important;width:100% !important;background-color:var(--calcite-ui-foreground-1) !important}.esri-feature__content-node{background-color:var(--calcite-ui-foreground-1) !important}.esri-editor__panel-toolbar{display:none !important}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}";
 
 const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLElement {
   constructor() {
@@ -98,9 +98,9 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
     // when you use MULTI edit mode...is fine in SINGLE
     const editDisabled = ((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.graphics[0] ?
       !this.graphics[0].layer.editingEnabled : true;
-    const tableNodeClass = this._editorLoading ? "display-none" : "";
+    const tableNodeClass = this._editorLoading ? "display-none" : "position-absolute";
     const loadingClass = this._editorLoading ? "" : "display-none";
-    return (h(Host, null, h("div", { class: "position-relative" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { slot: "content" }, h("div", { class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { class: loadingClass, scale: "s" })))));
+    return (h(Host, null, h("div", { class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { class: "position-absolute", slot: "content" }, h("div", { class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { class: loadingClass, scale: "s" })))));
   }
   //--------------------------------------------------------------------------
   //