@esri/solutions-components 0.6.28 → 0.6.29

package/dist/esm/card-manager_3.entry.js

@@ -99,7 +99,7 @@ const CardManager = class {
 };
 CardManager.style = cardManagerCss;
 
-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 = class {
   constructor(hostRef) {
@@ -134,6 +134,7 @@ const LayerTable = class {
     this.showNewestFirst = undefined;
     this.zoomAndScrollToSelected = undefined;
     this._confirmDelete = false;
+    this._controlsThatFit = undefined;
     this._fetchingData = false;
     this._isDeleting = false;
     this._layer = undefined;
@@ -147,6 +148,22 @@ const LayerTable = class {
   //  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
    */
@@ -168,6 +185,12 @@ const LayerTable = class {
     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
    */
@@ -205,8 +228,8 @@ const LayerTable = class {
    * Refresh the table when edits are completed
    *
    */
-  editsComplete() {
-    this._refresh();
+  async editsComplete() {
+    await this._refresh();
   }
   /**
    * Refresh the table when edits are completed
@@ -230,6 +253,8 @@ const LayerTable = class {
   async componentWillLoad() {
     await this._getTranslations();
     await this._initModules();
+    this._initToolInfos();
+    this._resizeObserver = new ResizeObserver(() => this._onResize());
   }
   /**
    * Renders the component.
@@ -239,10 +264,22 @@ const LayerTable = class {
     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)
@@ -263,6 +300,14 @@ const LayerTable = class {
     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
    *
@@ -271,11 +316,261 @@ const LayerTable = class {
    * @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
@@ -289,7 +584,30 @@ const LayerTable = class {
    */
   _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
@@ -303,7 +621,7 @@ const LayerTable = class {
    */
   _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
@@ -374,6 +692,7 @@ const LayerTable = class {
           this._table.view = this.mapView;
           this._checkEditEnabled();
           this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
+          this._initToolInfos();
         });
         await this._table.when(() => {
           this._table.clearSelectionFilter();
@@ -560,8 +879,9 @@ const LayerTable = class {
    *
    * @returns void
    */
-  _refresh() {
-    void this._table.refresh();
+  async _refresh() {
+    await this._table.refresh();
+    this.featureSelectionChange.emit(this._selectedIndexes);
   }
   /**
    * Zoom to all selected features
@@ -659,8 +979,10 @@ const LayerTable = class {
   }
   get el() { return getElement(this); }
   static get watchers() { return {
+    "_controlsThatFit": ["_controlsThatFitWatchHandler"],
     "mapView": ["mapViewWatchHandler"],
     "_layer": ["_layerWatchHandler"],
+    "_selectedIndexes": ["_selectedIndexesWatchHandler"],
     "_sortActive": ["_sortActiveWatchHandler"]
   }; }
 };

package/dist/esm/crowdsource-manager.entry.js

@@ -8,7 +8,7 @@ import { g as getLocaleComponentStrings } from './locale-6be4e8f0.js';
 import { E as ELayoutMode } from './interfaces-7470d906.js';
 import './_commonjsHelpers-d5f9d613.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 = class {
   constructor(hostRef) {
@@ -236,11 +236,11 @@ const CrowdsourceManager = class {
    * @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
@@ -253,7 +253,7 @@ const CrowdsourceManager = class {
     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