@esri/solutions-components 0.6.16 → 0.6.18

package/dist/collection/collection-manifest.json

@@ -7,6 +7,7 @@
     "components/crowdsource-reporter/crowdsource-reporter.js",
     "components/deduct-calculator/deduct-calculator.js",
     "components/edit-card/edit-card.js",
+    "components/floor-filter/floor-filter.js",
     "components/info-card/info-card.js",
     "components/json-editor/json-editor.js",
     "components/layer-table/layer-table.js",
@@ -36,6 +37,7 @@
     "components/solution-spatial-ref/solution-spatial-ref.js",
     "components/solution-template-data/solution-template-data.js",
     "components/solution-variables/solution-variables.js",
+    "components/spatial-ref/spatial-ref.js",
     "components/store-manager/store-manager.js"
   ],
   "compiler": {

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

@@ -84,7 +84,7 @@ export class CardManager {
     var _a, _b;
     const featuresClass = ((_a = this._graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "" : "display-none";
     const messageClass = ((_b = this._graphics) === null || _b === void 0 ? void 0 : _b.length) > 0 ? "display-none" : "";
-    return (h(Host, null, h("div", { class: "overflow-auto height-full" }, h("calcite-shell", { class: "position-relative " + featuresClass }, h("div", null, h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), h("div", { class: "padding-1 " + messageClass }, h("calcite-notice", { icon: "table", open: true }, h("div", { slot: "message" }, this._translations.selectFeaturesToStart))))));
+    return (h(Host, null, h("div", { class: "overflow-auto height-full" }, h("calcite-shell", { class: "position-relative " + featuresClass }, h("div", null, h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), h("calcite-shell", { class: "position-relative " + messageClass }, h("div", { class: "padding-1" }, h("calcite-notice", { icon: "table", open: true }, h("div", { slot: "message" }, this._translations.selectFeaturesToStart)))))));
   }
   //--------------------------------------------------------------------------
   //

package/dist/collection/components/crowdsource-manager/crowdsource-manager.css

@@ -130,10 +130,25 @@
   height: 50px;
 }
 
-.padding-inline-end-75 {
-  padding-inline-end: 0.75rem;
+.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;
+}

package/dist/collection/components/crowdsource-manager/crowdsource-manager.js

@@ -30,6 +30,7 @@ export class CrowdsourceManager {
     this._shouldSetMapView = false;
     this.classicGrid = false;
     this.enableAutoRefresh = true;
+    this.enableFloorFilter = true;
     this.enableFullscreen = true;
     this.enableInlineEdit = false;
     this.enableLegend = true;
@@ -43,6 +44,7 @@ export class CrowdsourceManager {
     this.mapInfos = [];
     this.onlyShowUpdatableLayers = true;
     this.searchConfiguration = undefined;
+    this.theme = "light";
     this.zoomAndScrollToSelected = false;
     this._expandPopup = false;
     this._translations = undefined;
@@ -231,7 +233,7 @@ export class CrowdsourceManager {
    */
   _getMapAndCard(layoutMode, panelOpen, hideMap) {
     const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen);
-    return this.classicGrid ? (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getCardNode(layoutMode, hideMap), this._getMapNode(layoutMode, hideMap))) : (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, hideMap), this._getPopupExpandNode(), this._getCardNode(layoutMode, hideMap)));
+    return this.classicGrid ? (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getCardNode(layoutMode, hideMap), this._getMapNode(layoutMode, hideMap))) : (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, hideMap), this._getPopupExpandNode(layoutMode, hideMap)));
   }
   /**
    * Get the map node based for the current layout options
@@ -243,10 +245,11 @@ export class CrowdsourceManager {
    * @protected
    */
   _getMapNode(layoutMode, hideMap) {
+    var _a, _b;
     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, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, mapInfos: this.mapInfos })));
+    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) })));
   }
   /**
    * Get the expand node for the popup information
@@ -254,11 +257,12 @@ export class CrowdsourceManager {
    * @returns the expand node
    * @protected
    */
-  _getPopupExpandNode() {
+  _getPopupExpandNode(layoutMode, hideMap) {
     const icon = this._expandPopup ? "chevrons-down" : "chevrons-up";
     const id = "expand-popup";
     const tooltip = this._expandPopup ? this._translations.collapsePopup : this._translations.expandPopup;
-    return (h("div", { class: "height-49-px calcite-mode-dark" }, h("calcite-panel", null, h("div", { class: "display-flex align-items-center", slot: "header-content" }, h("calcite-icon", { class: "padding-inline-end-75", icon: "information", scale: "s" }), h("div", null, this._translations.information)), h("calcite-action", { class: "height-49-px", icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end" }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)))));
+    const themeClass = this.theme === "light" ? "calcite-mode-light" : "calcite-mode-dark";
+    return (h("div", { class: "calcite-mode-dark" }, 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(layoutMode, hideMap))));
   }
   /**
    * Toggle the popup information
@@ -279,10 +283,11 @@ export class CrowdsourceManager {
    */
   _getCardNode(layoutMode, hideMap) {
     const cardManagerHeight = this.classicGrid && layoutMode === ELayoutMode.GRID ? "" :
-      layoutMode === ELayoutMode.GRID && !this._expandPopup && !hideMap ? "adjusted-height-50" : "adjusted-height-100";
+      layoutMode === ELayoutMode.GRID && !this._expandPopup && !hideMap ? "height-50" : "";
     const cardManagerContainer = this.classicGrid && layoutMode === ELayoutMode.GRID ?
       "width-full adjusted-height-100" : this._expandPopup ? "width-50 adjusted-height-100-50" : "width-50 height-full";
-    return (h("div", { class: `${cardManagerContainer}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
+    const themeClass = this.theme === "light" ? "calcite-mode-light" : "calcite-mode-dark";
+    return (h("div", { class: `${cardManagerContainer} ${themeClass}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
   }
   /**
    * Get the table node based for the current layout
@@ -399,6 +404,24 @@ export class CrowdsourceManager {
         "reflect": false,
         "defaultValue": "true"
       },
+      "enableFloorFilter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the fullscreen widget will be available"
+        },
+        "attribute": "enable-floor-filter",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "enableFullscreen": {
         "type": "boolean",
         "mutable": false,
@@ -643,6 +666,24 @@ export class CrowdsourceManager {
           "text": "ISearchConfiguration: Configuration details for the Search widget"
         }
       },
+      "theme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"light\" | \"dark\"",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "\"light\" | \"dark\": Calcite theme to be used"
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"light\""
+      },
       "zoomAndScrollToSelected": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/edit-card/edit-card.css

@@ -60,11 +60,3 @@
 .esri-editor__panel-toolbar {
   display: none !important;
 }
-
-.esri-feature-relationship__list {
-  border-top: 1px solid var(--calcite-ui-border-3);
-}
-
-.esri-feature-form__related-records_list {
-  border-top: 1px solid var(--calcite-ui-border-3);
-}

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

@@ -0,0 +1,19 @@
+/** @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.
+ */
+
+:host {
+  display: block;
+}

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

@@ -0,0 +1,163 @@
+/*!
+ * 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.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.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 {
+      "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\n\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,9 +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 :
+    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)), 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)))));
   }
   /**
@@ -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
@@ -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-picker/map-picker.css

@@ -59,10 +59,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, 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"