@esri/solutions-components 0.6.17 → 0.6.19

package/dist/collection/components/floor-filter/floor-filter.js

@@ -0,0 +1,181 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Host, h } from "@stencil/core";
+import { loadModules } from "../../utils/loadModules";
+export class FloorFilter {
+  constructor() {
+    this.enabled = undefined;
+    this.floorFilterWidget = undefined;
+    this.mapView = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  async mapViewWatchHandler() {
+    await this.mapView.when(() => {
+      this._initFloorFilter(this.mapView);
+    });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   */
+  async componentWillLoad() {
+    return this._initModules();
+  }
+  render() {
+    return (h(Host, null, h("div", { ref: (el) => { this._floorFilterElement = el; } })));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   *
+   * @protected
+   */
+  async _initModules() {
+    const [FloorFilter] = await loadModules([
+      "esri/widgets/FloorFilter"
+    ]);
+    this.FloorFilter = FloorFilter;
+  }
+  /**
+   * Initialize the floor filter or reset the current view if it already exists
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  _initFloorFilter(view) {
+    if (view && this.enabled && this.FloorFilter) {
+      if (!this.floorFilterWidget) {
+        this.floorFilterWidget = new this.FloorFilter({
+          container: this._floorFilterElement,
+          view
+        });
+      }
+      else {
+        this.floorFilterWidget.view = view;
+      }
+    }
+  }
+  static get is() { return "floor-filter"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["floor-filter.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["floor-filter.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "enabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the Floor Filter widget will be available"
+        },
+        "attribute": "enabled",
+        "reflect": false
+      },
+      "floorFilterWidget": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "__esri.FloorFilter",
+          "resolved": "FloorFilter",
+          "references": {
+            "___esri": {
+              "location": "global",
+              "id": "global::___esri"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "esri/widgets/FloorFilter: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-FloorFilter.html\r\n\r\nFloorFilter instance"
+        }
+      },
+      "mapView": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "__esri.MapView",
+          "resolved": "MapView",
+          "references": {
+            "___esri": {
+              "location": "global",
+              "id": "global::___esri"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "mapView",
+        "methodName": "mapViewWatchHandler"
+      }];
+  }
+}

package/dist/collection/components/info-card/info-card.js

@@ -102,12 +102,13 @@ export class InfoCard {
    * Renders the component.
    */
   render() {
-    var _a;
+    var _a, _b, _c;
     const loadingClass = this.isLoading ? "" : "display-none";
     const featureNodeClass = this.isLoading || this._editRecordOpen ? "display-none" : "position-absolute";
     const editClass = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none";
     const editButtonClass = !this.isLoading && this._editRecordOpen ? "display-none" : "";
-    return (h(Host, null, h("calcite-shell", null, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", "icon-start": "pencil", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit))), h("div", { class: "display-flex padding-1-2 button-container top-border" }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, this._getCount()), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_a = this._features) === null || _a === void 0 ? void 0 : _a.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
+    const nextBackDisabled = ((_b = (_a = this._features) === null || _a === void 0 ? void 0 : _a.features) === null || _b === void 0 ? void 0 : _b.length) < 2;
+    return (h(Host, null, h("calcite-shell", null, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", "icon-start": "pencil", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit))), h("div", { class: "display-flex padding-1-2 button-container top-border" }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, this._getCount()), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
   }
   //--------------------------------------------------------------------------
   //

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

@@ -77,3 +77,11 @@ html[dir="rtl"] .bottom-left {
 .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;
+}

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

@@ -204,10 +204,10 @@ export class LayerTable {
    * @returns The dom node that contains the controls
    */
   _getTableControlRow(slot) {
+    var _a;
     const featuresSelected = this._selectedIndexes.length > 0;
     const id = "more-table-options";
-    return (h("div", { class: "display-flex table-border 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", type: "dropdown" })), this._getAction("zoom-to-object", this._translations.zoom, () => this._zoom(), !featuresSelected), this._getAction("filter", this._translations.filters, () => this._filter(), false), this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !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-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.moreOptions)), 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: "selected-items-filter", onClick: () => this._toggleShowSelected() }, this._showOnlySelected ? this._translations.showAll :
-      this._translations.showSelected), h("calcite-dropdown-item", { iconStart: "compare", onClick: () => this._switchSelected() }, this._translations.switchSelected), h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._refresh() }, this._translations.refresh), h("calcite-dropdown-item", { iconStart: "export", onClick: () => void this._exportToCSV() }, this._translations.exportCSV)))));
+    return (h("div", { class: "display-flex table-border 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", 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), h("calcite-dropdown-item", { iconStart: "export", onClick: () => void this._exportToCSV() }, this._translations.exportCSV))), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.moreOptions))));
   }
   /**
    * Get an action and tooltip
@@ -393,6 +393,7 @@ export class LayerTable {
     const hitTestResult = await this.mapView.hitTest(evt.screenPoint, opts);
     if (hitTestResult.results.length > 0) {
       hitTestResult.results.forEach((result) => {
+        this._clearSelection();
         const id = result.graphic.getObjectId();
         const index = this._table.highlightIds.indexOf(id);
         if (index > -1) {
@@ -457,7 +458,7 @@ export class LayerTable {
    * @returns void
    */
   _filter() {
-    alert("do whatever this button is supposed to do");
+    this.openFilterOptions.emit();
   }
   /**
    * Select all rows that are not currently selectd
@@ -472,7 +473,7 @@ export class LayerTable {
         prev.push(_cur);
       }
       return prev;
-    }, []);
+    }, []).sort((a, b) => a - b);
     this._table.highlightIds.addMany(ids);
     this._selectedIndexes = ids;
   }
@@ -778,6 +779,21 @@ export class LayerTable {
           "resolved": "number[]",
           "references": {}
         }
+      }, {
+        "method": "openFilterOptions",
+        "name": "openFilterOptions",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted on demand when the filters button is clicked"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }];
   }
   static get methods() {

package/dist/collection/components/map-card/map-card.js

@@ -33,6 +33,7 @@ export class MapCard {
      */
     this._loadedId = "";
     this.enableLegend = undefined;
+    this.enableFloorFilter = undefined;
     this.enableFullscreen = undefined;
     this.enableSearch = undefined;
     this.enableBasemap = undefined;
@@ -63,7 +64,7 @@ export class MapCard {
    * Renders the component.
    */
   render() {
-    return (h(Host, null, h("map-picker", { mapInfos: this.mapInfos }), h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), h("map-tools", { basemapConfig: this.basemapConfig, class: "box-shadow", enableBasemap: this.enableBasemap, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
+    return (h(Host, null, h("map-picker", { mapInfos: this.mapInfos }), h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), h("map-tools", { basemapConfig: this.basemapConfig, class: "box-shadow", enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
   }
   //--------------------------------------------------------------------------
   //
@@ -157,6 +158,23 @@ export class MapCard {
         "attribute": "enable-legend",
         "reflect": false
       },
+      "enableFloorFilter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the floor filter widget will be available"
+        },
+        "attribute": "enable-floor-filter",
+        "reflect": false
+      },
       "enableFullscreen": {
         "type": "boolean",
         "mutable": false,

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

@@ -78,8 +78,9 @@ export class MapLayerPicker {
    * Renders the component.
    */
   render() {
-    return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, !this._hasValidLayers ? this._getInvalidPlaceholder() : this.type === "combobox" ? this._getCombobox() :
-      this.type === "select" ? this._getSelect() : this._getDropdown()))));
+    const id = "map-layer-picker";
+    return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, !this._hasValidLayers ? this._getInvalidPlaceholder() : this.type === "combobox" ? this._getCombobox(id) :
+      this.type === "select" ? this._getSelect(id) : this._getDropdown(id), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.switchLayer))))));
   }
   /**
    * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -112,32 +113,35 @@ export class MapLayerPicker {
   }
   /**
    * Create a list of layers from the map
-   *
    * Used for selecting a single layer.
    *
+   * @param id the id for the select component used to support the tooltip
+   *
    * @returns Calcite Select component with the ids of the layers from the map
    */
-  _getSelect() {
-    return (h("calcite-select", { label: "", onCalciteSelectChange: () => this._layerSelectionChange(), ref: (el) => { this._layerElement = el; }, scale: this.scale }, this._getMapLayerOptions()));
+  _getSelect(id) {
+    return (h("calcite-select", { id: id, label: "", onCalciteSelectChange: () => this._layerSelectionChange(), ref: (el) => { this._layerElement = el; }, scale: this.scale }, this._getMapLayerOptions()));
   }
   /**
    * Create a list of layer ids from the map
-   *
    * Used for selecting multiple layers
    *
+   * @param id the id for the combobox component used to support the tooltip
+   *
    * @returns Calcite ComboBox component with the ids of the layers from the map
    */
-  _getCombobox() {
-    return (h("calcite-combobox", { clearDisabled: true, label: "", onCalciteComboboxChange: () => this._layerSelectionChange(), "placeholder-icon": this.placeholderIcon, ref: (el) => { this._layerElement = el; }, scale: this.scale, "selection-mode": "single" }, this._getMapLayerOptions()));
+  _getCombobox(id) {
+    return (h("calcite-combobox", { clearDisabled: true, id: id, label: "", onCalciteComboboxChange: () => this._layerSelectionChange(), "placeholder-icon": this.placeholderIcon, ref: (el) => { this._layerElement = el; }, scale: this.scale, "selection-mode": "single" }, this._getMapLayerOptions()));
   }
   /**
    * Hydrate a dropdown component with items to display the layer names
    *
+   * @param id the id for the dropdown component used to support the tooltip
+   *
    * @returns Array of Dropdown items with layer names
    */
-  _getDropdown() {
-    const id = "map-layer-picker";
-    return (h("calcite-dropdown", { class: "layer-picker-dropdown" }, h("calcite-action", { slot: "trigger", text: "" }, h("calcite-button", { alignment: "icon-end-space-between", appearance: this.appearance, class: "max-width-350", iconEnd: "chevron-down", iconStart: "layers", id: id, kind: "neutral", width: "full" }, h("div", null, this.selectedName)), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.switchLayer))), h("calcite-dropdown-group", { "selection-mode": "single" }, this._getMapLayerOptions())));
+  _getDropdown(id) {
+    return (h("calcite-dropdown", { class: "layer-picker-dropdown" }, h("calcite-action", { id: id, slot: "trigger", text: "" }, h("calcite-button", { alignment: "icon-end-space-between", appearance: this.appearance, class: "max-width-350", iconEnd: "chevron-down", iconStart: "layers", kind: "neutral", width: "full" }, h("div", null, this.selectedName))), h("calcite-dropdown-group", { "selection-mode": "single" }, this._getMapLayerOptions())));
   }
   /**
    * Get the appropriate type of dom nodes for each valid layer or table

package/dist/collection/components/map-picker/map-picker.css

@@ -16,6 +16,7 @@
 
 :host {
   display: block;
+  --solutions-theme-foreground-color: var(--calcite-ui-foreground-1);
 }
 
 .width-full {
@@ -59,10 +60,6 @@
   display: none;
 }
 
-.action-bar-color {
-  background-color: var(--calcite-ui-border-3) !important;
-}
-
 .align-center {
   align-items: center;
 }

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

@@ -116,7 +116,7 @@ export class MapPicker {
    * @protected
    */
   _getToolbar() {
-    return (h("div", { class: "display-flex" }, h("calcite-action-bar", { class: "action-bar-color border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: "header" }, this._getMapPicker())));
+    return (h("div", { class: "display-flex" }, h("calcite-action-bar", { class: "border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: "header" }, this._getMapPicker())));
   }
   /**
    * Get a pick list for all maps in mapInfos

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

@@ -23,6 +23,7 @@ import { getLocaleComponentStrings } from "../../utils/locale";
 export class MapTools {
   constructor() {
     this.enableLegend = undefined;
+    this.enableFloorFilter = undefined;
     this.enableFullscreen = undefined;
     this.enableSearch = undefined;
     this.enableBasemap = undefined;
@@ -33,6 +34,7 @@ export class MapTools {
     this._translations = undefined;
     this._showTools = true;
     this._showBasemapWidget = false;
+    this._showFloorFilter = false;
     this._showFullscreen = false;
     this._showLegendWidget = false;
     this._showSearchWidget = false;
@@ -59,6 +61,21 @@ export class MapTools {
   /**
    * When the _showBasemapWidget property is true display the basemap gallery
    */
+  async _showFloorFilterWatchHandler(v) {
+    const widget = this._floorFilterElement.floorFilterWidget;
+    if (v) {
+      this.mapView.ui.add(widget, {
+        position: "top-right",
+        index: 1
+      });
+    }
+    else {
+      this.mapView.ui.remove(widget);
+    }
+  }
+  /**
+   * When the _showFullscreen property is true the app will consume the full screen
+   */
   async _showFullscreenWatchHandler(v) {
     const fs = this._fullscreenElement.fullscreenWidget;
     if (v) {
@@ -126,6 +143,7 @@ export class MapTools {
     const searchClass = this._showSearchWidget ? "" : "display-none";
     const basemapClass = this._showBasemapWidget ? "" : "display-none";
     const legendClass = this._showLegendWidget ? "" : "display-none";
+    const floorFilterClass = this._showFloorFilter ? "" : "display-none";
     const fullscreenClass = this._showFullscreen ? "" : "display-none";
     const fullscreenIcon = this._showFullscreen ? "full-screen-exit" : "full-screen";
     const fullscreenTip = this._showFullscreen ? this._translations.exitFullscreen : this._translations.enterFullscreen;
@@ -139,7 +157,9 @@ export class MapTools {
       this._getActionGroup(fullscreenIcon, false, fullscreenTip, () => this._expand()) :
       undefined, this.enableBasemap ?
       this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker()) :
-      undefined)), h("basemap-gallery", { basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, ref: (el) => { this._fullscreenElement = el; } })));
+      undefined, this.enableFloorFilter ?
+      this._getActionGroup("urban-model", false, this._translations.floorFilter, () => this._toggleFloorFilter()) :
+      undefined)), h("basemap-gallery", { basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, ref: (el) => { this._fullscreenElement = el; } }), h("floor-filter", { class: floorFilterClass, enabled: this.enableFloorFilter, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
   }
   //--------------------------------------------------------------------------
   //
@@ -182,6 +202,17 @@ export class MapTools {
     this._showBasemapWidget = !this._showBasemapWidget;
     this._showTools = false;
   }
+  /**
+   * Show/Hide the floor filter
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  _toggleFloorFilter() {
+    this._showFloorFilter = !this._showFloorFilter;
+    this._showTools = false;
+  }
   /**
    * Enter/Exit fullscreen mode
    *
@@ -204,6 +235,7 @@ export class MapTools {
       this._showBasemapWidget = false;
       this._showSearchWidget = false;
       this._showLegendWidget = false;
+      this._showFloorFilter = false;
     }
     this._showTools = !this._showTools;
   }
@@ -248,6 +280,23 @@ export class MapTools {
         "attribute": "enable-legend",
         "reflect": false
       },
+      "enableFloorFilter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the floor filter widget will be available"
+        },
+        "attribute": "enable-floor-filter",
+        "reflect": false
+      },
       "enableFullscreen": {
         "type": "boolean",
         "mutable": false,
@@ -386,6 +435,7 @@ export class MapTools {
       "_translations": {},
       "_showTools": {},
       "_showBasemapWidget": {},
+      "_showFloorFilter": {},
       "_showFullscreen": {},
       "_showLegendWidget": {},
       "_showSearchWidget": {}
@@ -396,6 +446,9 @@ export class MapTools {
     return [{
         "propName": "_showBasemapWidget",
         "methodName": "_showBasemapWidgetWatchHandler"
+      }, {
+        "propName": "_showFloorFilter",
+        "methodName": "_showFloorFilterWatchHandler"
       }, {
         "propName": "_showFullscreen",
         "methodName": "_showFullscreenWatchHandler"

package/dist/collection/components/solution-configuration/solution-configuration.js

@@ -579,7 +579,13 @@ export class SolutionConfiguration {
         "complexType": {
           "original": "UserSession",
           "resolved": "UserSession",
-          "references": {}
+          "references": {
+            "UserSession": {
+              "location": "import",
+              "path": "@esri/solution-common",
+              "id": ""
+            }
+          }
         },
         "required": false,
         "optional": false,

package/dist/collection/components/solution-spatial-ref/solution-spatial-ref.css

@@ -17,7 +17,7 @@
   margin-inline-end: 0.5rem;
 }
 
-.spatial-ref-switch-title {
+.spatial-ref-component {
   margin-top: 0.625rem;
   margin-inline-start: 2.5rem;
 }
@@ -52,12 +52,6 @@
   opacity: 0.4;
 }
 
-.spatial-ref-container {
-  max-height: 200px;
-  margin-bottom: 1rem;
-  overflow-y: auto;
-}
-
 .spatial-ref-desc {
   padding-bottom: 0.5rem;
   padding-inline-start: 0.25rem;