@esri/solutions-components 0.7.16 → 0.7.18

package/dist/components/crowdsource-manager.js

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { a as ELayoutMode } from './interfaces.js';
 import { d as defineCustomElement$V } from './basemap-gallery2.js';
@@ -63,7 +63,7 @@ import { d as defineCustomElement$4 } from './map-picker2.js';
 import { d as defineCustomElement$3 } from './map-search2.js';
 import { d as defineCustomElement$2 } from './map-tools2.js';
 
-const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-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-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-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}.position-absolute-50{position:absolute;top:50px;bottom:0px;left:0px;right:0px}.position-absolute-0{position:absolute;top:0px;bottom:0px;left:0px;right:0px}";
+const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-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-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-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}.position-absolute-50{position:absolute;top:50px;bottom:0px;left:0px;right:0px}.position-absolute-0{position:absolute;top:0px;bottom:0px;left:0px;right:0px}.visibility-hidden{visibility:hidden;height:0px}";
 
 const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceManager extends HTMLElement {
     constructor() {
@@ -104,11 +104,15 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this.theme = "light";
         this.zoomAndScrollToSelected = false;
         this._expandPopup = false;
+        this._hideFooter = false;
+        this._hideTable = false;
+        this._isMobile = undefined;
         this._translations = undefined;
         this._layoutMode = ELayoutMode.GRID;
         this._mapInfo = undefined;
         this._mapView = undefined;
         this._panelOpen = true;
+        this._numSelected = 0;
         this._tableOnly = false;
     }
     //--------------------------------------------------------------------------
@@ -149,6 +153,13 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     enableZoomWatchHandler() {
         this._initMapZoom();
     }
+    /**
+     * Show the map, popup, and table if the user switches out of mobile mode
+     */
+    async _isMobileWatchHandler() {
+        const show = !this._isMobile ? false : this._numSelected > 0;
+        this.showHideMapPopupAndTable(show);
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -159,6 +170,21 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     //  Events (public)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Listen for changes in feature selection and show or hide the map, popup, and table
+     */
+    async featureSelectionChange(evt) {
+        var _a;
+        this._numSelected = (_a = evt.detail) === null || _a === void 0 ? void 0 : _a.length;
+    }
+    /**
+     * Listen for when the popup is closed in mobile mode and hide the appropriate UI elements
+     */
+    async popupClosed() {
+        if (this._isMobile) {
+            this.showHideMapPopupAndTable(false);
+        }
+    }
     /**
      * Listen for idsFound event to be fired so we can know that all layer ids have been fetched
      */
@@ -205,12 +231,13 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      */
     async componentWillLoad() {
         await this._getTranslations();
+        this._resizeObserver = new ResizeObserver(() => this._onResize());
     }
     /**
      * Renders the component.
      */
     render() {
-        return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: "width-full height-full" }, this._getBody(this._layoutMode, this._panelOpen, this.hideMap)))));
+        return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: "width-full height-full" }, this._getBody(this._layoutMode, this._panelOpen, this.hideMap, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render
@@ -222,11 +249,27 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
             await this._setMapView();
         }
     }
+    /**
+     * Called once after the component is loaded
+     */
+    async componentDidLoad() {
+        this._resizeObserver.observe(this.el);
+    }
     //--------------------------------------------------------------------------
     //
     //  Functions (protected)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Show View and Delete buttons in the footer when in isMobile is true
+     *
+     * @returns the footer node
+     * @protected
+     */
+    _getFooter() {
+        const hasSelectedFeatures = this._numSelected > 0;
+        return this._isMobile && hasSelectedFeatures && !this._hideFooter ? (h("div", { class: `width-100`, slot: "footer" }, h("div", { class: "display-flex padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-show", onClick: () => this.showHideMapPopupAndTable(true), width: "full" }, this._translations.view.replace("{{n}}", this._numSelected.toString())), h("calcite-button", { appearance: "outline", class: "padding-inline-start-1", id: "solutions-delete", kind: "danger", onClick: () => this._layerTable.deleteFeatures(), width: "full" }, this._translations.delete.replace("{{n}}", this._numSelected.toString()))))) : undefined;
+    }
     /**
      * Get the icon name to use for the divider icon based on the current layout
      *
@@ -270,7 +313,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         let sizeClass = "";
         switch (layoutMode) {
             case ELayoutMode.HORIZONTAL:
-                sizeClass = `${panelOpen ? "height-1-2" : "height-0"} width-full position-relative`;
+                sizeClass = `${this._isMobile && this._hideTable ? "height-full" : panelOpen ? "height-1-2" : "height-0"} width-full position-relative`;
                 break;
             case ELayoutMode.GRID:
                 sizeClass = this.classicGrid ? `${panelOpen ? "position-relative" : "position-absolute-53"} height-full width-full display-flex` :
@@ -318,10 +361,10 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * @returns the parent node that contains the table and map
      * @protected
      */
-    _getBody(layoutMode, panelOpen, hideMap) {
+    _getBody(layoutMode, panelOpen, hideMap, hideTable) {
         const contentClass = this.classicGrid && layoutMode === ELayoutMode.GRID && panelOpen ? "display-grid" :
             layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
-        return this.classicGrid ? (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full ${contentClass}` }, this._getTable(layoutMode, panelOpen), this._getMapAndCard(layoutMode, panelOpen, hideMap)))) : (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideMap), this._getTable(layoutMode, panelOpen))));
+        return this.classicGrid ? (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getTable(layoutMode, panelOpen, hideTable), this._getMapAndCard(layoutMode, panelOpen, hideMap)))) : (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideMap), this._getTable(layoutMode, panelOpen, hideTable))));
     }
     /**
      * Get the map and card nodes based for the current layout options
@@ -347,10 +390,13 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * @protected
      */
     _getMapNode(layoutMode, hideMap) {
+        var _a;
         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" : "adjusted-height-50";
-        return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableMapToolsExpand: true, enableSearch: this.enableSearch, hidden: this._expandPopup, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: this.mapInfos?.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
+            layoutMode === ELayoutMode.HORIZONTAL && !hideMap ? "" : layoutMode === ELayoutMode.GRID && !hideMap ? "" : "visibility-hidden";
+        const mapContainerClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "width-full" :
+            this._layoutMode === ELayoutMode.HORIZONTAL && !hideMap ? "" :
+                this._layoutMode === ELayoutMode.HORIZONTAL && this._isMobile && this.hideMap ? "height-0" : "adjusted-height-50";
+        return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableMapToolsExpand: true, enableSearch: this.enableSearch, hidden: this._expandPopup, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
     }
     /**
      * Get the expand node for the popup information
@@ -359,12 +405,15 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * @protected
      */
     _getPopupExpandNode() {
+        var _a;
         const icon = this._expandPopup ? "chevrons-down" : "chevrons-up";
         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";
-        const popupNodeClass = !this._expandPopup ? "height-full" : this.mapInfos?.length === 1 ? "position-absolute-0" : "position-absolute-50";
-        return (h("div", { class: "calcite-mode-dark " + popupNodeClass }, 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", { disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
+        const popupNodeClass = !this._expandPopup ? "height-full" : ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) === 1 || this._isMobile ? "position-absolute-0" : "position-absolute-50";
+        const headerClass = this._isMobile ? "display-none height-0" : "";
+        const headerTheme = !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
+        return (h("div", { class: `${headerTheme} ${popupNodeClass}` }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
     }
     /**
      * Toggle the popup information
@@ -375,18 +424,15 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this._expandPopup = !this._expandPopup;
     }
     /**
-     * Get the card node based for the current layout options
-     *
-     * @param layoutMode ELayoutMode the current layout mode
-     * @param hideMap when true no map is displayed
+     * Get the card node
      *
-     * @returns the map node
+     * @returns the card node
      * @protected
      */
     _getCardNode() {
-        const cardManagerHeight = !this._expandPopup ? "height-50" : "height-full";
+        const cardManagerHeight = !this._expandPopup && !this._isMobile ? "height-50" : "height-full";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h("div", { class: `width-50 height-full ${themeClass}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, mapView: this?._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
+        return (h("div", { class: `width-50 height-full ${themeClass}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, isMobile: this._isMobile, mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
     }
     /**
      * Get the table node based for the current layout
@@ -397,7 +443,8 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * @returns the table node
      * @protected
      */
-    _getTable(layoutMode, panelOpen) {
+    _getTable(layoutMode, panelOpen, hideTable) {
+        const tableClass = hideTable ? "visibility-hidden" : "";
         const tableSizeClass = this._getTableSizeClass(layoutMode, panelOpen);
         const icon = this._getDividerIcon(layoutMode, panelOpen);
         const tooltip = panelOpen ? this._translations.close : this._translations.open;
@@ -407,18 +454,34 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
             this.classicGrid && layoutMode === ELayoutMode.VERTICAL ? "panel-end" :
                 layoutMode === ELayoutMode.HORIZONTAL ? "header" : "panel-start";
         const hasMapAndLayer = this.defaultWebmap && this.defaultLayer;
-        return (h("calcite-shell", { class: tableSizeClass + " border-bottom" }, h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip))), h("div", { class: "width-full height-full position-relative" }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? this._defaultGlobalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !this.defaultGlobalId ? this._defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, enableZoom: this.enableZoom, mapInfo: this._mapInfo, mapView: this?._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
+        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? this._defaultGlobalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !this.defaultGlobalId ? this._defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
+    }
+    /**
+     * Update the component layout when its size changes
+     */
+    _onResize() {
+        this._isMobile = this.el.offsetWidth < 1024;
+        this._layoutMode = this._isMobile ? ELayoutMode.HORIZONTAL : ELayoutMode.GRID;
+        this._panelOpen = true;
     }
     /**
      * Open/Close the appropriate panel.
      * The panel that is toggled is dependent upon the layout mode and if using classic grid or not
-     *
-     * @returns void
-     * @protected
      */
     _toggleLayout() {
         this._panelOpen = !this._panelOpen;
     }
+    /**
+     * Show/Hide the map, popup, and table
+     *
+     * @param show when true the map, popup, and table will be displayed
+     */
+    showHideMapPopupAndTable(show) {
+        this.hideMap = show;
+        this._expandPopup = false;
+        this._hideTable = show;
+        this._hideFooter = show;
+    }
     /**
      * Get the current map info (configuration details) when maps change
      *
@@ -433,7 +496,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
                 return true;
             }
         });
-        return { ...mapInfo };
+        return Object.assign({}, mapInfo);
     }
     /**
      * Set the current map info when maps change
@@ -487,7 +550,8 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         "defaultGlobalId": ["defaultGlobalIdWatchHandler"],
         "defaultOid": ["defaultOidWatchHandler"],
         "defaultLevel": ["defaultLevelWatchHandler"],
-        "enableZoom": ["enableZoomWatchHandler"]
+        "enableZoom": ["enableZoomWatchHandler"],
+        "_isMobile": ["_isMobileWatchHandler"]
     }; }
     static get style() { return crowdsourceManagerCss; }
 }, [0, "crowdsource-manager", {
@@ -521,18 +585,23 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         "theme": [1],
         "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
         "_expandPopup": [32],
+        "_hideFooter": [32],
+        "_hideTable": [32],
+        "_isMobile": [32],
         "_translations": [32],
         "_layoutMode": [32],
         "_mapInfo": [32],
         "_mapView": [32],
         "_panelOpen": [32],
+        "_numSelected": [32],
         "_tableOnly": [32]
-    }, [[8, "idsFound", "idsFound"], [8, "layoutChanged", "layoutChanged"], [8, "mapChanged", "mapChanged"], [8, "beforeMapChanged", "beforeMapChanged"]], {
+    }, [[8, "featureSelectionChange", "featureSelectionChange"], [8, "popupClosed", "popupClosed"], [8, "idsFound", "idsFound"], [8, "layoutChanged", "layoutChanged"], [8, "mapChanged", "mapChanged"], [8, "beforeMapChanged", "beforeMapChanged"]], {
         "defaultCenter": ["defaultCenterWatchHandler"],
         "defaultGlobalId": ["defaultGlobalIdWatchHandler"],
         "defaultOid": ["defaultOidWatchHandler"],
         "defaultLevel": ["defaultLevelWatchHandler"],
-        "enableZoom": ["enableZoomWatchHandler"]
+        "enableZoom": ["enableZoomWatchHandler"],
+        "_isMobile": ["_isMobileWatchHandler"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/crowdsource-reporter.js

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const crowdsourceReporterCss = ":host{display:block}";
 

package/dist/components/date-picker-day.js

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as dateToISO } from './date.js';
 import { c as closestElementCrossShadowBoundary, t as toAriaBoolean } from './dom.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
@@ -69,11 +69,7 @@ const DatePickerDay = /*@__PURE__*/ proxyCustomElement(class DatePickerDay exten
         const dayId = dateToISO(this.value).replaceAll("-", "");
         if (this.parentDatePickerEl) {
             const { numberingSystem, lang: locale } = this.parentDatePickerEl;
-            numberStringFormatter.numberFormatOptions = {
-                useGrouping: false,
-                ...(numberingSystem && { numberingSystem }),
-                ...(locale && { locale }),
-            };
+            numberStringFormatter.numberFormatOptions = Object.assign(Object.assign({ useGrouping: false }, (numberingSystem && { numberingSystem })), (locale && { locale }));
         }
         const formattedDay = numberStringFormatter.localize(String(this.day));
         const dayLabel = this.dateTimeFormat.format(this.value);

package/dist/components/date-picker-month-header.js

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 import { e as getOrder, b as dateFromRange, n as nextMonth, p as prevMonth, f as formatCalendarYear, h as parseCalendarYear } from './date.js';
 import { c as closestElementCrossShadowBoundary } from './dom.js';
 import { i as isActivationKey } from './key.js';
@@ -122,17 +122,14 @@ const DatePickerMonthHeader = /*@__PURE__*/ proxyCustomElement(class DatePickerM
         return h("div", { class: CSS.header }, this.renderContent());
     }
     renderContent() {
+        var _a;
         const { messages, localeData, activeDate } = this;
         if (!activeDate || !localeData) {
             return null;
         }
         if (this.parentDatePickerEl) {
             const { numberingSystem, lang: locale } = this.parentDatePickerEl;
-            numberStringFormatter.numberFormatOptions = {
-                useGrouping: false,
-                ...(numberingSystem && { numberingSystem }),
-                ...(locale && { locale }),
-            };
+            numberStringFormatter.numberFormatOptions = Object.assign(Object.assign({ useGrouping: false }, (numberingSystem && { numberingSystem })), (locale && { locale }));
         }
         const activeMonth = activeDate.getMonth();
         const { months, unitOrder } = localeData;
@@ -140,7 +137,7 @@ const DatePickerMonthHeader = /*@__PURE__*/ proxyCustomElement(class DatePickerM
         const localizedYear = this.formatCalendarYear(activeDate.getFullYear());
         const order = getOrder(unitOrder);
         const reverse = order.indexOf("y") < order.indexOf("m");
-        const suffix = localeData.year?.suffix;
+        const suffix = (_a = localeData.year) === null || _a === void 0 ? void 0 : _a.suffix;
         return (h(Fragment, null, h("a", { "aria-disabled": `${this.prevMonthDate.getMonth() === activeMonth}`, "aria-label": messages.prevMonth, class: CSS.chevron, href: "#", onClick: this.prevMonthClick, onKeyDown: this.prevMonthKeydown, role: "button", tabindex: this.prevMonthDate.getMonth() === activeMonth ? -1 : 0 }, h("calcite-icon", { "flip-rtl": true, icon: ICON.chevronLeft, scale: getIconScale(this.scale) })), h("div", { class: { text: true, [CSS.textReverse]: reverse } }, h(Heading, { class: CSS.month, level: this.headingLevel }, localizedMonth), h("span", { class: CSS.yearWrap }, h("input", { "aria-label": messages.year, class: {
                 year: true,
                 [CSS.yearSuffix]: !!suffix,

package/dist/components/date-picker-month.js

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as sameDate, b as dateFromRange, i as inRange } from './date.js';
 import { d as defineCustomElement$1 } from './date-picker-day.js';
 
@@ -300,9 +300,10 @@ const DatePickerMonth = /*@__PURE__*/ proxyCustomElement(class DatePickerMonth e
      * @param active.ref
      */
     renderDateDay({ active, currentMonth, date, day, dayInWeek, ref }) {
+        var _a;
         const isFocusedOnStart = this.isFocusedOnStart();
         const isHoverInRange = this.isHoverInRange() ||
-            (!this.endDate && this.hoverRange && sameDate(this.hoverRange?.end, this.startDate));
+            (!this.endDate && this.hoverRange && sameDate((_a = this.hoverRange) === null || _a === void 0 ? void 0 : _a.end, this.startDate));
         return (h("div", { class: "day", key: date.toDateString(), role: "gridcell" }, h("calcite-date-picker-day", { active: active, class: {
                 "hover--inside-range": this.startDate && isHoverInRange,
                 "hover--outside-range": this.startDate && !isHoverInRange,
@@ -313,12 +314,13 @@ const DatePickerMonth = /*@__PURE__*/ proxyCustomElement(class DatePickerMonth e
             ref: (el) => {
                 // when moving via keyboard, focus must be updated on active date
                 if (ref && active && this.activeFocus) {
-                    el?.focus();
+                    el === null || el === void 0 ? void 0 : el.focus();
                 }
             } })));
     }
     isFocusedOnStart() {
-        return this.hoverRange?.focused === "start";
+        var _a;
+        return ((_a = this.hoverRange) === null || _a === void 0 ? void 0 : _a.focused) === "start";
     }
     isHoverInRange() {
         if (!this.hoverRange) {

package/dist/components/date-picker.js

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { getAssetPath, proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client/index.js';
+import { getAssetPath, proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client';
 import { d as dateFromISO, g as getDaysDiff, a as dateToISO, b as dateFromRange, s as setEndOfDay } from './date.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 import { g as getSupportedLocale, c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter, b as getDateTimeFormat } from './locale2.js';
@@ -388,6 +388,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         setComponentLoaded(this);
     }
     render() {
+        var _a;
         const date = dateFromRange(this.range && Array.isArray(this.valueAsDate) ? this.valueAsDate[0] : this.valueAsDate, this.minAsDate, this.maxAsDate);
         let activeDate = this.getActiveDate(date, this.minAsDate, this.maxAsDate);
         const endDate = this.range && Array.isArray(this.valueAsDate)
@@ -395,7 +396,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             : null;
         const activeEndDate = this.getActiveEndDate(endDate, this.minAsDate, this.maxAsDate);
         if ((this.activeRange === "end" ||
-            (this.hoverRange?.focused === "end" && (!this.proximitySelectionDisabled || endDate))) &&
+            (((_a = this.hoverRange) === null || _a === void 0 ? void 0 : _a.focused) === "end" && (!this.proximitySelectionDisabled || endDate))) &&
             activeEndDate) {
             activeDate = activeEndDate;
         }

package/dist/components/deduct-calculator2.js

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$8 } from './button.js';
 import { d as defineCustomElement$7 } from './icon.js';
 import { d as defineCustomElement$6 } from './input.js';

package/dist/components/downloadUtils.js

@@ -4,12 +4,12 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { c as createCommonjsModule, g as getDefaultExportFromCjs } from './_commonjsHelpers.js';
-import { getAssetPath } from '@stencil/core/internal/client/index.js';
+import { getAssetPath } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
 import { q as queryFeaturesByID } from './queryUtils.js';
 import './solution-resource.js';
 import './index3.js';
-import { _ as __assign, r as request, c as cleanUrl, g as getJson } from './restHelpersGet.js';
+import { _ as __assign$1, r as request, c as cleanUrl, g as getJson } from './restHelpersGet.js';
 
 /** @license
  * Copyright 2022 Esri
@@ -487,14 +487,14 @@ class PDFCreator {
 }
 
 var _typeof_1 = createCommonjsModule(function (module) {
-function _typeof(o) {
+function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(o);
+  return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(obj);
 }
 module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports;
 });
@@ -2243,6 +2243,32 @@ function downloadPDFFile(filename, labels, labelPageDescription, title = "", ini
 }
 //#endregion
 
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
 /* Copyright (c) 2017-2018 Environmental Systems Research Institute, Inc.
  * Apache-2.0 */
 /**
@@ -2259,7 +2285,7 @@ function appendCustomParams(customOptions, keys, baseOptions) {
         "maxUrlLength",
         "headers"
     ];
-    var options = __assign(__assign({ params: {} }, baseOptions), customOptions);
+    var options = __assign$1(__assign$1({ params: {} }, baseOptions), customOptions);
     // merge all keys in customOptions into options.params
     options.params = keys.reduce(function (value, key) {
         if (customOptions[key] || typeof customOptions[key] === "boolean") {
@@ -2337,8 +2363,9 @@ const lineSeparatorChar = "|";
 async function consolidateLabels(webmap, exportInfos, formatUsingLayerPopup = true, includeHeaderNames = false, isCSVExport = false) {
     const labelRequests = [];
     Object.keys(exportInfos).forEach(k => {
+        var _a;
         const labelInfo = exportInfos[k];
-        labelRequests.push(_prepareLabels(webmap, labelInfo.layerView?.layer || labelInfo.layer, labelInfo.ids, formatUsingLayerPopup, includeHeaderNames));
+        labelRequests.push(_prepareLabels(webmap, ((_a = labelInfo.layerView) === null || _a === void 0 ? void 0 : _a.layer) || labelInfo.layer, labelInfo.ids, formatUsingLayerPopup, includeHeaderNames));
         if (isCSVExport) {
             // add the layer id as a temp value separator that we can use to split values for CSV export
             labelRequests.push(Promise.resolve([[k]]));
@@ -2601,8 +2628,9 @@ function _createFilename(selectionSetNames) {
  * @return Array of Arcade expression references, e.g., ["{expression/expr1}", "{expression/expr2}"]
  */
 function _getExpressionsFromLabel(labelFormat) {
+    var _a;
     const arcadeExpressionRegExp = /\{expression\/\w+\}/g;
-    return labelFormat.match(arcadeExpressionRegExp) ?? [];
+    return (_a = labelFormat.match(arcadeExpressionRegExp)) !== null && _a !== void 0 ? _a : [];
 }
 /**
  * Gets the related records for a feature service.
@@ -2638,12 +2666,9 @@ function _getFeatureServiceRelatedRecords(url, layerId, relationshipId, objectId
  * @returns Promise resolving to an array of objects and their related records
  */
 function _getFeatureServiceRelatedRecordsTranche(options, relationships = [], resultOffset = 0) {
-    return queryRelated({
-        ...options,
-        params: {
+    return queryRelated(Object.assign(Object.assign({}, options), { params: {
             resultOffset
-        }
-    })
+        } }))
         .then((response) => {
         relationships.push(...response.relatedRecordGroups);
         // If exceededTransferLimit is true, then there are more records to retrieve and the feature service
@@ -2699,6 +2724,7 @@ function _getFieldNamesFromFieldExpressions(fieldExpressions) {
  * for ILabelFormatProps type "pattern": "{name}|{street}|{city}, {state} {zip}"
  */
 async function _getLabelFormat(webmap, layer, formatUsingLayerPopup) {
+    var _a, _b;
     let labelFormatProps = {
         layer,
         attributeFormats: {},
@@ -2719,7 +2745,7 @@ async function _getLabelFormat(webmap, layer, formatUsingLayerPopup) {
         // What is the nature of the label content?
         // Fields list
         if (formatUsingLayerPopup) {
-            const labelFormatType = layer.popupTemplate?.content[0]?.type;
+            const labelFormatType = (_b = (_a = layer.popupTemplate) === null || _a === void 0 ? void 0 : _a.content[0]) === null || _b === void 0 ? void 0 : _b.type;
             if (labelFormatType === "relationship") {
                 const relationshipId = layer.popupTemplate.content[0].relationshipId;
                 // Get related layer
@@ -2838,7 +2864,7 @@ function _prepareAttributeValue(attributeValue, attributeType, attributeDomain,
         let value = attributeValue;
         switch (attributeType) {
             case "date":
-                if (attributeFormat?.dateFormat) {
+                if (attributeFormat === null || attributeFormat === void 0 ? void 0 : attributeFormat.dateFormat) {
                     const dateFormatIntlOptions = intl.convertDateFormatToIntlOptions(attributeFormat.dateFormat);
                     value = intl.formatDate(value, dateFormatIntlOptions);
                 }
@@ -2851,7 +2877,7 @@ function _prepareAttributeValue(attributeValue, attributeType, attributeDomain,
                 break;
             case "date-only":
                 // Value is a string, e.g., "2020-12-08"
-                if (attributeFormat?.dateFormat) {
+                if (attributeFormat === null || attributeFormat === void 0 ? void 0 : attributeFormat.dateFormat) {
                     const dateFormatIntlOptions = intl.convertDateFormatToIntlOptions(attributeFormat.dateFormat);
                     value = intl.formatDateOnly(value, dateFormatIntlOptions);
                 }
@@ -2861,7 +2887,7 @@ function _prepareAttributeValue(attributeValue, attributeType, attributeDomain,
                 break;
             case "time-only":
                 // Value is a string, e.g., "14:51:44.2533333"
-                if (attributeFormat?.dateFormat) {
+                if (attributeFormat === null || attributeFormat === void 0 ? void 0 : attributeFormat.dateFormat) {
                     const dateFormatIntlOptions = intl.convertDateFormatToIntlOptions(attributeFormat.dateFormat);
                     value = intl.formatTimeOnly(value, dateFormatIntlOptions);
                 }
@@ -3030,6 +3056,7 @@ async function _prepareLabelsFromAll(featureSet, attributeTypes, attributeDomain
  * @returns Promise resolving with list of labels, each of which is a list of label lines
  */
 async function _prepareLabelsFromPattern(layer, featureSet, attributeOrigNames, attributeTypes, attributeDomains, attributeFormats, labelFormat, includeHeaderNames = false) {
+    var _a;
     const [intl] = await loadModules(["esri/intl"]);
     // Find the label fields that we need to replace with values
     const attributeExpressionMatches = _getFieldExpressionsFromLabel(labelFormat);
@@ -3038,9 +3065,10 @@ async function _prepareLabelsFromPattern(layer, featureSet, attributeOrigNames,
     const arcadeExecutors = await _createArcadeExecutors(labelFormat, layer);
     const arcadeExpressionRegExp = /\{expression\/\w+\}/g;
     // Find the label fields that we need to replace with values
-    const arcadeExpressionMatches = labelFormat.match(arcadeExpressionRegExp) ?? [];
+    const arcadeExpressionMatches = (_a = labelFormat.match(arcadeExpressionRegExp)) !== null && _a !== void 0 ? _a : [];
     // Convert feature attributes into an array of labels
     const labels = await Promise.all(featureSet.map(async (feature) => {
+        var _a;
         let labelPrep = labelFormat;
         //Replace Arcade expressions in this feature
         for (let i = 0; i < arcadeExpressionMatches.length; i++) {
@@ -3050,7 +3078,7 @@ async function _prepareLabelsFromPattern(layer, featureSet, attributeOrigNames,
             labelPrep = labelPrep.replace(match, value);
         }
         // Replace non-Arcade fields in this feature
-        const attributeValues = feature.attributes ?? feature;
+        const attributeValues = (_a = feature.attributes) !== null && _a !== void 0 ? _a : feature;
         attributeNames.forEach((attributeName, i) => {
             const lowercaseFieldname = attributeName.toLowerCase();
             const value = _prepareAttributeValue(attributeValues[attributeOrigNames[lowercaseFieldname]], attributeTypes[lowercaseFieldname], attributeDomains[lowercaseFieldname], attributeFormats[lowercaseFieldname], intl);
@@ -3087,4 +3115,4 @@ async function _prepareLabelsUsingExecutor(featureSet, labelFormat) {
 }
 //#endregion
 
-export { downloadPDF as a, consolidateLabels as c, downloadCSV as d, removeDuplicateLabels as r };
+export { _typeof_1 as _, downloadPDF as a, consolidateLabels as c, downloadCSV as d, removeDuplicateLabels as r };