@arcgis/map-components 4.29.0-beta.3 → 4.29.0-beta.30

package/dist/components/arcgis-scene.js

@@ -1,14 +1,16 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { H as importConfig, P as newWebScene, Q as newViewsSceneView, i as importCoreReactiveUtils } from './index2.js';
+import { H as importConfig, i as importCoreReactiveUtils, P as newWebScene, Q as newViewsSceneView } from './index2.js';
+import { i as isNullOrEmptyString } from './component-utils.js';
 import { d as disableNavigation } from './mapping-utils.js';
 
-const arcgisSceneCss = ".arcgis-scene{padding:0;margin:0;height:100%;width:100%}";
+const sceneCss = ".arcgis-scene{padding:0;margin:0;height:100%;width:100%}";
 
 const ArcgisScene$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.viewReady = createEvent(this, "viewReady", 7);
+    this._watchHandles = [];
     this.apiKey = undefined;
     this.basemap = undefined;
     this.itemId = undefined;
@@ -22,9 +24,48 @@ const ArcgisScene$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   apiKeyWatcher(value) {
     this.config.apiKey = value;
   }
+  basemapWatcher(value) {
+    if (this.view?.map) {
+      this.view.map.basemap = value;
+    }
+  }
   itemIdWatcher(value, old) {
+    // 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 && value !== old) {
-      this.loadMap();
+      if (this.view?.map) {
+        this._updateMap();
+      }
+      else {
+        this._loadMap();
+      }
+    }
+  }
+  scaleWatcher(value, old) {
+    if (value != null && value !== old) {
+      this.view.scale = value;
+    }
+  }
+  zoomWatcher(value, old) {
+    if (value != null && value !== old) {
+      this.view.zoom = value;
     }
   }
   //--------------------------------------------------------------------------
@@ -37,13 +78,17 @@ const ArcgisScene$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-scene", ref: (el) => (this.el = el) });
   }
@@ -52,7 +97,28 @@ const ArcgisScene$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   //  Private Methods
   //
   //--------------------------------------------------------------------------
-  async loadMap() {
+  _clearWatchHandles() {
+    this._watchHandles.forEach((handle) => handle.remove());
+    this._watchHandles = [];
+  }
+  async _addWatchers() {
+    const { watch, when } = await importCoreReactiveUtils();
+    this._watchHandles.push(watch(() => this.view.center, (center) => {
+      const value = `${center.longitude},${center.latitude}`;
+      this.center = value;
+    }));
+    this._watchHandles.push(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 });
+    }));
+  }
+  async _createMap() {
     const mapParams = {};
     if (this.itemId) {
       mapParams.portalItem = this._createPortalItem();
@@ -60,27 +126,11 @@ const ArcgisScene$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     if (this.basemap) {
       mapParams.basemap = this.basemap;
     }
-    const map = await newWebScene(mapParams);
-    const params = this._createViewParams();
-    const view = await newViewsSceneView({
-      map,
-      ...params
-    });
-    this.view = view;
-    this._addWatchers();
-    if (this.disableNavigation) {
-      disableNavigation(this.view);
+    else if (isNullOrEmptyString(this.itemId)) {
+      mapParams.basemap = "topo-vector";
     }
-    this.view.when(() => this.viewReady.emit({ view: this.view }));
-  }
-  async _addWatchers() {
-    const { watch } = await importCoreReactiveUtils();
-    watch(() => this.view.center, (center) => {
-      const value = `${center.longitude},${center.latitude}`;
-      this.center = value;
-    });
-    watch(() => this.view.zoom, (value) => (this.zoom = value));
-    watch(() => this.view.scale, (value) => (this.scale = value));
+    const map = await newWebScene(mapParams);
+    return map;
   }
   _createPortalItem() {
     const item = {};
@@ -112,16 +162,43 @@ const ArcgisScene$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 newViewsSceneView({
+      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"],
-    "itemId": ["itemIdWatcher"]
+    "basemap": ["basemapWatcher"],
+    "itemId": ["itemIdWatcher"],
+    "portalUrl": ["portalUrlWatcher"],
+    "scale": ["scaleWatcher"],
+    "zoom": ["zoomWatcher"]
   }; }
-  static get style() { return arcgisSceneCss; }
+  static get style() { return sceneCss; }
 }, [0, "arcgis-scene", {
     "apiKey": [1, "api-key"],
     "basemap": [1025],
-    "itemId": [1, "item-id"],
+    "itemId": [1537, "item-id"],
     "portalUrl": [1, "portal-url"],
     "scale": [1538],
     "zoom": [1538],

package/dist/components/arcgis-search.js

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { R as newWidgetsSearch, 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 { 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 arcgisSearchCss = "";
+const searchCss = "";
 
 const ArcgisSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -18,6 +19,7 @@ const ArcgisSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.selectResult = createEvent(this, "selectResult", 7);
     this.suggestComplete = createEvent(this, "suggestComplete", 7);
     this.suggestStart = createEvent(this, "suggestStart", 7);
+    this._watchHandles = [];
     this.referenceElement = undefined;
     this.activeMenu = undefined;
     this.activeSource = undefined;
@@ -203,27 +205,27 @@ const ArcgisSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   //--------------------------------------------------------------------------
   async _addWatchers() {
     const { watch } = await importCoreReactiveUtils();
-    watch(() => this.widget.activeSource, (value) => (this.activeSource = value), {
+    addHandles(this, watch(() => this.widget.activeSource, (value) => (this.activeSource = value), {
       initial: true
-    });
-    watch(() => this.widget.activeSourceIndex, (value) => (this.activeSourceIndex = value), {
+    }));
+    addHandles(this, watch(() => this.widget.activeSourceIndex, (value) => (this.activeSourceIndex = value), {
       initial: true
-    });
-    watch(() => this.widget.allSources, (value) => (this.allSources = value), {
+    }));
+    addHandles(this, watch(() => this.widget.allSources, (value) => (this.allSources = value), {
       initial: true
-    });
-    watch(() => this.widget.defaultSources, (value) => (this.defaultSources = value), {
+    }));
+    addHandles(this, watch(() => this.widget.defaultSources, (value) => (this.defaultSources = value), {
       initial: true
-    });
-    watch(() => this.widget.resultGraphic, (value) => (this.resultGraphic = value), {
+    }));
+    addHandles(this, watch(() => this.widget.resultGraphic, (value) => (this.resultGraphic = value), {
       initial: true
-    });
-    watch(() => this.widget.results, (value) => (this.results = value), {
+    }));
+    addHandles(this, watch(() => this.widget.results, (value) => (this.results = value), {
       initial: true
-    });
-    watch(() => this.widget.selectedResult, (value) => (this.selectedResult = value), {
+    }));
+    addHandles(this, watch(() => this.widget.selectedResult, (value) => (this.selectedResult = value), {
       initial: true
-    });
+    }));
   }
   _createParams() {
     const params = {
@@ -267,7 +269,7 @@ const ArcgisSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     "referenceElement": ["referenceElementWatcher"],
     "view": ["viewWatcher"]
   }; }
-  static get style() { return arcgisSearchCss; }
+  static get style() { return searchCss; }
 }, [0, "arcgis-search", {
     "referenceElement": [1, "reference-element"],
     "activeMenu": [1, "active-menu"],

package/dist/components/arcgis-shadow-cast.js

@@ -1,15 +1,17 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { S as newWidgetsShadowCast } 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 { r as referenceElementHelper, c as checkForView } from './component-utils.js';
+import { o as onDisconnectedHelper } from './disconnected.js';
+import { d as defineCustomElement$2 } from './expand.js';
 
-const arcgisShadowCastCss = "arcgis-shadow-cast{}";
+const shadowCastCss = "arcgis-shadow-cast{}";
 
 const ArcgisShadowCast$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.widgetReady = createEvent(this, "widgetReady", 7);
+    this._watchHandles = [];
     this.referenceElement = undefined;
     this.view = undefined;
     this.position = "bottom-left";
@@ -86,7 +88,7 @@ const ArcgisShadowCast$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     "referenceElement": ["referenceElementWatcher"],
     "view": ["viewWatcher"]
   }; }
-  static get style() { return arcgisShadowCastCss; }
+  static get style() { return shadowCastCss; }
 }, [0, "arcgis-shadow-cast", {
     "referenceElement": [1, "reference-element"],
     "view": [1040],

package/dist/components/arcgis-sketch.js

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { T as newWidgetsSketch, i as importCoreReactiveUtils, U as newLayersGraphicsLayer } 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 { 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 arcgisSketchCss = "arcgis-sketch{}";
+const sketchCss = "arcgis-sketch{}";
 
 const ArcgisSketch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -15,6 +16,7 @@ const ArcgisSketch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.sketchUndo = createEvent(this, "sketchUndo", 7);
     this.sketchUpdate = createEvent(this, "sketchUpdate", 7);
     this.widgetReady = createEvent(this, "widgetReady", 7);
+    this._watchHandles = [];
     this.referenceElement = undefined;
     this.activeTool = undefined;
     this.availableCreateTools = undefined;
@@ -128,15 +130,15 @@ const ArcgisSketch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   //--------------------------------------------------------------------------
   async _addWatchers() {
     const { watch } = await importCoreReactiveUtils();
-    watch(() => this.widget.activeTool, (value) => (this.activeTool = value), {
+    addHandles(this, watch(() => this.widget.activeTool, (value) => (this.activeTool = value), {
       initial: true
-    });
-    watch(() => this.widget.createGraphic, (value) => (this.createGraphic = value), {
+    }));
+    addHandles(this, watch(() => this.widget.createGraphic, (value) => (this.createGraphic = value), {
       initial: true
-    });
-    watch(() => this.widget.updateGraphics, (value) => (this.updateGraphics = value), {
+    }));
+    addHandles(this, watch(() => this.widget.updateGraphics, (value) => (this.updateGraphics = value), {
       initial: true
-    });
+    }));
   }
   async _createParams() {
     const graphicsLayerProps = {
@@ -192,7 +194,7 @@ const ArcgisSketch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     "referenceElement": ["referenceElementWatcher"],
     "view": ["viewWatcher"]
   }; }
-  static get style() { return arcgisSketchCss; }
+  static get style() { return sketchCss; }
 }, [0, "arcgis-sketch", {
     "referenceElement": [1, "reference-element"],
     "activeTool": [1537, "active-tool"],

package/dist/components/arcgis-slice.js

@@ -1,15 +1,17 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { V as newWidgetsSlice, 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 { 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 arcgisSliceCss = "arcgis-slice{}";
+const sliceCss = "arcgis-slice{}";
 
 const ArcgisSlice$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.widgetReady = createEvent(this, "widgetReady", 7);
+    this._watchHandles = [];
     this.referenceElement = undefined;
     this.analysis = undefined;
     this.view = undefined;
@@ -74,9 +76,9 @@ const ArcgisSlice$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   //--------------------------------------------------------------------------
   async _addWatchers() {
     const { watch } = await importCoreReactiveUtils();
-    watch(() => this.widget.analysis, (value) => (this.analysis = value), {
+    addHandles(this, watch(() => this.widget.analysis, (value) => (this.analysis = value), {
       initial: true
-    });
+    }));
   }
   _createParams() {
     const params = {
@@ -94,7 +96,7 @@ const ArcgisSlice$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "referenceElement": ["referenceElementWatcher"],
     "view": ["viewWatcher"]
   }; }
-  static get style() { return arcgisSliceCss; }
+  static get style() { return sliceCss; }
 }, [0, "arcgis-slice", {
     "referenceElement": [1, "reference-element"],
     "analysis": [1040],

package/dist/components/arcgis-slider.js

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { W as newWidgetsSlider, i as importCoreReactiveUtils } from './index2.js';
-import { c as checkForView, o as onDisconnectedHelper } from './disconnected.js';
-import { d as defineCustomElement$2 } from './arcgis-expand2.js';
+import { 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 arcgisSliderCss = "arcgis-slider{min-width:200px;min-height:25px}";
+const sliderCss = "arcgis-slider{min-width:200px;min-height:25px}";
 
 const ArcgisSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -21,6 +22,7 @@ const ArcgisSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.sliderTickClick = createEvent(this, "sliderTickClick", 7);
     this.sliderTrackClick = createEvent(this, "sliderTrackClick", 7);
     this.widgetReady = createEvent(this, "widgetReady", 7);
+    this._watchHandles = [];
     this.referenceElement = undefined;
     this.draggableSegmentsEnabled = undefined;
     this.effectiveMax = undefined;
@@ -157,30 +159,30 @@ const ArcgisSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   //--------------------------------------------------------------------------
   async _addWatchers() {
     const { watch } = await importCoreReactiveUtils();
-    watch(() => this.widget.effectiveSegmentElements, (value) => (this.effectiveSegmentElements = value), {
+    addHandles(this, watch(() => this.widget.effectiveSegmentElements, (value) => (this.effectiveSegmentElements = value), {
       initial: true
-    });
-    watch(() => this.widget.labelElements, (value) => (this.labelElements = value), {
+    }));
+    addHandles(this, watch(() => this.widget.labelElements, (value) => (this.labelElements = value), {
       initial: true
-    });
-    watch(() => this.widget.maxLabelElement, (value) => (this.maxLabelElement = value), {
+    }));
+    addHandles(this, watch(() => this.widget.maxLabelElement, (value) => (this.maxLabelElement = value), {
       initial: true
-    });
-    watch(() => this.widget.minLabelElement, (value) => (this.minLabelElement = value), {
+    }));
+    addHandles(this, watch(() => this.widget.minLabelElement, (value) => (this.minLabelElement = value), {
       initial: true
-    });
-    watch(() => this.widget.segmentElements, (value) => (this.segmentElements = value), {
+    }));
+    addHandles(this, watch(() => this.widget.segmentElements, (value) => (this.segmentElements = value), {
       initial: true
-    });
-    watch(() => this.widget.thumbElements, (value) => (this.thumbElements = value), {
+    }));
+    addHandles(this, watch(() => this.widget.thumbElements, (value) => (this.thumbElements = value), {
       initial: true
-    });
-    watch(() => this.widget.tickElements, (value) => (this.tickElements = value), {
+    }));
+    addHandles(this, watch(() => this.widget.tickElements, (value) => (this.tickElements = value), {
       initial: true
-    });
-    watch(() => this.widget.trackElement, (value) => (this.trackElement = value), {
+    }));
+    addHandles(this, watch(() => this.widget.trackElement, (value) => (this.trackElement = value), {
       initial: true
-    });
+    }));
   }
   _createParams() {
     const params = {
@@ -224,7 +226,7 @@ const ArcgisSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     "tickConfigs": ["tickConfigsWatcher"],
     "values": ["valuesWatcher"]
   }; }
-  static get style() { return arcgisSliderCss; }
+  static get style() { return sliderCss; }
 }, [0, "arcgis-slider", {
     "referenceElement": [1, "reference-element"],
     "draggableSegmentsEnabled": [4, "draggable-segments-enabled"],

package/dist/components/arcgis-swipe.js

@@ -1,14 +1,16 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { X as newWidgetsSwipe } from './index2.js';
-import { r as referenceElementHelper, c as checkForView, o as onDisconnectedHelper } from './disconnected.js';
+import { r as referenceElementHelper, c as checkForView } from './component-utils.js';
+import { o as onDisconnectedHelper } from './disconnected.js';
 
-const arcgisSwipeCss = "arcgis-swipe{}";
+const swipeCss = "arcgis-swipe{}";
 
 const ArcgisSwipe$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.widgetReady = createEvent(this, "widgetReady", 7);
+    this._watchHandles = [];
     this.referenceElement = undefined;
     this.direction = undefined;
     this.dragLabel = undefined;
@@ -107,7 +109,7 @@ const ArcgisSwipe$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "referenceElement": ["referenceElementWatcher"],
     "view": ["viewWatcher"]
   }; }
-  static get style() { return arcgisSwipeCss; }
+  static get style() { return swipeCss; }
 }, [0, "arcgis-swipe", {
     "referenceElement": [1, "reference-element"],
     "direction": [1],

package/dist/components/arcgis-table-list.js

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { Y as newWidgetsTableList, 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 { 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 arcgisTableListCss = "arcgis-table-list{}";
+const tableListCss = "arcgis-table-list{}";
 
 const ArcgisTableList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -11,6 +12,7 @@ const ArcgisTableList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.__registerHost();
     this.triggerAction = createEvent(this, "triggerAction", 7);
     this.widgetReady = createEvent(this, "widgetReady", 7);
+    this._watchHandles = [];
     this.referenceElement = undefined;
     this.multipleSelectionEnabled = false;
     this.selectionEnabled = true;
@@ -81,8 +83,8 @@ const ArcgisTableList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   //--------------------------------------------------------------------------
   async _addWatchers() {
     const { watch } = await importCoreReactiveUtils();
-    watch(() => this.widget.selectedItems, (value) => (this.selectedItems = value));
-    watch(() => this.widget.tableItems, (value) => (this.tableItems = value));
+    addHandles(this, watch(() => this.widget.selectedItems, (value) => (this.selectedItems = value)));
+    addHandles(this, watch(() => this.widget.tableItems, (value) => (this.tableItems = value)));
   }
   _createParams() {
     const params = {
@@ -109,7 +111,7 @@ const ArcgisTableList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "referenceElement": ["referenceElementWatcher"],
     "view": ["viewWatcher"]
   }; }
-  static get style() { return arcgisTableListCss; }
+  static get style() { return tableListCss; }
 }, [0, "arcgis-table-list", {
     "referenceElement": [1, "reference-element"],
     "multipleSelectionEnabled": [4, "multiple-selection-enabled"],

package/dist/components/arcgis-time-slider.js

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { Z as newWidgetsTimeSlider, 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 { 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 arcgisTimeSliderCss = "arcgis-time-slider{}";
+const timeSliderCss = "arcgis-time-slider{}";
 
 const ArcgisTimeSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -11,6 +12,7 @@ const ArcgisTimeSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.__registerHost();
     this.triggerAction = createEvent(this, "triggerAction", 7);
     this.widgetReady = createEvent(this, "widgetReady", 7);
+    this._watchHandles = [];
     this.referenceElement = undefined;
     this.actions = undefined;
     this.effectiveStops = undefined;
@@ -145,9 +147,9 @@ const ArcgisTimeSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
   //--------------------------------------------------------------------------
   async _addWatchers() {
     const { watch } = await importCoreReactiveUtils();
-    watch(() => this.widget.effectiveStops, (value) => (this.effectiveStops = value), {
+    addHandles(this, watch(() => this.widget.effectiveStops, (value) => (this.effectiveStops = value), {
       initial: true
-    });
+    }));
   }
   _createParams() {
     const params = {
@@ -207,7 +209,7 @@ const ArcgisTimeSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     "referenceElement": ["referenceElementWatcher"],
     "view": ["viewWatcher"]
   }; }
-  static get style() { return arcgisTimeSliderCss; }
+  static get style() { return timeSliderCss; }
 }, [0, "arcgis-time-slider", {
     "referenceElement": [1, "reference-element"],
     "actions": [16],

package/dist/components/arcgis-track.js

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { _ as newWidgetsTrack, i as importCoreReactiveUtils } from './index2.js';
-import { r as referenceElementHelper, c as checkForView, o as onDisconnectedHelper } from './disconnected.js';
+import { r as referenceElementHelper, c as checkForView, a as addHandles } from './component-utils.js';
+import { o as onDisconnectedHelper } from './disconnected.js';
 
-const arcgisTrackCss = "";
+const trackCss = "";
 
 const ArcgisTrack$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -11,6 +12,7 @@ const ArcgisTrack$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.trackComplete = createEvent(this, "trackComplete", 7);
     this.trackError = createEvent(this, "trackError", 7);
     this.widgetReady = createEvent(this, "widgetReady", 7);
+    this._watchHandles = [];
     this.referenceElement = undefined;
     this.geolocationOptions = undefined;
     this.goToLocationEnabled = undefined;
@@ -94,9 +96,9 @@ const ArcgisTrack$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   //--------------------------------------------------------------------------
   async _addWatchers() {
     const { watch } = await importCoreReactiveUtils();
-    watch(() => this.widget.tracking, (value) => (this.tracking = value), {
+    addHandles(this, watch(() => this.widget.tracking, (value) => (this.tracking = value), {
       initial: true
-    });
+    }));
   }
   _createParams() {
     const params = {
@@ -137,7 +139,7 @@ const ArcgisTrack$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "referenceElement": ["referenceElementWatcher"],
     "view": ["viewWatcher"]
   }; }
-  static get style() { return arcgisTrackCss; }
+  static get style() { return trackCss; }
 }, [0, "arcgis-track", {
     "referenceElement": [1, "reference-element"],
     "geolocationOptions": [8, "geolocation-options"],

package/dist/components/arcgis-utility-network-associations.js

@@ -1,15 +1,17 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { $ as newWidgetsUtilityNetworkAssociations } from './index2.js';
-import { u as updateForView, c as checkForView, o as onDisconnectedHelper } from './disconnected.js';
-import { d as defineCustomElement$2 } from './arcgis-expand2.js';
+import { u as updateForView, c as checkForView } from './component-utils.js';
+import { o as onDisconnectedHelper } from './disconnected.js';
+import { d as defineCustomElement$2 } from './expand.js';
 
-const arcgisUtilityNetworkAssociationsCss = "arcgis-utility-network-associations{}";
+const utilityNetworkAssociationsCss = "arcgis-utility-network-associations{}";
 
 const ArcgisUtilityNetworkAssociations$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.widgetReady = createEvent(this, "widgetReady", 7);
+    this._watchHandles = [];
     this.referenceElement = undefined;
     this.autoRefreshAssociations = undefined;
     this.connectivityAssociationsLineSymbol = undefined;
@@ -211,7 +213,7 @@ const ArcgisUtilityNetworkAssociations$1 = /*@__PURE__*/ proxyCustomElement(clas
     "referenceElement": ["referenceElementWatcher"],
     "view": ["viewWatcher"]
   }; }
-  static get style() { return arcgisUtilityNetworkAssociationsCss; }
+  static get style() { return utilityNetworkAssociationsCss; }
 }, [0, "arcgis-utility-network-associations", {
     "referenceElement": [1, "reference-element"],
     "autoRefreshAssociations": [4, "auto-refresh-associations"],