@esri/solutions-components 5.1.0-next.15 → 5.1.0-next.150

package/dist/components/map-draw-tools/customElement.js

@@ -1,39 +1,78 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as r } from "../../chunks/runtime.js";
+import { c as h } from "../../chunks/runtime.js";
 import { u as c } from "../../chunks/useT9n.js";
-import { css as l, html as n } from "lit";
-import { createRef as d, ref as p } from "lit-html/directives/ref.js";
-import { LitElement as g, createEvent as o, noShadowRoot as m, safeClassMap as h } from "@arcgis/lumina";
-import { useContextConsumer as f } from "@arcgis/lumina/context";
-import { p as y } from "../../chunks/publicNotificationContext.js";
-import _ from "@arcgis/core/layers/GraphicsLayer";
-import k from "@arcgis/core/widgets/Sketch/SketchViewModel";
-import w from "@arcgis/core/widgets/Sketch";
-const u = l`@layer{:host{display:block}.border{outline:1px solid var(--calcite-color-border-input)}.border-left{border-left:1px solid rgba(110,110,110,.3)}.border-left[dir=rtl]{border-right:1px solid rgba(110,110,110,.3)}.esri-widget{box-sizing:border-box;color:#323232;font-size:14px;font-family:Avenir Next,Helvetica Neue,Helvetica,Arial,sans-serif;line-height:1.3em;background-color:#fff;--esri-widget-padding-v: 12px;--esri-widget-padding-h: 15px;--esri-widget-padding: var(--esri-widget-padding-v) var(--esri-widget-padding-h)}.esri-sketch__panel{align-items:center;display:flex;flex-flow:row wrap;padding:0;justify-content:flex-start!important}.esri-sketch__section{align-items:center;display:flex;flex-flow:row wrap;padding:0 7px;margin:6px 0}.esri-responsive-toolbar__bar--horizontal{--calcite-action-group-border-color: var(--calcite-color-border-3) !important}}`;
-class b extends g {
+import { css as n, html as l } from "lit";
+import { createRef as p, ref as d } from "lit-html/directives/ref.js";
+import { LitElement as m, createEvent as a, noShadowRoot as g, safeClassMap as o } from "@arcgis/lumina";
+import { useContextConsumer as u } from "@arcgis/lumina/context";
+import { p as _ } from "../../chunks/publicNotificationContext.js";
+import y from "@arcgis/core/layers/GraphicsLayer.js";
+const f = n`@layer{:host{display:block}.border{outline:1px solid var(--calcite-color-border-input)}.border-left{border-left:1px solid rgba(110,110,110,.3)}.border-left[dir=rtl]{border-right:1px solid rgba(110,110,110,.3)}.esri-widget{box-sizing:border-box;color:#323232;font-size:14px;font-family:Avenir Next,Helvetica Neue,Helvetica,Arial,sans-serif;line-height:1.3em;background-color:#fff;--esri-widget-padding-v: 12px;--esri-widget-padding-h: 15px;--esri-widget-padding: var(--esri-widget-padding-v) var(--esri-widget-padding-h)}.esri-sketch__panel{align-items:center;display:flex;flex-flow:row wrap;padding:0;justify-content:flex-start!important}.esri-sketch__section{align-items:center;display:flex;flex-flow:row wrap;padding:0 7px;margin:6px 0}.esri-responsive-toolbar__bar--horizontal{--calcite-action-group-border-color: var(--calcite-color-border-3) !important}}`;
+class k extends m {
   constructor() {
-    super(...arguments), this.active = !1, this.drawMode = "SKETCH", this.editGraphicsEnabled = !0, this.graphics = [], this.redoEnabled = !1, this.undoEnabled = !1, this._translations = c({ name: "map-draw-tools", blocking: !0 }), this._pnContextConsumer = f({
-      context: y,
+    super(...arguments), this.active = !1, this.drawMode = "SKETCH", this.editGraphicsEnabled = !0, this.graphics = [], this.redoEnabled = !1, this.undoEnabled = !1, this._translations = c({ name: "map-draw-tools", blocking: !0 }), this._pnContextConsumer = u({
+      context: _,
       subscribe: !0
-    }), this._sketchElement = d(), this.selectionLoadingChange = o(), this.sketchGraphicsChange = o(), this.drawUndo = o(), this.drawRedo = o();
+    }), this._sketchComponent = p(), this._forceCreate = !1, this.selectionLoadingChange = a(), this.sketchGraphicsChange = a(), this.drawUndo = a(), this.drawRedo = a(), this._onSketchReady = async () => {
+      await new Promise((t) => setTimeout(t, 50)), this._sketchComponent.value?.getElementsByTagName("calcite-popover")[0]?.setAttribute("placement", "auto");
+    }, this._onSketchCreate = (e) => {
+      const t = e.detail;
+      t.state === "complete" && (this.graphics = t.graphic ? [t.graphic] : [], this.sketchGraphicsChange.emit({
+        graphics: this.graphics,
+        useOIDs: !1
+      }), this.drawMode === "REFINE" && (this._forceCreate = !0, this._sketchComponent.value?.create(t.tool))), t.state === "cancel" && this.drawMode === "REFINE" && this._forceCreate && (this._forceCreate = !this._forceCreate, this._sketchComponent.value?.create(t.tool));
+    }, this._onSketchUpdate = (e) => {
+      if (!this.editGraphicsEnabled) {
+        this._sketchComponent.value?.cancel();
+        return;
+      }
+      const t = e.detail, i = t.toolEventInfo?.type;
+      (t.state === "active" && i === "update" || i === "move" || i === "reshape-stop" || i === "move-stop") && (clearTimeout(this._debounceTimer), this._debounceTimer = window.setTimeout(() => {
+        this.graphics = t.graphics, this.sketchGraphicsChange.emit({
+          graphics: this.graphics,
+          useOIDs: !1
+        });
+      }, 1e3));
+    }, this._onSketchDelete = () => {
+      this.graphics = [], this.sketchGraphicsChange.emit({
+        graphics: this.graphics,
+        useOIDs: !1
+      });
+    }, this._onSketchUndo = (e) => {
+      if (this._sketchComponent.value?.state === "active")
+        return;
+      const t = e.detail;
+      this.graphics = t.graphics, this.sketchGraphicsChange.emit({
+        graphics: this.graphics,
+        useOIDs: !1
+      });
+    }, this._onSketchRedo = (e) => {
+      if (this._sketchComponent.value?.state === "active")
+        return;
+      const t = e.detail;
+      t.graphics[0].geometry && (this.graphics = t.graphics, this.sketchGraphicsChange.emit({
+        graphics: this.graphics,
+        useOIDs: !1
+      }));
+    };
   }
   static {
     this.properties = { active: 5, drawMode: 1, editGraphicsEnabled: 5, graphics: 0, mapView: 0, pointSymbol: 0, polylineSymbol: 0, polygonSymbol: 0, redoEnabled: 5, undoEnabled: 5, _translations: 16, _selectionMode: 16 };
   }
   static {
-    this.styles = u;
+    this.styles = f;
   }
   static {
-    this.shadowRootOptions = m;
+    this.shadowRootOptions = g;
   }
   willUpdate(e) {
     e.has("graphics") && this.graphicsWatchHandler(this.graphics, e.get("graphics")), e.has("mapView") && this.mapView && this.mapViewWatchHandler(this.mapView, e.get("mapView"));
   }
-  graphicsWatchHandler(e, i) {
-    e && e.length > 0 && JSON.stringify(e) !== JSON.stringify(i) && this._sketchGraphicsLayer && (this._updateGraphicsSymbols(e), this._sketchGraphicsLayer.removeAll(), this._sketchGraphicsLayer.addMany(e));
+  graphicsWatchHandler(e, t) {
+    e && e.length > 0 && JSON.stringify(e) !== JSON.stringify(t) && this._sketchGraphicsLayer && (this._updateGraphicsSymbols(e), this._sketchGraphicsLayer.removeAll(), this._sketchGraphicsLayer.addMany(e));
   }
-  mapViewWatchHandler(e, i) {
-    e && e !== i && this._init();
+  mapViewWatchHandler(e, t) {
+    e && e !== t && this._init();
   }
   async clear() {
     this._clearSketch();
@@ -45,101 +84,34 @@ class b extends g {
     this._init();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._sketchWidget?.cancel(), this._clearSketch();
+    super.disconnectedCallback(), this._sketchComponent.value?.cancel(), this._clearSketch();
   }
   render() {
-    const e = this.drawMode === "SKETCH" ? "border" : "border esri-widget esri-sketch__panel", i = this.drawMode === "SKETCH" ? "display-none" : "esri-widget esri-sketch__panel border-left esri-sketch__section";
-    return n`<div class=${h(e)}><div ${p(this._sketchElement)}></div><div class=${h(i)}><calcite-action appearance=solid .disabled=${!this.undoEnabled} icon=undo @click=${() => this._undo()} scale=s .text=${this._translations.undo}></calcite-action><calcite-action appearance=solid .disabled=${!this.redoEnabled} icon=redo @click=${() => this._redo()} scale=s .text=${this._translations.redo}></calcite-action></div></div>`;
+    const e = this.drawMode === "SKETCH" ? "border" : "border esri-widget esri-sketch__panel", t = this.drawMode === "SKETCH" ? "display-none" : "esri-widget esri-sketch__panel border-left esri-sketch__section";
+    return l`<div class=${o(e)}><arcgis-sketch @arcgisReady=${this._onSketchReady} @arcgisCreate=${this._onSketchCreate} @arcgisUpdate=${this._onSketchUpdate} @arcgisDelete=${this._onSketchDelete} @arcgisUndo=${this._onSketchUndo} @arcgisRedo=${this._onSketchRedo} use-legacy-create-tools ${d(this._sketchComponent)}></arcgis-sketch><div class=${o(t)}><calcite-action .disabled=${!this.undoEnabled} icon=undo @click=${() => this._undo()} scale=s .text=${this._translations.undo}></calcite-action><calcite-action .disabled=${!this.redoEnabled} icon=redo @click=${() => this._redo()} scale=s .text=${this._translations.redo}></calcite-action></div></div>`;
   }
   _init() {
-    this.mapView && this._sketchElement.value && (this._initGraphicsLayer(), this._initSketch());
+    this.mapView && (this._initGraphicsLayer(), this._initSketch());
   }
   _initGraphicsLayer() {
-    const e = this._pnContextConsumer.value, i = this._translations.sketchLayer;
+    const e = this._pnContextConsumer.value, t = this._translations.sketchLayer;
     if (this.mapView) {
-      const s = this.mapView.map.layers.findIndex((t) => t.title === i);
-      s > -1 ? this._sketchGraphicsLayer = this.mapView.map.layers.getItemAt(s) : (this._sketchGraphicsLayer = new _({ title: i, listMode: "hide" }), this._sketchGraphicsLayer && (e.managedLayers[i] = "sketch", this.mapView.map.layers.add(this._sketchGraphicsLayer))), this.graphics && this.graphics.length > 0 && this._sketchGraphicsLayer && this._sketchGraphicsLayer.addMany(this.graphics);
+      const i = this.mapView.map.layers.findIndex((s) => s.title === t);
+      i > -1 ? this._sketchGraphicsLayer = this.mapView.map.layers.getItemAt(i) : (this._sketchGraphicsLayer = new y({ title: t, listMode: "hide" }), this._sketchGraphicsLayer && (e.managedLayers[t] = "sketch", this.mapView.map.layers.add(this._sketchGraphicsLayer))), this.graphics && this.graphics.length > 0 && this._sketchGraphicsLayer && this._sketchGraphicsLayer.addMany(this.graphics);
     }
   }
   _initSketch() {
-    const e = {
-      layer: this._sketchGraphicsLayer,
-      view: this.mapView,
-      defaultCreateOptions: {
-        mode: "hybrid"
-      },
-      defaultUpdateOptions: {
-        preserveAspectRatio: !1,
-        enableScaling: !1,
-        enableRotation: !1,
-        tool: "reshape",
-        toggleToolOnClick: !1
-      }
-    };
-    if (this._sketchWidget = new w({
-      ...e,
-      container: this._sketchElement.value,
-      creationMode: "single",
-      toolbarKind: "docked",
-      useLegacyCreateTools: !0,
-      visibleElements: {
-        duplicateButton: !1,
-        selectionTools: {
-          "lasso-selection": !1,
-          "rectangle-selection": !1
-        },
-        createTools: {
-          circle: !1
-        },
-        undoRedoMenu: !1,
-        settingsMenu: this.drawMode === "SKETCH"
-      }
-    }), this._sketchWidget && this._sketchWidget.viewModel) {
-      this._sketchViewModel = new k({
-        ...e
-      }), this.polylineSymbol && (this._sketchWidget.viewModel.polylineSymbol = this.polylineSymbol), this.pointSymbol && (this._sketchWidget.viewModel.pointSymbol = this.pointSymbol), this.polygonSymbol && (this._sketchWidget.viewModel.polygonSymbol = this.polygonSymbol), this._sketchWidget?.when(async () => {
-        await new Promise((a) => setTimeout(a, 50)), this._sketchElement.value?.getElementsByTagName("calcite-popover")[0]?.setAttribute("placement", "auto");
-      });
-      let i = !1;
-      this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("create", (t) => {
-        t.state === "complete" && (this.graphics = t.graphic ? [t.graphic] : [], this.sketchGraphicsChange.emit({
-          graphics: this.graphics,
-          useOIDs: !1
-        }), this.drawMode === "REFINE" && (i = !0, this._sketchWidget?.viewModel.create(t.tool))), t.state === "cancel" && this.drawMode === "REFINE" && i && (i = !i, this._sketchWidget?.viewModel.create(t.tool));
-      }));
-      let s;
-      this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("update", (t) => {
-        if (!this.editGraphicsEnabled)
-          this._sketchWidget?.viewModel.cancel(), this._sketchViewModel?.cancel();
-        else {
-          const a = t?.toolEventInfo?.type;
-          (a === "move" || a === "reshape-stop" || a === "move-stop") && (clearTimeout(s), s = window.setTimeout(async () => {
-            this.graphics = t.graphics, this.sketchGraphicsChange.emit({
-              graphics: this.graphics,
-              useOIDs: !1
-            });
-          }, 1e3));
-        }
-      })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("delete", () => {
-        this.graphics = [], this.sketchGraphicsChange.emit({
-          graphics: this.graphics,
-          useOIDs: !1
-        });
-      })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("undo", (t) => {
-        this.graphics = t.graphics, this.sketchGraphicsChange.emit({
-          graphics: this.graphics,
-          useOIDs: !1
-        });
-      })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("redo", (t) => {
-        this.graphics = t.graphics, this.sketchGraphicsChange.emit({
-          graphics: this.graphics,
-          useOIDs: !1
-        });
-      }));
-    }
+    const e = this._sketchComponent.value;
+    e && (e.view = this.mapView, e.layer = this._sketchGraphicsLayer, e.creationMode = "single", e.toolbarKind = "docked", e.defaultCreateOptions = { mode: "hybrid" }, e.defaultUpdateOptions = {
+      preserveAspectRatio: !1,
+      enableScaling: !1,
+      enableRotation: !1,
+      tool: "reshape",
+      toggleToolOnClick: !1
+    }, e.hideDuplicateButton = !0, e.hideSelectionToolsLassoSelection = !0, e.hideSelectionToolsRectangleSelection = !0, e.hideCreateToolsCircle = !0, e.hideUndoRedoMenu = !0, e.hideSettingsMenu = this.drawMode !== "SKETCH", this.pointSymbol ? e.pointSymbol = this.pointSymbol : this.polylineSymbol ? e.polylineSymbol = this.polylineSymbol : this.polygonSymbol && (e.polygonSymbol = this.polygonSymbol));
   }
   _clearSketch() {
-    this._sketchWidget?.viewModel.cancel(), this.graphics = [], this._sketchGraphicsLayer?.removeAll();
+    this._sketchComponent.value?.cancel(), this.graphics = [], this._sketchGraphicsLayer?.removeAll();
   }
   _undo() {
     this.drawUndo.emit();
@@ -149,21 +121,15 @@ class b extends g {
   }
   _updateGraphics() {
     setTimeout(() => {
-      this.graphics.length === 1 && this._sketchWidget && this._sketchWidget.update(this.graphics, {
-        tool: "reshape",
-        enableRotation: !1,
-        enableScaling: !1,
-        preserveAspectRatio: !1,
-        toggleToolOnClick: !1
-      });
+      this.graphics.length === 1 && this.graphics[0].geometry && this._sketchComponent.value && this._sketchComponent.value.triggerUpdate(this.graphics);
     }, 100);
   }
   _updateGraphicsSymbols(e) {
-    const s = e[0]?.geometry?.type, t = s === "point" ? this.pointSymbol : s === "polyline" ? this.polylineSymbol : s === "polygon" ? this.polygonSymbol : void 0;
-    t && e.forEach((a) => a.symbol = t);
+    const i = e[0]?.geometry?.type, s = i === "point" ? this.pointSymbol : i === "polyline" ? this.polylineSymbol : i === "polygon" ? this.polygonSymbol : void 0;
+    s && e.forEach((r) => r.symbol = s);
   }
 }
-r("map-draw-tools", b);
+h("map-draw-tools", k);
 export {
-  b as MapDrawTools
+  k as MapDrawTools
 };

package/dist/components/map-draw-tools/index.js

@@ -1,2 +1,3 @@
+import "@arcgis/map-components/components/arcgis-sketch";
 import "@esri/calcite-components/components/calcite-action";
 export * from "./customElement.js";

package/dist/components/map-floor-filter/customElement.d.ts

@@ -1,6 +1,8 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Ref } from "lit-html/directives/ref.js";
+import type { ArcgisFloorFilter as ArcgisFloorFilter2 } from "@arcgis/map-components/components/arcgis-floor-filter";
 
 export abstract class MapFloorFilter extends LitElement {
   /**
@@ -9,14 +11,10 @@ export abstract class MapFloorFilter extends LitElement {
    * @default false
    */
   accessor enabled: boolean;
-  /**
-   * esri/widgets/FloorFilter: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-FloorFilter.html
-   *
-   * FloorFilter instance
-   */
-  accessor floorFilterWidget: __esri.FloorFilter | undefined;
+  /** Reference to the floor filter web component */
+  accessor floorFilterRef: Ref<ArcgisFloorFilter2>;
   /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
   /** Emitted on demand when the Facility is changed */
   readonly facilityChanged: import("@arcgis/lumina").TargetedEvent<this, string>;
   /** Emitted on demand when the Level is changed */

package/dist/components/map-floor-filter/customElement.js

@@ -1,59 +1,36 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as o } from "../../chunks/runtime.js";
-import { css as s, html as a } from "lit";
-import { createRef as h, ref as n } from "lit-html/directives/ref.js";
-import { LitElement as d, createEvent as l } from "@arcgis/lumina";
-import f from "@arcgis/core/widgets/FloorFilter";
-import * as r from "@arcgis/core/core/reactiveUtils";
-const m = s`:host{display:block}`;
-class c extends d {
+import { c as l } from "../../chunks/runtime.js";
+import { css as r, html as s } from "lit";
+import { createRef as o, ref as a } from "lit-html/directives/ref.js";
+import { LitElement as f, createEvent as t } from "@arcgis/lumina";
+import * as i from "@arcgis/core/core/reactiveUtils.js";
+const h = r`:host{display:block}`;
+class c extends f {
   constructor() {
-    super(...arguments), this.enabled = !1, this._floorFilterElement = h(), this.facilityChanged = l(), this.levelChanged = l(), this.siteChanged = l();
+    super(...arguments), this.enabled = !1, this.floorFilterRef = o(), this.facilityChanged = t(), this.levelChanged = t(), this.siteChanged = t(), this._floorFilterReady = () => {
+      this.floorFilterRef.value && (this._facilityHandle?.remove(), this._facilityHandle = i.watch(() => this.floorFilterRef.value?.facility, (e) => {
+        e && this.facilityChanged.emit(e);
+      }), this._levelHandle?.remove(), this._levelHandle = i.watch(() => this.floorFilterRef.value?.level, (e) => {
+        e && this.levelChanged.emit(e);
+      }), this._siteHandle?.remove(), this._siteHandle = i.watch(() => this.floorFilterRef.value?.site, (e) => {
+        e && this.siteChanged.emit(e);
+      }));
+    };
   }
   static {
-    this.properties = { enabled: 5, floorFilterWidget: 0, mapView: 0 };
+    this.properties = { enabled: 5, floorFilterRef: 0, mapView: 0 };
   }
   static {
-    this.styles = m;
-  }
-  willUpdate(t) {
-    t.has("mapView") && this.mapViewWatchHandler(), t.has("enabled") && this.enabledWatchHandler();
-  }
-  async mapViewWatchHandler() {
-    this.mapView && await this._initFloorFilter(this.mapView);
-  }
-  async enabledWatchHandler() {
-    this.enabled ? this.mapView && await this._initFloorFilter(this.mapView) : this.enabled || this._destroyWidget();
+    this.styles = h;
   }
   render() {
-    return a`<div ${n(this._floorFilterElement)}></div>`;
+    return this.enabled && this.mapView && s`<arcgis-floor-filter auto-destroy-disabled .view=${this.mapView} @arcgisReady=${this._floorFilterReady} ${a(this.floorFilterRef)}></arcgis-floor-filter>` || "";
   }
-  async loaded() {
-    this.mapView && !this.floorFilterWidget && await this._initFloorFilter(this.mapView);
-  }
-  _destroyWidget() {
-    this.floorFilterWidget && (this.floorFilterWidget.destroy(), this.floorFilterWidget = void 0), this._floorFilterElement.value && this._floorFilterElement.value.remove();
-  }
-  _initContainer() {
-    this._destroyWidget(), this._floorFilterElement && (this._floorFilterElement.value = document.createElement("div"));
-  }
-  async _initFloorFilter(t) {
-    const i = t?.map;
-    i && await i.when(() => {
-      t && this.enabled && i?.floorInfo && (this._initContainer(), this.floorFilterWidget = new f({
-        container: this._floorFilterElement.value,
-        view: t
-      }), this._facilityHandle?.remove(), this._facilityHandle = r?.watch(() => this.floorFilterWidget?.facility, (e) => {
-        e && this.facilityChanged.emit(e);
-      }), this._levelHandle?.remove(), this._levelHandle = r.watch(() => this.floorFilterWidget?.level, (e) => {
-        e && this.levelChanged.emit(e);
-      }), this._siteHandle?.remove(), this._siteHandle = r.watch(() => this.floorFilterWidget?.site, (e) => {
-        e && this.siteChanged.emit(e);
-      }));
-    });
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.floorFilterRef.value && this.floorFilterRef.value.destroy();
   }
 }
-o("map-floor-filter", c);
+l("map-floor-filter", c);
 export {
   c as MapFloorFilter
 };

package/dist/components/map-floor-filter/index.js

@@ -1 +1,2 @@
+import "@arcgis/map-components/components/arcgis-floor-filter";
 export * from "./customElement.js";

package/dist/components/map-fullscreen/customElement.d.ts

@@ -1,12 +1,14 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Ref } from "lit-html/directives/ref.js";
+import type { ArcgisFullscreen as ArcgisFullscreen2 } from "@arcgis/map-components/components/arcgis-fullscreen";
 
 export abstract class MapFullscreen extends LitElement {
-  /** esri/widgets/Fullscreen: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Fullscreen.html */
-  accessor fullscreenWidget: __esri.Fullscreen | undefined;
+  /** arcgis-fullscreen web component ref */
+  accessor fullscreenRef: Ref<ArcgisFullscreen2>;
   /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
   /** Emitted on demand when the fullscreen widget state has changed */
   readonly fullscreenStateChange: import("@arcgis/lumina").TargetedEvent<this, string>;
   readonly "@eventTypes": {

package/dist/components/map-fullscreen/customElement.js

@@ -1,47 +1,27 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as t } from "../../chunks/runtime.js";
-import { css as i, html as s } from "lit";
-import { createRef as l, ref as a } from "lit-html/directives/ref.js";
-import { LitElement as n, createEvent as r } from "@arcgis/lumina";
-import c from "@arcgis/core/widgets/Fullscreen";
-import * as h from "@arcgis/core/core/reactiveUtils";
-const d = i`:host{display:block}`;
-class m extends n {
+import { c as s } from "../../chunks/runtime.js";
+import { css as t, html as r } from "lit";
+import { createRef as l, ref as i } from "lit-html/directives/ref.js";
+import { LitElement as c, createEvent as a } from "@arcgis/lumina";
+import * as n from "@arcgis/core/core/reactiveUtils.js";
+const f = t`:host{display:block}`;
+class m extends c {
   constructor() {
-    super(...arguments), this._fullscreenElement = l(), this.fullscreenStateChange = r();
+    super(...arguments), this.fullscreenRef = l(), this.fullscreenStateChange = a(), this._fullscreenReady = () => {
+      n.watch(() => this.fullscreenRef.value?.state, (e) => e && this.fullscreenStateChange.emit(e));
+    };
   }
   static {
-    this.properties = { mapView: 0, fullscreenWidget: 0 };
+    this.properties = { mapView: 0, fullscreenRef: 0 };
   }
   static {
-    this.styles = d;
-  }
-  willUpdate(e) {
-    e.has("mapView") && this.mapViewWatchHandler();
-  }
-  async mapViewWatchHandler() {
-    await this.mapView?.when(async () => {
-      await this._initFullscreenWidget();
-    });
+    this.styles = f;
   }
   render() {
-    return s`<div class="fullscreen-widget" ${a(this._fullscreenElement)}></div>`;
-  }
-  async updated() {
-    this.hasUpdated || await this._initFullscreenWidget();
-  }
-  async loaded() {
-    await this._initFullscreenWidget();
-  }
-  async _initFullscreenWidget() {
-    this.mapView && this._fullscreenElement.value && !this.fullscreenWidget ? (this.fullscreenWidget = new c({
-      view: this.mapView
-    }), await this.fullscreenWidget?.when(() => {
-      this._fullscreenStateChangeHandle && this._fullscreenStateChangeHandle.remove(), this._fullscreenStateChangeHandle = h?.watch(() => this.fullscreenWidget?.viewModel.state, (e) => e && this.fullscreenStateChange.emit(e));
-    })) : this.fullscreenWidget && (this.fullscreenWidget.view = this.mapView);
+    return this.mapView && r`<arcgis-fullscreen visual-scale=m .view=${this.mapView} @arcgisReady=${this._fullscreenReady} ${i(this.fullscreenRef)}></arcgis-fullscreen>` || "";
   }
 }
-t("map-fullscreen", m);
+s("map-fullscreen", m);
 export {
   m as MapFullscreen
 };

package/dist/components/map-fullscreen/index.js

@@ -1 +1,2 @@
+import "@arcgis/map-components/components/arcgis-fullscreen";
 export * from "./customElement.js";

package/dist/components/map-layer-picker/customElement.d.ts

@@ -1,5 +1,5 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { IBeforeLayerSelectionChange } from "../../utils/interfaces.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Icon as Icon } from "@esri/calcite-components/components/calcite-icon";
@@ -67,7 +67,7 @@ export abstract class MapLayerPicker extends LitElement {
    */
   accessor isMobile: boolean;
   /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
   /** string: optional placeholder icon used with 'combobox' type */
   accessor placeholderIcon: Icon["icon"] | undefined;
   /**

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

@@ -1,7 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as m } from "../../chunks/runtime.js";
-import { g as y, d as b, f as _ } from "../../chunks/mapViewUtils.js";
-import { u as f } from "../../chunks/useT9n.js";
+import { g as y, d as b, f } from "../../chunks/mapViewUtils.js";
+import { u as _ } from "../../chunks/useT9n.js";
 import { css as u, html as i, nothing as l } from "lit";
 import { createRef as o, ref as d } from "lit-html/directives/ref.js";
 import { LitElement as g, createEvent as n, noShadowRoot as L, safeStyleMap as c, safeClassMap as p } from "@arcgis/lumina";
@@ -10,10 +10,10 @@ import { p as v } from "../../chunks/publicNotificationContext.js";
 const I = u`@layer{:host{display:block}.map-layer-picker-container{width:100%;align-items:center}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}.disabled{cursor:default!important;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.no-bottom-margin{--calcite-label-margin-bottom: 0px}.layer-picker-label-container{align-items:center;display:inline-flex;height:100%;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.cursor-default{cursor:default}.popover-list{overflow:auto;width:250px}}`;
 class $ extends g {
   constructor() {
-    super(), this.appearance = "transparent", this.configLayerOrderDefined = !1, this.defaultLayerId = "", this.disabled = !1, this.display = "inline-block", this.enabledLayerIds = [], this.isMobile = !1, this.showOnlyUpdatableLayers = !1, this.selectedIds = [], this.scale = "m", this.showTables = !1, this.showTablesDisabled = !1, this.showSingleLayerAsLabel = !1, this.type = "select", this.showLayersListInPopover = !1, this.referenceElement = "", this.force = !1, this._hasMultipleLayers = !0, this._hasValidLayers = !0, this._isDropdownOpen = !1, this.ids = [], this.selectedName = "", this._translations = f({ name: "map-layer-picker", blocking: !0 }), this.defaultLayerHonored = !1, this._layerSelectElement = o(), this._layerComboboxElement = o(), this._pnContextConsumer = w({
+    super(), this.appearance = "transparent", this.configLayerOrderDefined = !1, this.defaultLayerId = "", this.disabled = !1, this.display = "inline-block", this.enabledLayerIds = [], this.isMobile = !1, this.showOnlyUpdatableLayers = !1, this.selectedIds = [], this.scale = "m", this.showTables = !1, this.showTablesDisabled = !1, this.showSingleLayerAsLabel = !1, this.type = "select", this.showLayersListInPopover = !1, this.referenceElement = "", this.force = !1, this._hasMultipleLayers = !0, this._hasValidLayers = !0, this._isDropdownOpen = !1, this.ids = [], this.selectedName = "", this._translations = _({ name: "map-layer-picker", blocking: !0 }), this.defaultLayerHonored = !1, this._layerSelectElement = o(), this._layerComboboxElement = o(), this._pnContextConsumer = w({
       context: v,
       subscribe: !0
-    }), this._skipEditCheck = !1, this._popover = o(), this.beforeLayerSelectionChange = n(), this.idsFound = n(), this.noLayersFound = n(), this.layerSelectionChange = n(), this.listenOn(window, "mapChanged", this.mapChanged);
+    }), this._skipEditCheck = !1, this._popover = o(), this.beforeLayerSelectionChange = n(), this.idsFound = n(), this.noLayersFound = n(), this.layerSelectionChange = n(), this.listenOn(window, "mapChanged", this.mapChanged), this.listenOn(window, "requestLayerSelectionChange", this.requestLayerSelectionChange);
   }
   static {
     this.properties = { appearance: 1, configLayerOrderDefined: 5, defaultLayerId: 1, disabled: 5, display: 1, enabledLayerIds: 0, height: 9, isMobile: 5, mapView: 0, showOnlyUpdatableLayers: 5, placeholderIcon: 1, selectedIds: 0, scale: 1, showTables: 5, showTablesDisabled: 5, showSingleLayerAsLabel: 5, type: 1, showLayersListInPopover: 5, referenceElement: 1, force: 16, _hasMultipleLayers: 16, _hasValidLayers: 16, _isDropdownOpen: 16, ids: 16, selectedName: 16, _translations: 16 };
@@ -53,7 +53,12 @@ class $ extends g {
     await this._setSelectedLayer(this.ids[0]);
   }
   async mapChanged(e) {
-    e.detail.isValid || (this._hasValidLayers = !1, this.noLayersFound.emit());
+    const t = e.detail.isValid;
+    t && !this._hasValidLayers ? await this.load() : t || (this._hasValidLayers = !1, this.noLayersFound.emit());
+  }
+  async requestLayerSelectionChange(e) {
+    const t = e.detail;
+    await this._setSelectedLayer(t);
   }
   async load() {
     await this._setLayers(), this.ids?.length > 0 ? (this._hasValidLayers = !0, this._hasMultipleLayers = this.ids.length > 1, this.defaultLayerId || await this._setSelectedLayer(this.ids[0])) : this.mapView && (this._hasValidLayers = !1, this.noLayersFound.emit());
@@ -81,7 +86,7 @@ class $ extends g {
   }
   _getSingleLayerPlaceholder() {
     const e = this._getItemTypeIcon();
-    return i`<div class="layer-picker-label-container cursor-default"><calcite-icon .icon=${e} scale=s></calcite-icon><calcite-label class="no-bottom-margin padding-start-1">${this.selectedName}</calcite-label></div>`;
+    return i`<div class="layer-picker-label-container cursor-default"><calcite-icon aria-hidden=true .icon=${e} scale=s></calcite-icon><calcite-label class="no-bottom-margin padding-start-1">${this.selectedName}</calcite-label></div>`;
   }
   _getSelect(e) {
     return i`<calcite-select .disabled=${this.disabled} id=${e ?? l} label @calciteSelectChange=${() => this._layerSelectionChange()} .scale=${this.scale} ${d(this._layerElement)}>${this._getMapLayerOptions()}</calcite-select>`;
@@ -93,7 +98,7 @@ class $ extends g {
     return i`<calcite-dropdown class="layer-picker-dropdown" @calciteDropdownBeforeClose=${() => this._isDropdownOpen = !1} @calciteDropdownBeforeOpen=${() => this._isDropdownOpen = !0}>${this.isMobile ? this._getDropdownButton() : this._getActionDropdownButton(e)}<calcite-dropdown-group selection-mode=single>${this._getMapLayerOptions()}</calcite-dropdown-group></calcite-dropdown>`;
   }
   _getActionDropdownButton(e) {
-    return i`<calcite-action appearance=solid id=${e ?? l} slot=trigger text>${this._getDropdownButton()}</calcite-action>`;
+    return i`<calcite-action id=${e ?? l} slot=trigger .text=${this.selectedName}>${this._getDropdownButton()}</calcite-action>`;
   }
   _getDropdownButton() {
     const e = this._getItemTypeIcon(), t = this.isMobile ? "" : "max-width-350", s = this.isMobile ? "trigger" : "", a = this._isDropdownOpen ? "chevron-up" : "chevron-down";
@@ -151,7 +156,7 @@ class $ extends g {
     return Object.keys(e).filter((t) => e[t].supportsUpdate);
   }
   async _initLayerTableHash() {
-    this._layerNameHash = this.mapView && await b(this.mapView, this.showOnlyUpdatableLayers), this._tableNameHash = this.showTables && this.mapView ? await _(this.mapView, this.showOnlyUpdatableLayers) : {};
+    this._layerNameHash = this.mapView && await b(this.mapView, this.showOnlyUpdatableLayers), this._tableNameHash = this.showTables && this.mapView ? await f(this.mapView, this.showOnlyUpdatableLayers) : {};
   }
   _validLayer(e) {
     const t = this._pnContextConsumer.value, s = this._layerNameHash && this._layerNameHash[e]?.name;
@@ -165,7 +170,7 @@ class $ extends g {
     if (this._layerElement.value) {
       const t = e || (Array.isArray(this._layerElement.value.value) ? this._layerElement.value.value : [this._layerElement.value.value]);
       if (JSON.stringify(t) !== JSON.stringify([""])) {
-        if (!this._skipEditCheck && this.beforeLayerSelectionChange.emit({
+        if (JSON.stringify(t) === JSON.stringify(this.selectedIds) || !this._skipEditCheck && this.beforeLayerSelectionChange.emit({
           currentIds: this.selectedIds,
           newIds: t,
           ref: this.el

package/dist/components/map-legend/customElement.d.ts

@@ -1,14 +1,12 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Ref } from "lit-html/directives/ref.js";
+import type { ArcgisLegend as ArcgisLegend2 } from "@arcgis/map-components/components/arcgis-legend";
 
 export abstract class MapLegend extends LitElement {
-  /**
-   * esri/widgets/Legend: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend.html
-   *
-   * Legend instance
-   */
-  accessor legendWidget: __esri.Legend | undefined;
+  /** arcgis-legend web component ref */
+  accessor legendRef: Ref<ArcgisLegend2>;
   /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
 }

package/dist/components/map-legend/customElement.js

@@ -1,43 +1,27 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as t } from "../../chunks/runtime.js";
-import { css as i, html as s } from "lit";
-import { createRef as n, ref as a } from "lit-html/directives/ref.js";
-import { LitElement as r } from "@arcgis/lumina";
-import d from "@arcgis/core/widgets/Legend";
-const m = i`:host{display:block}`;
-class l extends r {
+import { c as e } from "../../chunks/runtime.js";
+import { css as t, html as s } from "lit";
+import { createRef as i, ref as r } from "lit-html/directives/ref.js";
+import { LitElement as l } from "@arcgis/lumina";
+const n = t`:host{display:block}`;
+class o extends l {
   constructor() {
-    super(...arguments), this._legendElement = n();
+    super(...arguments), this.legendRef = i();
   }
   static {
-    this.properties = { mapView: 0, legendWidget: 0 };
+    this.properties = { mapView: 0, legendRef: 0 };
   }
   static {
-    this.styles = m;
-  }
-  willUpdate(e) {
-    e.has("mapView") && this.mapViewWatchHandler();
-  }
-  async mapViewWatchHandler() {
-    await this.mapView?.when(() => {
-      this.mapView && this._initLegend(this.mapView);
-    });
+    this.styles = n;
   }
   render() {
-    return s`<div ${a(this._legendElement)}></div>`;
-  }
-  async loaded() {
-    this.mapView && await this.mapViewWatchHandler();
+    return this.mapView && s`<arcgis-legend auto-destroy-disabled respect-layer-definition-expression .view=${this.mapView} ${r(this.legendRef)}></arcgis-legend>` || "";
   }
-  _initLegend(e) {
-    e && (this.legendWidget ? this.legendWidget.view = e : this.legendWidget = new d({
-      container: this._legendElement.value,
-      respectLayerDefinitionExpression: !0,
-      view: e
-    }));
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.legendRef.value && this.legendRef.value.destroy();
   }
 }
-t("map-legend", l);
+e("map-legend", o);
 export {
-  l as MapLegend
+  o as MapLegend
 };