@esri/solutions-components 0.7.6 → 0.7.8

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

@@ -73,6 +73,7 @@ export class LayerTable {
         this._confirmDelete = false;
         this._controlsThatFit = undefined;
         this._fetchingData = false;
+        this._filterOpen = false;
         this._isDeleting = false;
         this._layer = undefined;
         this._selectedIndexes = [];
@@ -149,6 +150,7 @@ export class LayerTable {
         this._fetchingData = true;
         await this._resetTable();
         this._updateShareUrl();
+        this._initLayerExpressions();
         this._fetchingData = false;
     }
     /**
@@ -233,7 +235,7 @@ export class LayerTable {
         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 height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
-            .replace("{{selected}}", selected)))), this._deleteMessage()));
+            .replace("{{selected}}", selected)))), this._deleteMessage(), this._filterModal()));
     }
     /**
      * Called once after the component is loaded
@@ -295,7 +297,7 @@ export class LayerTable {
      * @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", defaultLayerId: this.defaultLayerId, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showTables: true, type: "dropdown" })), this._getActions()));
+        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", defaultLayerId: this.defaultLayerId, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getActions()));
     }
     /**
      * Get the actions that are used for various interactions with the table
@@ -362,9 +364,9 @@ export class LayerTable {
      * @returns void
      */
     _initToolInfos() {
-        var _a;
         const featuresSelected = this._featuresSelected();
         const featuresEmpty = this._featuresEmpty();
+        const hasFilterExpressions = this._hasFilterExpressions();
         this._toolInfos = [this.enableZoom ? {
                 icon: "zoom-to-object",
                 label: this._translations.zoom,
@@ -372,10 +374,10 @@ export class LayerTable {
                 disabled: !featuresSelected,
                 isOverflow: false
             } : undefined,
-            ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? {
+            hasFilterExpressions ? {
                 icon: "filter",
                 label: this._translations.filters,
-                func: () => this._filter(),
+                func: () => this._toggleFilter(),
                 disabled: false,
                 isOverflow: false
             } : undefined,
@@ -449,6 +451,19 @@ export class LayerTable {
     _featuresEmpty() {
         return this._allIds.length === 0;
     }
+    /**
+     * Return true when we have at least 1 layer expression for the current layer
+     *
+     * @returns boolean
+     */
+    _hasFilterExpressions() {
+        var _a, _b;
+        let layerExpressions;
+        if ((_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions) {
+            layerExpressions = this.mapInfo.filterConfig.layerExpressions.filter((exp) => exp.id === this._layer.id);
+        }
+        return (layerExpressions === null || layerExpressions === void 0 ? void 0 : layerExpressions.length) > 0;
+    }
     /**
      * Add/Remove tools from the action bar and dropdown based on available size
      *
@@ -615,7 +630,7 @@ export class LayerTable {
      * @returns VNode The node representing the DOM element that will contain the action
      */
     _getShare(icon) {
-        return (h("div", { class: "share-action", id: this._getId(icon) }, h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "instant-app-share", embed: this.shareIncludeEmbed, popoverButtonIconScale: "s", ref: el => this._shareNode = el, scale: "m", shareButtonColor: "neutral", socialMedia: this.shareIncludeSocial, view: this.mapView }), this._getToolTip("bottom", icon, this._translations.share)));
+        return (h("div", { class: "share-action", id: this._getId(icon) }, h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "instant-app-share", embed: this.shareIncludeEmbed, popoverButtonIconScale: "s", ref: el => this._shareNode = el, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", socialMedia: this.shareIncludeSocial, view: this.mapView }), this._getToolTip("bottom", icon, this._translations.share)));
     }
     /**
      * Called each time the values that are used for custom url params change
@@ -863,6 +878,23 @@ export class LayerTable {
             }
         }
     }
+    /**
+     * Show filter component in modal
+     *
+     * @returns node to interact with any configured filters for the current layer
+     */
+    _filterModal() {
+        var _a, _b, _c;
+        return (h("calcite-modal", { "aria-labelledby": "modal-title", kind: "brand", onCalciteModalClose: () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: () => this._closeFilter(), layerExpressions: this._layerExpressions, ref: (el) => this._filterList = el, view: this.mapView }))));
+    }
+    /**
+     * Close the filter modal
+     *
+     * @returns void
+     */
+    _closeFilter() {
+        this._filterOpen = false;
+    }
     /**
      * Show delete confirmation message
      *
@@ -963,12 +995,23 @@ export class LayerTable {
         (_a = this._table) === null || _a === void 0 ? void 0 : _a.highlightIds.removeAll();
     }
     /**
-     * Show the filter options
+     * When true the filter modal will be displayed
      *
      * @returns void
      */
-    _filter() {
-        this.openFilterOptions.emit();
+    _toggleFilter() {
+        this._filterOpen = !this._filterOpen;
+    }
+    /**
+     * Store any filters for the current layer.
+     * Should only occur on layer change
+     *
+     * @returns void
+     */
+    _initLayerExpressions() {
+        var _a;
+        const layerExpressions = (_a = this.mapInfo.filterConfig) === null || _a === void 0 ? void 0 : _a.layerExpressions;
+        this._layerExpressions = layerExpressions.filter((exp) => exp.id === this._layer.id);
     }
     /**
      * Select all rows that are not currently selectd
@@ -1391,6 +1434,7 @@ export class LayerTable {
             "_confirmDelete": {},
             "_controlsThatFit": {},
             "_fetchingData": {},
+            "_filterOpen": {},
             "_isDeleting": {},
             "_layer": {},
             "_selectedIndexes": {},
@@ -1416,21 +1460,6 @@ 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 elementRef() { return "el"; }

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

@@ -1,73 +1,73 @@
-/** @license
- * Copyright 2023 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;
-}
-
-.action-center {
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  -ms-grid-row-align: center;
-  align-items: center;
-  align-content: center;
-  justify-content: center;
-}
-
-.display-flex {
-  display: flex;
-}
-
-.icon-color {
-  --calcite-ui-icon-color: var(--calcite-ui-brand);
-}
-
-.icon {
-  cursor: pointer;
-}
-
-.tooltip-message {
-  padding: 5px 8px;
-  font-weight: var(--calcite-font-weight-normal);
-  color: var(--calcite-ui-text-2);
-}
-
-.header-text {
-  font-size: var(--calcite-font-size-0);
-  font-weight: var(--calcite-font-weight-medium);
-  padding-inline: 0.75rem;
-  padding-block: 0.875rem;
-  line-height: 1.25rem;
-}
-
-.img-background {
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  width: 38px;
-  height: 26px;
-}
-
-.grid-background {
-  background-image: url('../../assets/data/images/grid.png');
-}
-
-.horizontal-background {
-  background-image: url('../../assets/data/images/horizontal.png');
-}
-
-.vertical-background {
-  background-image: url('../../assets/data/images/vertical.png');
-}
+/** @license
+ * Copyright 2023 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;
+}
+
+.action-center {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-grid-row-align: center;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+}
+
+.display-flex {
+  display: flex;
+}
+
+.icon-color {
+  --calcite-color-icon-color: var(--calcite-color-brand);
+}
+
+.icon {
+  cursor: pointer;
+}
+
+.tooltip-message {
+  padding: 5px 8px;
+  font-weight: var(--calcite-font-weight-normal);
+  color: var(--calcite-color-text-2);
+}
+
+.header-text {
+  font-size: var(--calcite-font-size-0);
+  font-weight: var(--calcite-font-weight-medium);
+  padding-inline: 0.75rem;
+  padding-block: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.img-background {
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 38px;
+  height: 26px;
+}
+
+.grid-background {
+  background-image: url('../../assets/data/images/grid.png');
+}
+
+.horizontal-background {
+  background-image: url('../../assets/data/images/horizontal.png');
+}
+
+.vertical-background {
+  background-image: url('../../assets/data/images/vertical.png');
+}

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

@@ -24,6 +24,10 @@
   height: calc(100% - 51px);
 }
 
+.height-full {
+  height: 100%;
+}
+
 .box-shadow {
   box-shadow: none !important;
 }
@@ -31,3 +35,7 @@
 .visibility-hidden {
   visibility: hidden;
 }
+
+.display-none {
+  display: none;
+}

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

@@ -83,9 +83,12 @@ export class MapCard {
      * Renders the component.
      */
     render() {
+        var _a, _b;
         const mapClass = this.hidden ? "visibility-hidden" : "";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, null, h("map-picker", { mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { class: `map-height ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, 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 })));
+        const mapPickerClass = ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) > 1 ? "" : "display-none";
+        const mapHeightClass = ((_b = this.mapInfos) === null || _b === void 0 ? void 0 : _b.length) > 1 ? "map-height" : "height-full";
+        return (h(Host, null, h("map-picker", { class: mapPickerClass, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, 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 })));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/map-draw-tools/map-draw-tools.css

@@ -19,7 +19,7 @@
 }
 
 .border {
-  outline: 1px solid var(--calcite-ui-border-input);
+  outline: 1px solid var(--calcite-color-border-input);
 }
 
 .div-visible {

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

@@ -20,14 +20,12 @@
 
 .map-layer-picker-container {
   width: 100%;
-  height: 100%;
 }
 
 .map-layer-picker {
   position: relative;
   width: 100%;
   display: inline-block;
-  height: 100%;
 }
 
 .padding-bottom-1 {
@@ -52,6 +50,26 @@
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  opacity: var(--calcite-ui-opacity-disabled);
+  opacity: var(--calcite-opacity-disabled);
   pointer-events: none;
 }
+
+.no-bottom-margin {
+  --calcite-label-margin-bottom: 0px;
+}
+
+.layer-picker-label-container {
+  align-items: center;
+  display: inline-flex;
+  height: 100%;
+  padding-inline-start: 1rem;
+  padding-inline-end: 1rem;
+}
+
+.padding-start-1 {
+  padding-inline-start: 1rem;
+}
+
+.cursor-default {
+  cursor: default;
+}

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

@@ -43,7 +43,9 @@ export class MapLayerPicker {
         this.selectedIds = [];
         this.scale = "m";
         this.showTables = undefined;
+        this.showSingleLayerAsLabel = false;
         this.type = "select";
+        this._hasMultipleLayers = true;
         this._hasValidLayers = true;
         this.ids = [];
         this.selectedName = "";
@@ -61,6 +63,7 @@ export class MapLayerPicker {
         await this._setLayers();
         if (this.ids.length > 0) {
             this._hasValidLayers = true;
+            this._hasMultipleLayers = this.ids.length > 1;
             this._setSelectedLayer(this.ids[0]);
         }
         else {
@@ -88,8 +91,10 @@ export class MapLayerPicker {
      */
     render() {
         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))))));
+        return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
+            !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() :
+                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.
@@ -120,6 +125,14 @@ export class MapLayerPicker {
     _getInvalidPlaceholder() {
         return (h("div", null, h("calcite-notice", { class: "height-100", icon: "exclamation-mark-triangle", id: "no-valid-layers", kind: "danger", open: true }, h("div", { slot: "message" }, this._translations.noLayersFound)), h("calcite-tooltip", { label: this._translations.enableEditUpdate, placement: "bottom", "reference-element": "no-valid-layers" }, h("span", null, this._translations.enableEditUpdate))));
     }
+    /**
+     * Show layer name as a label with icon
+     *
+     * @returns Calcite label with the layer name and icon
+     */
+    _getSingleLayerPlaceholder() {
+        return (h("div", { class: "layer-picker-label-container cursor-default" }, h("calcite-icon", { icon: "layers", scale: "s" }), h("calcite-label", { class: "no-bottom-margin padding-start-1" }, this.selectedName)));
+    }
     /**
      * Create a list of layers from the map
      * Used for selecting a single layer.
@@ -479,6 +492,24 @@ export class MapLayerPicker {
                 "attribute": "show-tables",
                 "reflect": false
             },
+            "showSingleLayerAsLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: when true a map with a single layer will show a label rather than a dropdown\r\nUsed in conjunction with _hasMultipleLayers"
+                },
+                "attribute": "show-single-layer-as-label",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "type": {
                 "type": "string",
                 "mutable": false,
@@ -501,6 +532,7 @@ export class MapLayerPicker {
     }
     static get states() {
         return {
+            "_hasMultipleLayers": {},
             "_hasValidLayers": {},
             "ids": {},
             "selectedName": {},

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

@@ -16,7 +16,7 @@
 
 :host {
   display: block;
-  --solutions-theme-foreground-color: var(--calcite-ui-foreground-1);
+  --solutions-theme-foreground-color: var(--calcite-color-foreground-1);
 }
 
 .width-full {
@@ -35,7 +35,7 @@
   border-width: 0px;
   border-bottom-width: 1px;
   border-style: solid;
-  border-color: var(--calcite-ui-border-3);
+  border-color: var(--calcite-color-border-3);
 }
 
 .action-bar-size {
@@ -49,7 +49,7 @@
   flex-direction: column;
   overflow: hidden;
   animation: calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;
-  background-color: var(--calcite-ui-background);
+  background-color: var(--calcite-color-background);
   z-index: 1000;
   width: 100%;
   height: -moz-fit-content;

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

@@ -1,24 +1,24 @@
-/** @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;
-}
-
-.search-widget {
-  width: 100% !important;
-  border: 1px solid var(--calcite-ui-border-input);
-}
+/** @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;
+}
+
+.search-widget {
+  width: 100% !important;
+  border: 1px solid var(--calcite-color-border-input);
+}

package/dist/collection/components/map-select-tools/map-select-tools.css

@@ -43,7 +43,7 @@
 
 .search-widget {
   width: 100% !important;
-  border: 1px solid var(--calcite-ui-border-input);
+  border: 1px solid var(--calcite-color-border-input);
 }
 
 .w-100 {
@@ -59,7 +59,7 @@
 }
 
 .end-border {
-  border-inline-end: 1px solid var(--calcite-ui-border-2);
+  border-inline-end: 1px solid var(--calcite-color-border-2);
 }
 
 .search-distance {
@@ -72,7 +72,7 @@
 }
 
 .border-bottom {
-  border-bottom: 1px solid var(--calcite-ui-border-2);
+  border-bottom: 1px solid var(--calcite-color-border-2);
 }
 
 .tooltip-container {
@@ -84,11 +84,11 @@
 }
 
 .icon {
-  --calcite-ui-icon-color: var(--calcite-ui-brand);
+  --calcite-color-icon-color: var(--calcite-color-brand);
 }
 
 .tooltip-message {
   padding: 5px 8px;
   font-weight: var(--calcite-font-weight-normal);
-  color: var(--calcite-ui-text-2);
+  color: var(--calcite-color-text-2);
 }

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

@@ -41,7 +41,7 @@
 }
 
 .border-bottom {
-  border-bottom: 1px solid var(--calcite-ui-border-3);
+  border-bottom: 1px solid var(--calcite-color-border-3);
 }
 
 .box-shadow {