@arcgis/map-components 4.29.0-beta.4 → 4.29.0-beta.40

package/dist/components/arcgis-map.js

@@ -1,14 +1,16 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { H as importConfig, I as newWebMap, J as newViewsMapView, i as importCoreReactiveUtils } from './index2.js';
+import { I as importConfig, i as importCoreReactiveUtils, J as newWebMap, K as newViewsMapView } from './index2.js';
+import { i as isNullOrEmptyString } from './component-utils.js';
 import { d as disableNavigation } from './mapping-utils.js';
 
-const arcgisMapCss = ".arcgis-map{padding:0;margin:0;height:100%;width:100%}";
+const mapCss = ".arcgis-map{padding:0;margin:0;height:100%;width:100%}";
 
-const ArcgisMap$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const ArcgisMap$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisMap extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.viewReady = createEvent(this, "viewReady", 7);
+    this._watchHandles = [];
     this.apiKey = undefined;
     this.basemap = undefined;
     this.backgroundColor = undefined;
@@ -23,14 +25,43 @@ const ArcgisMap$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   apiKeyWatcher(value) {
     this.config.apiKey = value;
   }
+  basemapWatcher(value) {
+    if (this.view?.map) {
+      this.view.map.basemap = value;
+    }
+  }
   backgroundColorWatcher(value) {
     this.view.background = {
       color: value
     };
   }
   itemIdWatcher(value, old) {
-    if (value && value !== old) {
-      this.loadMap();
+    // NOTE: there is an issue when users set the value to undefined.
+    // https://github.com/ionic-team/stencil/issues/2814
+    // If user sets `itemid` to `undefined`, Stencil 2 will log the following warning:
+    // `The state/prop "${propName}" changed during rendering.`
+    // `This can potentially lead to infinite-loops and other bugs.`
+    //
+    // It appears consumer setting the value to null does not cause this warning.
+    // In Stencil 4, if a user sets property to undefined, will trigger change, but
+    // will not remove attribute from DOM.
+    if (value !== old) {
+      if (this.view?.map) {
+        this._updateMap();
+      }
+      else {
+        this._loadMap();
+      }
+    }
+  }
+  portalUrlWatcher(value, old) {
+    if (value !== old) {
+      if (this.view?.map) {
+        this._updateMap();
+      }
+      else {
+        this._loadMap();
+      }
     }
   }
   scaleWatcher(value, old) {
@@ -53,13 +84,17 @@ const ArcgisMap$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this.apiKey) {
       this.config.apiKey = this.apiKey;
     }
-    this.loadMap();
+    this._loadMap();
   }
   componentDidRender() {
     if (this.view) {
       this.view.container = this.el;
     }
   }
+  disconnectedCallback() {
+    this._clearWatchHandles();
+    this.view.destroy();
+  }
   render() {
     return h("div", { class: "arcgis-map", ref: (el) => (this.el = el) });
   }
@@ -68,41 +103,17 @@ const ArcgisMap$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //  Private Methods
   //
   //--------------------------------------------------------------------------
-  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);
-    }
-    this.view.when(() => {
-      this.viewReady.emit({ view: this.view });
-    });
+  _clearWatchHandles() {
+    this._watchHandles.forEach((handle) => handle.remove());
+    this._watchHandles = [];
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   async _addWatchers() {
     const { watch, when } = await importCoreReactiveUtils();
-    watch(() => this.view.center, (center) => {
+    this._watchHandles.push(watch(() => this.view.center, (center) => {
       const value = `${center.longitude},${center.latitude}`;
       this.center = value;
-    });
-    when(() => this.view.updating, () => {
+    }));
+    this._watchHandles.push(when(() => this.view.updating, () => {
       when(() => !this.view.updating, () => {
         if (this.zoom !== this.view.zoom) {
           this.zoom = this.view.zoom;
@@ -111,7 +122,21 @@ const ArcgisMap$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           this.scale = this.view.scale;
         }
       }, { once: true });
-    });
+    }));
+  }
+  async _createMap() {
+    const mapParams = {};
+    if (this.itemId) {
+      mapParams.portalItem = this._createPortalItem();
+    }
+    if (this.basemap) {
+      mapParams.basemap = this.basemap;
+    }
+    else if (isNullOrEmptyString(this.itemId)) {
+      mapParams.basemap = "topo-vector";
+    }
+    const map = await newWebMap(mapParams);
+    return map;
   }
   _createPortalItem() {
     const item = {};
@@ -148,26 +173,59 @@ const ArcgisMap$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     return params;
   }
-  get hostElem() { return this; }
+  async _loadMap() {
+    const map = await this._createMap();
+    const params = this._createViewParams();
+    const view = await newViewsMapView({
+      map,
+      ...params
+    });
+    this.view = view;
+    this._addWatchers();
+    if (this.disableNavigation) {
+      disableNavigation(this.view);
+    }
+    this.view.when(() => {
+      this.viewReady.emit({ view: this.view });
+    });
+  }
+  async _updateMap() {
+    if (this.view?.map) {
+      this.view.map.destroy();
+      const map = await this._createMap();
+      this.view.map = map;
+    }
+  }
+  get _hostElement() { return this; }
   static get watchers() { return {
     "apiKey": ["apiKeyWatcher"],
+    "basemap": ["basemapWatcher"],
     "backgroundColor": ["backgroundColorWatcher"],
     "itemId": ["itemIdWatcher"],
+    "portalUrl": ["portalUrlWatcher"],
     "scale": ["scaleWatcher"],
     "zoom": ["zoomWatcher"]
   }; }
-  static get style() { return arcgisMapCss; }
+  static get style() { return mapCss; }
 }, [0, "arcgis-map", {
     "apiKey": [1, "api-key"],
     "basemap": [1025],
     "backgroundColor": [1025, "background-color"],
     "disableNavigation": [4, "disable-navigation"],
-    "itemId": [1, "item-id"],
+    "itemId": [1537, "item-id"],
     "portalUrl": [1, "portal-url"],
     "scale": [1538],
     "zoom": [1538],
     "center": [1537],
     "view": [1040]
+  }, undefined, {
+    "apiKey": ["apiKeyWatcher"],
+    "basemap": ["basemapWatcher"],
+    "backgroundColor": ["backgroundColorWatcher"],
+    "itemId": ["itemIdWatcher"],
+    "portalUrl": ["portalUrlWatcher"],
+    "scale": ["scaleWatcher"],
+    "zoom": ["zoomWatcher"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -188,3 +246,5 @@ const ArcgisMap = ArcgisMap$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { ArcgisMap, defineCustomElement };
+
+//# sourceMappingURL=arcgis-map.js.map

package/dist/components/arcgis-map.js.map

@@ -0,0 +1 @@
+{"file":"arcgis-map.js","mappings":"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","names":["ArcgisMap"],"sources":["src/components/map/map.css?tag=arcgis-map","src/components/map/map.tsx"],"sourcesContent":[".arcgis-map {\n  padding: 0;\n  margin: 0;\n  height: 100%;\n  width: 100%;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, VNode, Watch } from \"@stencil/core\";\n\n// arcgis imports\nimport { importConfig, importCoreReactiveUtils, newViewsMapView, newWebMap } from \"@arcgis/core-adapter\";\nimport type WebMap from \"@arcgis/core/WebMap\";\nimport { isNullOrEmptyString, ViewElement } from \"../../utils/component-utils\";\nimport { disableNavigation } from \"../../utils/mapping-utils\";\nimport { ArcGISMapView } from \"../types\";\n\nexport type ArcGISWebMap = InstanceType<typeof WebMap>;\n\n@Component({\n  tag: \"arcgis-map\",\n  styleUrl: \"map.css\",\n  shadow: false\n})\nexport class ArcgisMap implements ViewElement {\n  //--------------------------------------------------------------------------\n  //\n  //  Elements\n  //\n  //--------------------------------------------------------------------------\n\n  el: HTMLDivElement;\n\n  @Element() _hostElement: HTMLArcgisMapElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Prop() apiKey: string;\n\n  @Watch(\"apiKey\")\n  apiKeyWatcher(value: string): void {\n    this.config.apiKey = value;\n  }\n\n  @Prop({ mutable: true }) basemap: string;\n\n  @Watch(\"basemap\")\n  basemapWatcher(value: string): void {\n    if (this.view?.map) {\n      this.view.map.basemap = value as any;\n    }\n  }\n\n  @Prop({ mutable: true }) backgroundColor: string;\n\n  @Watch(\"backgroundColor\")\n  backgroundColorWatcher(value: string): void {\n    this.view.background = {\n      color: value\n    } as any;\n  }\n\n  @Prop() disableNavigation = false;\n\n  @Prop({ mutable: true, reflect: true }) itemId: string;\n\n  @Watch(\"itemId\")\n  itemIdWatcher(value: string, old: string): void {\n    // NOTE: there is an issue when users set the value to undefined.\n    // https://github.com/ionic-team/stencil/issues/2814\n    // If user sets `itemid` to `undefined`, Stencil 2 will log the following warning:\n    // `The state/prop \"${propName}\" changed during rendering.`\n    // `This can potentially lead to infinite-loops and other bugs.`\n    //\n    // It appears consumer setting the value to null does not cause this warning.\n    // In Stencil 4, if a user sets property to undefined, will trigger change, but\n    // will not remove attribute from DOM.\n    if (value !== old) {\n      if (this.view?.map) {\n        this._updateMap();\n      } else {\n        this._loadMap();\n      }\n    }\n  }\n\n  @Prop() portalUrl: string;\n\n  @Watch(\"portalUrl\")\n  portalUrlWatcher(value: string, old: string): void {\n    if (value !== old) {\n      if (this.view?.map) {\n        this._updateMap();\n      } else {\n        this._loadMap();\n      }\n    }\n  }\n\n  @Prop({ mutable: true, reflect: true }) scale: number;\n\n  @Watch(\"scale\")\n  scaleWatcher(value: number, old: number): void {\n    if (value != null && value !== old) {\n      this.view.scale = value;\n    }\n  }\n\n  @Prop({ mutable: true, reflect: true }) zoom: number;\n\n  @Watch(\"zoom\")\n  zoomWatcher(value: number, old: number): void {\n    if (value != null && value !== old) {\n      this.view.zoom = value;\n    }\n  }\n\n  @Prop({ mutable: true, reflect: true }) center: number[] | string;\n\n  @Prop({ mutable: true }) view: ArcGISMapView;\n\n  config: __esri.config;\n\n  _watchHandles: __esri.WatchHandle[] = [];\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  @Event({ cancelable: true }) viewReady: EventEmitter<{ view: __esri.MapView }>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async componentWillLoad(): Promise<void> {\n    this.config = await importConfig();\n    if (this.apiKey) {\n      this.config.apiKey = this.apiKey;\n    }\n\n    this._loadMap();\n  }\n\n  componentDidRender(): void {\n    if (this.view) {\n      this.view.container = this.el;\n    }\n  }\n\n  disconnectedCallback(): void {\n    this._clearWatchHandles();\n    this.view.destroy();\n  }\n\n  render(): VNode {\n    return <div class=\"arcgis-map\" ref={(el) => (this.el = el!)}></div>;\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private _clearWatchHandles(): void {\n    this._watchHandles.forEach((handle) => handle.remove());\n    this._watchHandles = [];\n  }\n\n  private async _addWatchers() {\n    const { watch, when } = await importCoreReactiveUtils();\n\n    this._watchHandles.push(\n      watch(\n        () => this.view.center,\n        (center) => {\n          const value = `${center.longitude},${center.latitude}`;\n          this.center = value;\n        }\n      )\n    );\n\n    this._watchHandles.push(\n      when(\n        () => this.view.updating,\n        () => {\n          when(\n            () => !this.view.updating,\n            () => {\n              if (this.zoom !== this.view.zoom) {\n                this.zoom = this.view.zoom;\n              }\n              if (this.scale !== this.view.scale) {\n                this.scale = this.view.scale;\n              }\n            },\n            { once: true }\n          );\n        }\n      )\n    );\n  }\n\n  private async _createMap(): Promise<__esri.WebMap> {\n    const mapParams: Partial<InstanceType<typeof WebMap>> = {};\n\n    if (this.itemId) {\n      mapParams.portalItem = this._createPortalItem() as any;\n    }\n\n    if (this.basemap) {\n      mapParams.basemap = this.basemap as any;\n    } else if (isNullOrEmptyString(this.itemId)) {\n      mapParams.basemap = \"topo-vector\" as any;\n    }\n\n    const map = await newWebMap(mapParams);\n    return map;\n  }\n\n  private _createPortalItem(): Partial<__esri.PortalItemProperties> {\n    const item: Partial<__esri.PortalItemProperties> = {};\n\n    if (this.itemId) {\n      item.id = this.itemId;\n    }\n    if (this.portalUrl) {\n      item.portal = {\n        url: this.portalUrl\n      } as Partial<__esri.PortalProperties>;\n    }\n\n    return item;\n  }\n\n  private _createViewParams(): Partial<__esri.MapViewProperties> {\n    const params: Partial<__esri.MapViewProperties> = {};\n\n    if (this.backgroundColor) {\n      params.background = {\n        color: this.backgroundColor\n      };\n    }\n\n    if (this.zoom !== undefined) {\n      params.zoom = this.zoom;\n    }\n\n    if (this.scale !== undefined) {\n      params.scale = this.scale;\n    }\n\n    if (this.center) {\n      if (typeof this.center === \"string\") {\n        params.center = this.center.split(\",\").map((x) => Number(x));\n      } else {\n        params.center = this.center;\n      }\n    }\n\n    return params;\n  }\n\n  private async _loadMap(): Promise<void> {\n    const map = await this._createMap();\n\n    const params = this._createViewParams();\n\n    const view = await newViewsMapView({\n      map,\n      ...params\n    });\n\n    this.view = view;\n\n    this._addWatchers();\n\n    if (this.disableNavigation) {\n      disableNavigation(this.view);\n    }\n\n    this.view.when(() => {\n      this.viewReady.emit({ view: this.view });\n    });\n  }\n\n  private async _updateMap(): Promise<void> {\n    if (this.view?.map) {\n      this.view.map.destroy();\n      const map = await this._createMap();\n      this.view.map = map;\n    }\n  }\n}\n"],"version":3}

package/dist/components/arcgis-measurement.js

@@ -1,15 +1,17 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { K as newWidgetsMeasurement, i as importCoreReactiveUtils } from './index2.js';
-import { r as referenceElementHelper, c as checkForView, o as onDisconnectedHelper } from './disconnected.js';
-import { d as defineCustomElement$2 } from './arcgis-expand2.js';
+import { L as newWidgetsMeasurement, i as importCoreReactiveUtils } from './index2.js';
+import { r as referenceElementHelper, c as checkForView, a as addHandles } from './component-utils.js';
+import { o as onDisconnectedHelper } from './disconnected.js';
+import { d as defineCustomElement$2 } from './expand.js';
 
-const arcgisMeasurementCss = "arcgis-measurement{}";
+const measurementCss = "arcgis-measurement{}";
 
-const ArcgisMeasurement$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const ArcgisMeasurement$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisMeasurement extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.widgetReady = createEvent(this, "widgetReady", 7);
+    this._watchHandles = [];
     this.referenceElement = undefined;
     this.activeTool = undefined;
     this.activeWidget = undefined;
@@ -20,36 +22,29 @@ const ArcgisMeasurement$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     this.view = undefined;
     this.widget = undefined;
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Watchers
-  //
-  //--------------------------------------------------------------------------
+  referenceElementWatcher(newValue) {
+    referenceElementHelper(this, newValue);
+  }
   activeToolWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
+    if (this.widget) {
       this.widget.activeTool = newValue;
     }
   }
   areaUnitWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
+    if (this.widget) {
       this.widget.areaUnit = newValue;
     }
   }
   linearUnitWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
+    if (this.widget) {
       this.widget.linearUnit = newValue;
     }
   }
   positionWatcher(newValue) {
     if (newValue !== undefined && this.widget) {
-      if (typeof this.view !== "string") {
-        this.view.ui.move(this.childElem, newValue);
-      }
+      this.view.ui.move(this.childElem, newValue);
     }
   }
-  referenceElementWatcher(newValue) {
-    referenceElementHelper(this, newValue);
-  }
   viewWatcher(newValue) {
     if (newValue !== undefined && this.widget) {
       this.widget.view = newValue;
@@ -92,14 +87,23 @@ const ArcgisMeasurement$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
   //--------------------------------------------------------------------------
   async _addWatchers() {
     const { watch } = await importCoreReactiveUtils();
-    watch(() => this.widget.activeWidget, (value) => (this.activeWidget = value), {
+    addHandles(this, watch(() => this.widget.activeWidget, (value) => (this.activeWidget = value), {
       initial: true
-    });
+    }));
   }
   _createParams() {
     const params = {
       container: this.childElem
     };
+    if (this.activeTool) {
+      params.activeTool = this.activeTool;
+    }
+    if (this.areaUnit) {
+      params.areaUnit = this.areaUnit;
+    }
+    if (this.linearUnit) {
+      params.linearUnit = this.linearUnit;
+    }
     if (this.view) {
       params.view = this.view;
     }
@@ -107,14 +111,14 @@ const ArcgisMeasurement$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
   }
   get el() { return this; }
   static get watchers() { return {
+    "referenceElement": ["referenceElementWatcher"],
     "activeTool": ["activeToolWatcher"],
     "areaUnit": ["areaUnitWatcher"],
     "linearUnit": ["linearUnitWatcher"],
     "position": ["positionWatcher"],
-    "referenceElement": ["referenceElementWatcher"],
     "view": ["viewWatcher"]
   }; }
-  static get style() { return arcgisMeasurementCss; }
+  static get style() { return measurementCss; }
 }, [0, "arcgis-measurement", {
     "referenceElement": [1, "reference-element"],
     "activeTool": [1, "active-tool"],
@@ -126,6 +130,13 @@ const ArcgisMeasurement$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     "view": [1040],
     "widget": [1040],
     "startMeasurement": [64]
+  }, undefined, {
+    "referenceElement": ["referenceElementWatcher"],
+    "activeTool": ["activeToolWatcher"],
+    "areaUnit": ["areaUnitWatcher"],
+    "linearUnit": ["linearUnitWatcher"],
+    "position": ["positionWatcher"],
+    "view": ["viewWatcher"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -151,3 +162,5 @@ const ArcgisMeasurement = ArcgisMeasurement$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { ArcgisMeasurement, defineCustomElement };
+
+//# sourceMappingURL=arcgis-measurement.js.map

package/dist/components/arcgis-measurement.js.map

@@ -0,0 +1 @@
+{"file":"arcgis-measurement.js","mappings":"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","names":["ArcgisMeasurement"],"sources":["src/components/measurement/measurement.css?tag=arcgis-measurement","src/components/measurement/measurement.tsx"],"sourcesContent":["arcgis-measurement {\n  /* Component styles go here */\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, VNode, Watch, h } from \"@stencil/core\";\n\n// arcgis imports\nimport { importCoreReactiveUtils, newWidgetsMeasurement } from \"@arcgis/core-adapter\";\nimport type Measurement from \"@arcgis/core/widgets/Measurement\";\nimport { ArcgisReferenceElement, addHandles, checkForView, referenceElementHelper } from \"../../utils/component-utils\";\nimport { onDisconnectedHelper } from \"../../utils/disconnected\";\nimport { ExpandableComponent } from \"../../utils/expandable\";\nimport { ArcGISMapView, ArcGISSceneView } from \"../types\";\n\nexport type MeasurementWidget = InstanceType<typeof Measurement>;\n\n@Component({\n  tag: \"arcgis-measurement\",\n  styleUrl: \"measurement.css\"\n})\nexport class ArcgisMeasurement implements ExpandableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Element\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLDivElement;\n\n  childElem: HTMLDivElement;\n\n  expandElem: HTMLArcgisExpandElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Prop() referenceElement: ArcgisReferenceElement | string;\n\n  @Watch(\"referenceElement\")\n  referenceElementWatcher(newValue: ArcgisReferenceElement | string): void {\n    referenceElementHelper(this, newValue);\n  }\n\n  @Prop() activeTool: MeasurementWidget[\"activeTool\"];\n\n  @Watch(\"activeTool\")\n  activeToolWatcher(newValue: MeasurementWidget[\"activeTool\"]): void {\n    if (this.widget) {\n      this.widget.activeTool = newValue;\n    }\n  }\n\n  @Prop({ mutable: true }) activeWidget: MeasurementWidget[\"activeWidget\"];\n\n  @Prop() areaUnit: MeasurementWidget[\"areaUnit\"];\n\n  @Watch(\"areaUnit\")\n  areaUnitWatcher(newValue: MeasurementWidget[\"areaUnit\"]): void {\n    if (this.widget) {\n      this.widget.areaUnit = newValue;\n    }\n  }\n\n  @Prop() linearUnit: MeasurementWidget[\"linearUnit\"];\n\n  @Watch(\"linearUnit\")\n  linearUnitWatcher(newValue: MeasurementWidget[\"linearUnit\"]): void {\n    if (this.widget) {\n      this.widget.linearUnit = newValue;\n    }\n  }\n\n  @Prop() position = \"bottom-left\";\n\n  @Watch(\"position\")\n  positionWatcher(newValue: string): void {\n    if (newValue !== undefined && this.widget) {\n      this.view.ui.move(this.childElem, newValue);\n    }\n  }\n\n  @Prop() expandable = false;\n\n  @Prop({ mutable: true }) view: ArcGISMapView | ArcGISSceneView;\n\n  @Watch(\"view\")\n  viewWatcher(newValue: ArcGISMapView | ArcGISSceneView): void {\n    if (newValue !== undefined && this.widget) {\n      this.widget.view = newValue;\n    }\n  }\n\n  @Prop({ mutable: true }) widget: MeasurementWidget;\n\n  _watchHandles: __esri.WatchHandle[] = [];\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  @Event({ cancelable: true }) widgetReady: EventEmitter<{ widget: __esri.Measurement }>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  //--------------------------------------------------------------------------\n\n  @Method()\n  async startMeasurement(): Promise<void> {\n    return this.widget?.startMeasurement();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async componentDidLoad(): Promise<void> {\n    const params = this._createParams();\n\n    const widget = await newWidgetsMeasurement(params);\n\n    this.widget = widget;\n\n    await this._addWatchers();\n\n    this.widgetReady.emit({ widget: this.widget });\n\n    checkForView(this);\n  }\n\n  disconnectedCallback(): void {\n    onDisconnectedHelper(this);\n  }\n\n  render(): VNode {\n    if (this.expandable) {\n      return (\n        <arcgis-expand position={this.position} ref={(el) => (this.expandElem = el as HTMLArcgisExpandElement)}>\n          <div ref={(el) => (this.childElem = el as HTMLDivElement)}></div>\n        </arcgis-expand>\n      );\n    }\n    return <div ref={(el) => (this.childElem = el as HTMLDivElement)}></div>;\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private async _addWatchers() {\n    const { watch } = await importCoreReactiveUtils();\n\n    addHandles(\n      this,\n      watch(\n        () => this.widget.activeWidget,\n        (value) => (this.activeWidget = value),\n        {\n          initial: true\n        }\n      )\n    );\n  }\n\n  private _createParams(): Partial<MeasurementWidget> {\n    const params: Partial<MeasurementWidget> = {\n      container: this.childElem\n    };\n\n    if (this.activeTool) {\n      params.activeTool = this.activeTool;\n    }\n\n    if (this.areaUnit) {\n      params.areaUnit = this.areaUnit;\n    }\n\n    if (this.linearUnit) {\n      params.linearUnit = this.linearUnit;\n    }\n\n    if (this.view) {\n      params.view = this.view;\n    }\n\n    return params;\n  }\n}\n"],"version":3}

package/dist/components/arcgis-navigation-toggle.js

@@ -1,25 +1,25 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { L as newWidgetsNavigationToggle } from './index2.js';
-import { r as referenceElementHelper, c as checkForView, o as onDisconnectedHelper } from './disconnected.js';
+import { M as newWidgetsNavigationToggle } from './index2.js';
+import { r as referenceElementHelper, c as checkForView } from './component-utils.js';
+import { o as onDisconnectedHelper } from './disconnected.js';
 
-const arcgisNavigationToggleCss = "arcgis-navigation-toggle{}";
+const navigationToggleCss = "arcgis-navigation-toggle{}";
 
-const ArcgisNavigationToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const ArcgisNavigationToggle$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisNavigationToggle extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.widgetReady = createEvent(this, "widgetReady", 7);
+    this._watchHandles = [];
     this.referenceElement = undefined;
     this.layout = undefined;
     this.position = "bottom-left";
     this.view = undefined;
     this.widget = undefined;
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Watchers
-  //
-  //--------------------------------------------------------------------------
+  referenceElementWatcher(newValue) {
+    referenceElementHelper(this, newValue);
+  }
   layoutWatcher(newValue) {
     if (newValue !== undefined && this.widget) {
       this.widget.layout = newValue;
@@ -27,14 +27,9 @@ const ArcgisNavigationToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends
   }
   positionWatcher(newValue) {
     if (newValue !== undefined && this.widget) {
-      if (typeof this.view !== "string") {
-        this.view.ui.move(this.childElem, newValue);
-      }
+      this.view.ui.move(this.childElem, newValue);
     }
   }
-  referenceElementWatcher(newValue) {
-    referenceElementHelper(this, newValue);
-  }
   viewWatcher(newValue) {
     if (newValue !== undefined && this.widget) {
       this.widget.view = newValue;
@@ -82,12 +77,12 @@ const ArcgisNavigationToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends
   }
   get el() { return this; }
   static get watchers() { return {
+    "referenceElement": ["referenceElementWatcher"],
     "layout": ["layoutWatcher"],
     "position": ["positionWatcher"],
-    "referenceElement": ["referenceElementWatcher"],
     "view": ["viewWatcher"]
   }; }
-  static get style() { return arcgisNavigationToggleCss; }
+  static get style() { return navigationToggleCss; }
 }, [0, "arcgis-navigation-toggle", {
     "referenceElement": [1, "reference-element"],
     "layout": [1537],
@@ -95,6 +90,11 @@ const ArcgisNavigationToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends
     "view": [1040],
     "widget": [1040],
     "toggle": [64]
+  }, undefined, {
+    "referenceElement": ["referenceElementWatcher"],
+    "layout": ["layoutWatcher"],
+    "position": ["positionWatcher"],
+    "view": ["viewWatcher"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -115,3 +115,5 @@ const ArcgisNavigationToggle = ArcgisNavigationToggle$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { ArcgisNavigationToggle, defineCustomElement };
+
+//# sourceMappingURL=arcgis-navigation-toggle.js.map

package/dist/components/arcgis-navigation-toggle.js.map

@@ -0,0 +1 @@
+{"file":"arcgis-navigation-toggle.js","mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,4BAA4B;;MCoB3CA,wBAAsB;;;;;IAqDjC,kBAAa,GAAyB,EAAE,CAAC;;;oBApBtB,aAAa;;;;EAbhC,uBAAuB,CAAC,QAAyC;IAC/D,sBAAsB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;GACxC;EAKD,aAAa,CAAC,QAA0C;IACtD,IAAI,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,EAAE;MACzC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,QAAQ,CAAC;KAC/B;GACF;EAKD,eAAe,CAAC,QAAgB;IAC9B,IAAI,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,EAAE;MACzC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;KAC7C;GACF;EAKD,WAAW,CAAC,QAAyB;IACnC,IAAI,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,EAAE;MACzC,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC;KAC7B;GACF;;;;;;EAqBD,MAAM,MAAM;IACV,OAAO,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;GAC9B;;;;;;EAQD,MAAM,gBAAgB;IACpB,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;IAEpC,MAAM,MAAM,GAAG,MAAM,0BAA0B,CAAC,MAAM,CAAC,CAAC;IAExD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAE/C,YAAY,CAAC,IAAI,CAAC,CAAC;GACpB;EAED,oBAAoB;IAClB,oBAAoB,CAAC,IAAI,CAAC,CAAC;GAC5B;EAED,MAAM;IACJ,OAAO,WAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAoB,CAAC,GAAQ,CAAC;GAC1E;;;;;;EAOO,aAAa;IACnB,MAAM,MAAM,GAAoC;MAC9C,SAAS,EAAE,IAAI,CAAC,SAAS;KAC1B,CAAC;IAEF,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;KACzB;IAED,OAAO,MAAM,CAAC;GACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ArcgisNavigationToggle"],"sources":["src/components/navigation-toggle/navigation-toggle.css?tag=arcgis-navigation-toggle","src/components/navigation-toggle/navigation-toggle.tsx"],"sourcesContent":["arcgis-navigation-toggle {\n  /* Component styles go here */\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, VNode, Watch } from \"@stencil/core\";\n\n// arcgis imports\nimport { newWidgetsNavigationToggle } from \"@arcgis/core-adapter\";\nimport type NavigationToggle from \"@arcgis/core/widgets/NavigationToggle\";\nimport {\n  ArcgisReferenceElement,\n  checkForView,\n  referenceElementHelper,\n  WidgetElement\n} from \"../../utils/component-utils\";\nimport { onDisconnectedHelper } from \"../../utils/disconnected\";\nimport { ArcGISSceneView } from \"../types\";\n\nexport type NavigationToggleWidget = InstanceType<typeof NavigationToggle>;\n\n@Component({\n  tag: \"arcgis-navigation-toggle\",\n  styleUrl: \"navigation-toggle.css\"\n})\nexport class ArcgisNavigationToggle implements WidgetElement {\n  //--------------------------------------------------------------------------\n  //\n  //  Elements\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLDivElement;\n\n  childElem: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Prop() referenceElement: ArcgisReferenceElement | string;\n\n  @Watch(\"referenceElement\")\n  referenceElementWatcher(newValue: ArcgisReferenceElement | string): void {\n    referenceElementHelper(this, newValue);\n  }\n\n  @Prop({ mutable: true, reflect: true }) layout: NavigationToggleWidget[\"layout\"];\n\n  @Watch(\"layout\")\n  layoutWatcher(newValue: NavigationToggleWidget[\"layout\"]): void {\n    if (newValue !== undefined && this.widget) {\n      this.widget.layout = newValue;\n    }\n  }\n\n  @Prop() position = \"bottom-left\";\n\n  @Watch(\"position\")\n  positionWatcher(newValue: string): void {\n    if (newValue !== undefined && this.widget) {\n      this.view.ui.move(this.childElem, newValue);\n    }\n  }\n\n  @Prop({ mutable: true }) view: ArcGISSceneView;\n\n  @Watch(\"view\")\n  viewWatcher(newValue: ArcGISSceneView): void {\n    if (newValue !== undefined && this.widget) {\n      this.widget.view = newValue;\n    }\n  }\n\n  @Prop({ mutable: true }) widget: NavigationToggleWidget;\n\n  _watchHandles: __esri.WatchHandle[] = [];\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  @Event({ cancelable: true }) widgetReady: EventEmitter<{ widget: __esri.NavigationToggle }>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Watchers\n  //\n  //--------------------------------------------------------------------------\n\n  @Method()\n  async toggle(): Promise<void> {\n    return this.widget?.toggle();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async componentDidLoad(): Promise<void> {\n    const params = this._createParams();\n\n    const widget = await newWidgetsNavigationToggle(params);\n\n    this.widget = widget;\n    this.widgetReady.emit({ widget: this.widget });\n\n    checkForView(this);\n  }\n\n  disconnectedCallback(): void {\n    onDisconnectedHelper(this);\n  }\n\n  render(): VNode {\n    return <div ref={(el) => (this.childElem = el as HTMLDivElement)}></div>;\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private _createParams(): Partial<NavigationToggleWidget> {\n    const params: Partial<NavigationToggleWidget> = {\n      container: this.childElem\n    };\n\n    if (this.view) {\n      params.view = this.view;\n    }\n\n    return params;\n  }\n}\n"],"version":3}

package/dist/components/arcgis-placement.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ArcgisPlacement extends Components.ArcgisPlacement, HTMLElement {}
+export const ArcgisPlacement: {
+  prototype: ArcgisPlacement;
+  new (): ArcgisPlacement;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/arcgis-placement.js

@@ -0,0 +1,73 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { r as referenceElementHelper, c as checkForView } from './component-utils.js';
+import { o as onDisconnectedHelper } from './disconnected.js';
+
+const placementCss = "arcgis-placement{}";
+
+const ArcgisPlacement$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisPlacement extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.placementReady = createEvent(this, "placementReady", 7);
+    this.referenceElement = undefined;
+    this.view = undefined;
+    this.position = "bottom-left";
+  }
+  referenceElementWatcher(newValue) {
+    referenceElementHelper(this, newValue);
+  }
+  positionWatcher(newValue) {
+    if (newValue !== undefined) {
+      this.view.ui.move(this.childElem, newValue);
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  async componentDidLoad() {
+    this.placementReady.emit({ ready: true });
+    checkForView(this);
+  }
+  disconnectedCallback() {
+    onDisconnectedHelper(this);
+  }
+  render() {
+    return (h("div", { ref: (el) => (this.childElem = el) }, h("slot", null)));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "referenceElement": ["referenceElementWatcher"],
+    "position": ["positionWatcher"]
+  }; }
+  static get style() { return placementCss; }
+}, [4, "arcgis-placement", {
+    "referenceElement": [1, "reference-element"],
+    "view": [16],
+    "position": [1]
+  }, undefined, {
+    "referenceElement": ["referenceElementWatcher"],
+    "position": ["positionWatcher"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["arcgis-placement"];
+  components.forEach(tagName => { switch (tagName) {
+    case "arcgis-placement":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ArcgisPlacement$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const ArcgisPlacement = ArcgisPlacement$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ArcgisPlacement, defineCustomElement };
+
+//# sourceMappingURL=arcgis-placement.js.map

package/dist/components/arcgis-placement.js.map

@@ -0,0 +1 @@
+{"file":"arcgis-placement.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,oBAAoB;;MCgB5BA,iBAAe;;;;;;;oBAoBP,aAAa;;EANhC,uBAAuB,CAAC,QAAyC;IAC/D,sBAAsB,CAAC,IAAW,EAAE,QAAQ,CAAC,CAAC;GAC/C;EAOD,eAAe,CAAC,QAAgB;IAC9B,IAAI,QAAQ,KAAK,SAAS,EAAE;MAC1B,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;KAC7C;GACF;;;;;;EAgBD,MAAM,gBAAgB;IACpB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;IAE1C,YAAY,CAAC,IAAW,CAAC,CAAC;GAC3B;EAED,oBAAoB;IAClB,oBAAoB,CAAC,IAAW,CAAC,CAAC;GACnC;EAED,MAAM;IACJ,QACE,WAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAoB,CAAC,IACvD,eAAQ,CACJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ArcgisPlacement"],"sources":["src/components/placement/placement.css?tag=arcgis-placement","src/components/placement/placement.tsx"],"sourcesContent":["arcgis-placement {\n  /* Component styles go here */\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, VNode, Watch } from \"@stencil/core\";\n\n// arcgis imports\nimport {\n  ArcgisReferenceElement,\n  BaseComponentElement,\n  checkForView,\n  referenceElementHelper\n} from \"../../utils/component-utils\";\nimport { onDisconnectedHelper } from \"../../utils/disconnected\";\nimport { ArcGISMapView, ArcGISSceneView } from \"../types\";\n\n@Component({\n  tag: \"arcgis-placement\",\n  styleUrl: \"placement.css\"\n})\nexport class ArcgisPlacement implements BaseComponentElement {\n  @Element() el: HTMLArcgisPlacementElement;\n\n  childElem: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Prop() referenceElement: ArcgisReferenceElement | string;\n\n  @Watch(\"referenceElement\")\n  referenceElementWatcher(newValue: ArcgisReferenceElement | string): void {\n    referenceElementHelper(this as any, newValue);\n  }\n\n  @Prop() view: ArcGISMapView | ArcGISSceneView;\n\n  @Prop() position = \"bottom-left\";\n\n  @Watch(\"position\")\n  positionWatcher(newValue: string): void {\n    if (newValue !== undefined) {\n      this.view.ui.move(this.childElem, newValue);\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  @Event({ cancelable: true }) placementReady: EventEmitter<{ ready: boolean }>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async componentDidLoad(): Promise<void> {\n    this.placementReady.emit({ ready: true });\n\n    checkForView(this as any);\n  }\n\n  disconnectedCallback(): void {\n    onDisconnectedHelper(this as any);\n  }\n\n  render(): VNode {\n    return (\n      <div ref={(el) => (this.childElem = el as HTMLDivElement)}>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}