@arcgis/map-components 4.29.0-beta.7 → 4.29.0-beta.8

package/dist/esm/arcgis-expand_4.entry.js

@@ -1,7 +1,8 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-eb3ead33.js';
-import { n as newWidgetsExpand, i as importConfig, a as newWebMap, b as newViewsMapView, c as importCoreReactiveUtils, d as newWebScene, e as newViewsSceneView, f as newWidgetsSearch } from './index-334b0bde.js';
-import { r as referenceElementHelper, c as checkForView } from './component-utils-2ebdae59.js';
-import { o as onDisconnectedHelper } from './disconnected-bc5fc8bc.js';
+import { n as newWidgetsExpand, a as newWidgetsLegend, i as importConfig, b as newWebMap, c as newViewsMapView, d as importCoreReactiveUtils, e as newWidgetsSearch } from './index-365164b6.js';
+import { r as referenceElementHelper, c as checkForView } from './component-utils-7d77f5a9.js';
+import { o as onDisconnectedHelper } from './disconnected-888f5a8f.js';
+import { d as disableNavigation } from './mapping-utils-26beb904.js';
 
 const arcgisExpandCss = "arcgis-expand>.esri-expand__content--expanded{background-color:var(--calcite-ui-background)}";
 
@@ -69,6 +70,7 @@ const ArcgisExpand = class {
     }
     else if (viewRef) {
       const handler = () => {
+        viewRef.removeEventListener("viewReady", handler, false);
         this.view = viewRef.view;
         this.view.ui.add(this.childElem, this.position);
         this.widgetReady.emit({ widget: this.widget });
@@ -85,218 +87,167 @@ const ArcgisExpand = class {
 };
 ArcgisExpand.style = arcgisExpandCss;
 
-function disableNavigation(view) {
-  if (view.type === '2d') {
-    view.constraints.rotationEnabled = false;
-  }
-  view.popup.dockEnabled = true;
-  // Removes the zoom action on the popup
-  view.popup.actions.removeAll();
-  view.popup.viewModel.includeDefaultActions = false;
-  // stops propagation of default behavior when an event fires
-  function stopEvtPropagation(event) {
-    event.stopPropagation();
-  }
-  // exlude the zoom widget from the default UI
-  view.ui.components = ['attribution'];
-  // disable mouse wheel scroll zooming on the view
-  view.on('mouse-wheel', stopEvtPropagation);
-  // disable zooming via double-click on the view
-  view.on('double-click', stopEvtPropagation);
-  // disable zooming out via double-click + Control on the view
-  view.on('double-click', ['Control'], stopEvtPropagation);
-  // disables pinch-zoom and panning on the view
-  view.on('drag', stopEvtPropagation);
-  // disable the view's zoom box to prevent the Shift + drag
-  // and Shift + Control + drag zoom gestures.
-  view.on('drag', ['Shift'], stopEvtPropagation);
-  view.on('drag', ['Shift', 'Control'], stopEvtPropagation);
-  // prevents zooming with the + and - keys
-  view.on('key-down', event => {
-    const prohibitedKeys = ['+', '-', 'Shift', '_', '=', 'ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft'];
-    const keyPressed = event.key;
-    if (prohibitedKeys.indexOf(keyPressed) !== -1) {
-      event.stopPropagation();
-    }
-  });
-  return view;
-}
+const arcgisLegendCss = "";
 
-const arcgisMapCss = ".arcgis-map{padding:0;margin:0;height:100%;width:100%}";
-
-const ArcgisMap = class {
+const ArcgisLegend = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.viewReady = createEvent(this, "viewReady", 7);
-    this.apiKey = undefined;
-    this.basemap = undefined;
-    this.backgroundColor = undefined;
-    this.disableNavigation = false;
-    this.itemId = undefined;
-    this.portalUrl = undefined;
-    this.scale = undefined;
-    this.zoom = undefined;
-    this.center = undefined;
+    this.widgetReady = createEvent(this, "widgetReady", 7);
+    this.referenceElement = undefined;
+    this.activeLayerInfos = undefined;
+    this.basemapLegendVisible = undefined;
+    this.hideLayersNotInCurrentView = undefined;
+    this.layerInfos = undefined;
+    this.respectLayerVisibility = undefined;
+    this.legendStyle = undefined;
+    this.position = "bottom-left";
+    this.expandable = false;
     this.view = undefined;
+    this.widget = undefined;
   }
-  apiKeyWatcher(value) {
-    this.config.apiKey = value;
+  //--------------------------------------------------------------------------
+  //
+  //  Watchers
+  //
+  //--------------------------------------------------------------------------
+  positionWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      if (typeof this.view !== "string") {
+        this.view.ui.move(this.childElem, newValue);
+      }
+    }
   }
-  backgroundColorWatcher(value) {
-    this.view.background = {
-      color: value
-    };
+  activeLayerInfosWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      this.widget.activeLayerInfos = newValue;
+    }
   }
-  itemIdWatcher(value, old) {
-    if (value && value !== old) {
-      this.loadMap();
+  basemapLegendVisibleWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      this.widget.basemapLegendVisible = newValue;
     }
   }
-  scaleWatcher(value, old) {
-    if (value != null && value !== old) {
-      this.view.scale = value;
+  hideLayersNotInCurrentViewWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      this.widget.hideLayersNotInCurrentView = newValue;
     }
   }
-  zoomWatcher(value, old) {
-    if (value != null && value !== old) {
-      this.view.zoom = value;
+  layerInfosWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      this.widget.layerInfos = newValue;
     }
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  async componentWillLoad() {
-    this.config = await importConfig();
-    if (this.apiKey) {
-      this.config.apiKey = this.apiKey;
+  respectLayerVisibilityWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      this.widget.respectLayerVisibility = newValue;
     }
-    this.loadMap();
   }
-  componentDidRender() {
-    if (this.view) {
-      this.view.container = this.el;
+  styleWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      this.widget.style = newValue;
     }
   }
-  render() {
-    return h("div", { class: "arcgis-map", ref: (el) => (this.el = el) });
+  referenceElementWatcher(newValue) {
+    referenceElementHelper(this, newValue);
+  }
+  viewWatcher(newValue) {
+    if (newValue !== undefined && this.widget) {
+      this.widget.view = newValue;
+    }
   }
   //--------------------------------------------------------------------------
   //
-  //  Private Methods
+  //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  async loadMap() {
-    const mapParams = {};
-    if (this.itemId) {
-      mapParams.portalItem = this._createPortalItem();
-    }
-    if (this.basemap) {
-      mapParams.basemap = this.basemap;
-    }
-    const map = await newWebMap(mapParams);
-    const params = this._createViewParams();
-    const view = await newViewsMapView({
-      map,
-      ...params
-    });
-    this.view = view;
-    this._addWatchers();
-    if (this.disableNavigation) {
-      disableNavigation(this.view);
+  async componentDidLoad() {
+    const params = this._createParams();
+    const widget = await newWidgetsLegend(params);
+    this.widget = widget;
+    this.widgetReady.emit({ widget: this.widget });
+    checkForView(this);
+  }
+  disconnectedCallback() {
+    onDisconnectedHelper(this);
+  }
+  render() {
+    if (this.expandable) {
+      return (h("arcgis-expand", { position: this.position, ref: (el) => (this.expandElem = el) }, h("div", { ref: (el) => (this.childElem = el) })));
     }
-    this.view.when(() => {
-      this.viewReady.emit({ view: this.view });
-    });
+    return h("div", { ref: (el) => (this.childElem = el) });
   }
   //--------------------------------------------------------------------------
   //
   //  Private Methods
   //
   //--------------------------------------------------------------------------
-  async _addWatchers() {
-    const { watch, when } = await importCoreReactiveUtils();
-    watch(() => this.view.center, (center) => {
-      const value = `${center.longitude},${center.latitude}`;
-      this.center = value;
-    });
-    when(() => this.view.updating, () => {
-      when(() => !this.view.updating, () => {
-        if (this.zoom !== this.view.zoom) {
-          this.zoom = this.view.zoom;
-        }
-        if (this.scale !== this.view.scale) {
-          this.scale = this.view.scale;
-        }
-      }, { once: true });
-    });
-  }
-  _createPortalItem() {
-    const item = {};
-    if (this.itemId) {
-      item.id = this.itemId;
+  _createParams() {
+    const params = {
+      container: this.childElem
+    };
+    if (this.activeLayerInfos) {
+      params.activeLayerInfos = this.activeLayerInfos;
     }
-    if (this.portalUrl) {
-      item.portal = {
-        url: this.portalUrl
-      };
+    if (this.basemapLegendVisible !== undefined) {
+      params.basemapLegendVisible = this.basemapLegendVisible;
     }
-    return item;
-  }
-  _createViewParams() {
-    const params = {};
-    if (this.backgroundColor) {
-      params.background = {
-        color: this.backgroundColor
-      };
+    if (this.hideLayersNotInCurrentView !== undefined) {
+      params.hideLayersNotInCurrentView = this.hideLayersNotInCurrentView;
     }
-    if (this.zoom !== undefined) {
-      params.zoom = this.zoom;
+    if (this.layerInfos) {
+      params.layerInfos = this.layerInfos;
     }
-    if (this.scale !== undefined) {
-      params.scale = this.scale;
+    if (this.respectLayerVisibility !== undefined) {
+      params.respectLayerVisibility = this.respectLayerVisibility;
     }
-    if (this.center) {
-      if (typeof this.center === "string") {
-        params.center = this.center.split(",").map((x) => Number(x));
-      }
-      else {
-        params.center = this.center;
-      }
+    if (this.legendStyle) {
+      params.style = this.legendStyle;
+    }
+    if (this.view) {
+      params.view = this.view;
     }
     return params;
   }
-  get hostElem() { return getElement(this); }
+  get el() { return getElement(this); }
   static get watchers() { return {
-    "apiKey": ["apiKeyWatcher"],
-    "backgroundColor": ["backgroundColorWatcher"],
-    "itemId": ["itemIdWatcher"],
-    "scale": ["scaleWatcher"],
-    "zoom": ["zoomWatcher"]
+    "position": ["positionWatcher"],
+    "activeLayerInfos": ["activeLayerInfosWatcher"],
+    "basemapLegendVisible": ["basemapLegendVisibleWatcher"],
+    "hideLayersNotInCurrentView": ["hideLayersNotInCurrentViewWatcher"],
+    "layerInfos": ["layerInfosWatcher"],
+    "respectLayerVisibility": ["respectLayerVisibilityWatcher"],
+    "legendStyle": ["styleWatcher"],
+    "referenceElement": ["referenceElementWatcher"],
+    "view": ["viewWatcher"]
   }; }
 };
-ArcgisMap.style = arcgisMapCss;
+ArcgisLegend.style = arcgisLegendCss;
 
-const arcgisSceneCss = ".arcgis-scene{padding:0;margin:0;height:100%;width:100%}";
+const arcgisMapCss = ".arcgis-map{padding:0;margin:0;height:100%;width:100%}";
 
-const ArcgisScene = class {
+const ArcgisMap = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.viewReady = createEvent(this, "viewReady", 7);
     this.apiKey = undefined;
     this.basemap = undefined;
+    this.backgroundColor = undefined;
+    this.disableNavigation = false;
     this.itemId = undefined;
     this.portalUrl = undefined;
     this.scale = undefined;
     this.zoom = undefined;
     this.center = undefined;
     this.view = undefined;
-    this.disableNavigation = false;
   }
   apiKeyWatcher(value) {
     this.config.apiKey = value;
   }
+  backgroundColorWatcher(value) {
+    this.view.background = {
+      color: value
+    };
+  }
   itemIdWatcher(value, old) {
     if (value && value !== old) {
       this.loadMap();
@@ -330,7 +281,7 @@ const ArcgisScene = class {
     }
   }
   render() {
-    return h("div", { class: "arcgis-scene", ref: (el) => (this.el = el) });
+    return h("div", { class: "arcgis-map", ref: (el) => (this.el = el) });
   }
   //--------------------------------------------------------------------------
   //
@@ -345,9 +296,9 @@ const ArcgisScene = class {
     if (this.basemap) {
       mapParams.basemap = this.basemap;
     }
-    const map = await newWebScene(mapParams);
+    const map = await newWebMap(mapParams);
     const params = this._createViewParams();
-    const view = await newViewsSceneView({
+    const view = await newViewsMapView({
       map,
       ...params
     });
@@ -360,6 +311,11 @@ const ArcgisScene = class {
       this.viewReady.emit({ view: this.view });
     });
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
   async _addWatchers() {
     const { watch, when } = await importCoreReactiveUtils();
     watch(() => this.view.center, (center) => {
@@ -391,6 +347,11 @@ const ArcgisScene = class {
   }
   _createViewParams() {
     const params = {};
+    if (this.backgroundColor) {
+      params.background = {
+        color: this.backgroundColor
+      };
+    }
     if (this.zoom !== undefined) {
       params.zoom = this.zoom;
     }
@@ -410,12 +371,13 @@ const ArcgisScene = class {
   get hostElem() { return getElement(this); }
   static get watchers() { return {
     "apiKey": ["apiKeyWatcher"],
+    "backgroundColor": ["backgroundColorWatcher"],
     "itemId": ["itemIdWatcher"],
     "scale": ["scaleWatcher"],
     "zoom": ["zoomWatcher"]
   }; }
 };
-ArcgisScene.style = arcgisSceneCss;
+ArcgisMap.style = arcgisMapCss;
 
 const arcgisSearchCss = "";
 
@@ -683,4 +645,4 @@ const ArcgisSearch = class {
 };
 ArcgisSearch.style = arcgisSearchCss;
 
-export { ArcgisExpand as arcgis_expand, ArcgisMap as arcgis_map, ArcgisScene as arcgis_scene, ArcgisSearch as arcgis_search };
+export { ArcgisExpand as arcgis_expand, ArcgisLegend as arcgis_legend, ArcgisMap as arcgis_map, ArcgisSearch as arcgis_search };

package/dist/esm/arcgis-feature-form.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, g as getElement } from './index-eb3ead33.js';
-import { A as newWidgetsFeatureForm } from './index-334b0bde.js';
+import { z as newWidgetsFeatureForm } from './index-365164b6.js';
 
 const arcgisFeatureFormCss = "";
 

package/dist/esm/arcgis-feature-table.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-eb3ead33.js';
-import { B as newLayersFeatureLayer, C as newWidgetsFeatureTable, c as importCoreReactiveUtils } from './index-334b0bde.js';
-import { r as referenceElementHelper, c as checkForView } from './component-utils-2ebdae59.js';
-import { o as onDisconnectedHelper } from './disconnected-bc5fc8bc.js';
+import { A as newLayersFeatureLayer, B as newWidgetsFeatureTable, d as importCoreReactiveUtils } from './index-365164b6.js';
+import { r as referenceElementHelper, c as checkForView } from './component-utils-7d77f5a9.js';
+import { o as onDisconnectedHelper } from './disconnected-888f5a8f.js';
 
 const arcgisFeatureTableCss = ".arcgis-feature-table{width:100%;height:100%}";
 

package/dist/esm/arcgis-feature-templates.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-eb3ead33.js';
-import { D as newWidgetsFeatureTemplates } from './index-334b0bde.js';
-import { c as checkForView } from './component-utils-2ebdae59.js';
-import { o as onDisconnectedHelper } from './disconnected-bc5fc8bc.js';
+import { C as newWidgetsFeatureTemplates } from './index-365164b6.js';
+import { c as checkForView } from './component-utils-7d77f5a9.js';
+import { o as onDisconnectedHelper } from './disconnected-888f5a8f.js';
 
 const arcgisFeatureTemplatesCss = "";
 

package/dist/esm/arcgis-feature.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-eb3ead33.js';
-import { z as newWidgetsFeature } from './index-334b0bde.js';
-import { r as referenceElementHelper, c as checkForView } from './component-utils-2ebdae59.js';
-import { o as onDisconnectedHelper } from './disconnected-bc5fc8bc.js';
+import { y as newWidgetsFeature } from './index-365164b6.js';
+import { r as referenceElementHelper, c as checkForView } from './component-utils-7d77f5a9.js';
+import { o as onDisconnectedHelper } from './disconnected-888f5a8f.js';
 
 const arcgisFeatureCss = "";
 

package/dist/esm/arcgis-features.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-eb3ead33.js';
-import { E as newWidgetsFeatures, c as importCoreReactiveUtils } from './index-334b0bde.js';
-import { r as referenceElementHelper, c as checkForView } from './component-utils-2ebdae59.js';
-import { o as onDisconnectedHelper } from './disconnected-bc5fc8bc.js';
+import { D as newWidgetsFeatures, d as importCoreReactiveUtils } from './index-365164b6.js';
+import { r as referenceElementHelper, c as checkForView } from './component-utils-7d77f5a9.js';
+import { o as onDisconnectedHelper } from './disconnected-888f5a8f.js';
 
 const arcgisFeaturesCss = "arcgis-features{}";
 

package/dist/esm/arcgis-floor-filter.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-eb3ead33.js';
-import { F as newWidgetsFloorFilter } from './index-334b0bde.js';
-import { r as referenceElementHelper, c as checkForView } from './component-utils-2ebdae59.js';
-import { o as onDisconnectedHelper } from './disconnected-bc5fc8bc.js';
+import { E as newWidgetsFloorFilter } from './index-365164b6.js';
+import { r as referenceElementHelper, c as checkForView } from './component-utils-7d77f5a9.js';
+import { o as onDisconnectedHelper } from './disconnected-888f5a8f.js';
 
 const arcgisFloorFilterCss = "";
 

package/dist/esm/arcgis-fullscreen.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-eb3ead33.js';
-import { G as newWidgetsFullscreen } from './index-334b0bde.js';
-import { r as referenceElementHelper, c as checkForView } from './component-utils-2ebdae59.js';
-import { o as onDisconnectedHelper } from './disconnected-bc5fc8bc.js';
+import { F as newWidgetsFullscreen } from './index-365164b6.js';
+import { r as referenceElementHelper, c as checkForView } from './component-utils-7d77f5a9.js';
+import { o as onDisconnectedHelper } from './disconnected-888f5a8f.js';
 
 const arcgisFullscreenCss = "";
 

package/dist/esm/arcgis-histogram-range-slider.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-eb3ead33.js';
-import { I as newWidgetsHistogramRangeSlider } from './index-334b0bde.js';
-import { c as checkForView } from './component-utils-2ebdae59.js';
-import { o as onDisconnectedHelper } from './disconnected-bc5fc8bc.js';
+import { H as newWidgetsHistogramRangeSlider } from './index-365164b6.js';
+import { c as checkForView } from './component-utils-7d77f5a9.js';
+import { o as onDisconnectedHelper } from './disconnected-888f5a8f.js';
 
 const arcgisHistogramRangeSliderCss = "arcgis-histogram-range-slider{}";
 

package/dist/esm/arcgis-histogram.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, g as getElement } from './index-eb3ead33.js';
-import { H as newWidgetsHistogram } from './index-334b0bde.js';
+import { G as newWidgetsHistogram } from './index-365164b6.js';
 
 const arcgisHistogramCss = "arcgis-histogram{}";
 

package/dist/esm/arcgis-home.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-eb3ead33.js';
-import { J as newWidgetsHome } from './index-334b0bde.js';
-import { r as referenceElementHelper, c as checkForView } from './component-utils-2ebdae59.js';
-import { o as onDisconnectedHelper } from './disconnected-bc5fc8bc.js';
+import { I as newWidgetsHome } from './index-365164b6.js';
+import { r as referenceElementHelper, c as checkForView } from './component-utils-7d77f5a9.js';
+import { o as onDisconnectedHelper } from './disconnected-888f5a8f.js';
 
 const arcgisHomeCss = "arcgis-home{}";
 

package/dist/esm/arcgis-layer-list.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-eb3ead33.js';
-import { K as newWidgetsLayerList, c as importCoreReactiveUtils } from './index-334b0bde.js';
-import { r as referenceElementHelper, c as checkForView } from './component-utils-2ebdae59.js';
-import { o as onDisconnectedHelper } from './disconnected-bc5fc8bc.js';
+import { J as newWidgetsLayerList, d as importCoreReactiveUtils } from './index-365164b6.js';
+import { r as referenceElementHelper, c as checkForView } from './component-utils-7d77f5a9.js';
+import { o as onDisconnectedHelper } from './disconnected-888f5a8f.js';
 
 const arcgisLayerListCss = "";
 

package/dist/esm/arcgis-line-of-sight.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-eb3ead33.js';
-import { M as newWidgetsLineOfSight, c as importCoreReactiveUtils } from './index-334b0bde.js';
-import { r as referenceElementHelper, c as checkForView } from './component-utils-2ebdae59.js';
-import { o as onDisconnectedHelper } from './disconnected-bc5fc8bc.js';
+import { K as newWidgetsLineOfSight, d as importCoreReactiveUtils } from './index-365164b6.js';
+import { r as referenceElementHelper, c as checkForView } from './component-utils-7d77f5a9.js';
+import { o as onDisconnectedHelper } from './disconnected-888f5a8f.js';
 
 const arcgisLineOfSightCss = "arcgis-line-of-sight{}";
 

package/dist/esm/arcgis-locate.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-eb3ead33.js';
-import { N as newWidgetsLocate } from './index-334b0bde.js';
-import { r as referenceElementHelper, c as checkForView } from './component-utils-2ebdae59.js';
-import { o as onDisconnectedHelper } from './disconnected-bc5fc8bc.js';
+import { L as newWidgetsLocate } from './index-365164b6.js';
+import { r as referenceElementHelper, c as checkForView } from './component-utils-7d77f5a9.js';
+import { o as onDisconnectedHelper } from './disconnected-888f5a8f.js';
 
 const arcgisLocateCss = "arcgis-locate{}";