@esri/solutions-components 5.1.0-next.110 → 5.1.0-next.111

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

@@ -23,6 +23,8 @@ export abstract class MapCard extends LitElement {
       featureEditLimitNotice: string;
       clearSelection: string;
       share: string;
+      copy: string;
+      paste: string;
   } & T9nMeta<{
       mapName: string;
       more: string;
@@ -33,6 +35,8 @@ export abstract class MapCard extends LitElement {
       featureEditLimitNotice: string;
       clearSelection: string;
       share: string;
+      copy: string;
+      paste: string;
   }>;
   /** AppLayout: the current app layout */
   accessor appLayout: AppLayout | undefined;
@@ -149,6 +153,12 @@ export abstract class MapCard extends LitElement {
    * @default false
    */
   accessor isMobile: boolean;
+  /**
+   * string: Id to pass in the map component
+   *
+   * @default 'arcgis-map'
+   */
+  accessor mapComponentId: string;
   /** IMapInfo: key configuration details about the current map */
   accessor mapInfo: IMapInfo | undefined;
   /** IMapInfo[]: array of map infos (name and id) */
@@ -165,8 +175,7 @@ export abstract class MapCard extends LitElement {
    */
   accessor mapWidgetsIndex: number;
   /**
-   * __esri.UIPosition: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-UI.html#UIPosition
-   * The position details for the map tools
+   * UIPosition: The position details for the mobile map tools
    *
    * @default 'top-leading'
    */
@@ -178,17 +187,22 @@ export abstract class MapCard extends LitElement {
    */
   accessor mapWidgetsSize: "l" | "m" | "s";
   /**
-   * __esri.UIPosition: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-UI.html#UIPosition
-   * The position details for the mobile map tools
+   * UIPosition: The position details for the mobile map tools
    *
    * @default 'top-right'
    */
   accessor mobileMapWidgetsPosition: UIPosition;
   /** Valid tools: 'map-picker', 'map-layer-picker' */
   accessor mobileToolsOrder: string[];
+  /**
+   * boolean: When true the paste action will be enabled
+   *
+   * @default false
+   */
+  accessor pasteEnabled: boolean;
   /** number[]: A list of ids that are currently selected */
   accessor selectedFeaturesIds: (number | string)[];
-  /** __esri.FeatureLayer: Selected layer */
+  /** FeatureLayer: Selected layer */
   accessor selectedLayer: FeatureLayer | undefined;
   /**
    * boolean: When true the share options will include embed option
@@ -202,6 +216,12 @@ export abstract class MapCard extends LitElement {
    * @default false
    */
   accessor shareIncludeSocial: boolean;
+  /**
+   * boolean: When true only the copy and paste actions will be shown in the selection tool
+   *
+   * @default false
+   */
+  accessor showCopyPasteActions: boolean;
   /**
    * boolean: When true only editable layers that support the update capability will be available
    *
@@ -245,17 +265,29 @@ export abstract class MapCard extends LitElement {
   readonly beforeMapChanged: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emitted on demand when clear selection button is clicked */
   readonly clearSelection: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Emitted on demand when copy action is clicked */
+  readonly copyFeatures: import("@arcgis/lumina").TargetedEvent<this, {
+      featuresIds: (number | string)[];
+      layerId: string | undefined;
+  }>;
   /** Emitted on demand when edit multiple action is clicked */
   readonly editMultipleFeatures: import("@arcgis/lumina").TargetedEvent<this, (number | string)[]>;
+  /** Emitted when the features have been copied to the clipboard */
+  readonly featuresCopied: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emitted when a new map is loaded */
   readonly mapChanged: import("@arcgis/lumina").TargetedEvent<this, IMapChange>;
+  /** Emitted on demand when paste action is clicked */
+  readonly pasteFeatures: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emitted on demand when filter action is clicked */
   readonly toggleFilter: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     beforeMapChanged: MapCard["beforeMapChanged"]["detail"];
     clearSelection: MapCard["clearSelection"]["detail"];
+    copyFeatures: MapCard["copyFeatures"]["detail"];
     editMultipleFeatures: MapCard["editMultipleFeatures"]["detail"];
+    featuresCopied: MapCard["featuresCopied"]["detail"];
     mapChanged: MapCard["mapChanged"]["detail"];
+    pasteFeatures: MapCard["pasteFeatures"]["detail"];
     toggleFilter: MapCard["toggleFilter"]["detail"];
   };
 }

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

@@ -1,33 +1,36 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as b } from "../../chunks/runtime.js";
-import { b as c } from "../../chunks/interfaces.js";
+import { b as m } from "../../chunks/interfaces.js";
 import { joinAppProxies as y } from "templates-common-library/functionality/proxy";
 import { c as _, e as g } from "../../chunks/mapViewUtils.js";
 import { u as v } from "../../chunks/useT9n.js";
-import { css as I, html as o, nothing as m } from "lit";
-import { createRef as d, ref as r } from "lit-html/directives/ref.js";
-import { LitElement as $, createEvent as p, noShadowRoot as L, safeClassMap as f } from "@arcgis/lumina";
+import { css as I, nothing as c, html as o } from "lit";
+import { createRef as d, ref as h } from "lit-html/directives/ref.js";
+import { LitElement as $, createEvent as n, noShadowRoot as L, safeClassMap as f } from "@arcgis/lumina";
 import { defineCustomElements as w } from "@arcgis/instant-apps-components/loader";
 import { h as M } from "../../chunks/helpers.js";
 import S from "@arcgis/core/config.js";
-import T from "@arcgis/core/views/MapView.js";
-import W from "@arcgis/core/WebMap.js";
-const k = I`@layer{:host{display:block;--calcite-label-margin-bottom: 0;--calcite-block-padding: 0}.map-height{height:calc(100% - 53px)}.height-full{height:100%}.height-49-px{height:49px}.box-shadow{box-shadow:none!important}.visibility-hidden-1{visibility:hidden;height:1px}.hidden{visibility:hidden!important}.display-flex{display:flex}.display-none{display:none}.display-block{display:block}.absolute-right{position:absolute;right:0;left:unset}.esri-ui-inner-container.esri-ui-corner-container{direction:ltr}html[dir=rtl] .absolute-right{left:0;right:unset}.panel-header-override{--calcite-panel-header-content-space: 0px;--calcite-internal-panel-action-spacing: 0px !important}@media only screen and (max-width:1024px){.esri-zoom{display:none!important}}calcite-action-bar{--calcite-internal-action-bar-gap: 0px;--calcite-internal-action-bar-padding: 0px}}`;
-class C extends $ {
+import "@arcgis/core/views/MapView.js";
+import C from "@arcgis/core/WebMap.js";
+const T = I`@layer{:host{display:block;--calcite-label-margin-bottom: 0;--calcite-block-padding: 0}.map-height{height:calc(100% - 53px)}.height-full{height:100%}.height-49-px{height:49px}.box-shadow{box-shadow:none!important}.visibility-hidden-1{visibility:hidden;height:1px}.hidden{visibility:hidden!important}.display-flex{display:flex}.display-none{display:none}.display-block{display:block}.absolute-right{position:absolute;right:0;left:unset}.esri-ui-inner-container.esri-ui-corner-container{direction:ltr}html[dir=rtl] .absolute-right{left:0;right:unset}.panel-header-override{--calcite-panel-header-content-space: 0px;--calcite-internal-panel-action-spacing: 0px !important}@media only screen and (max-width:1024px){.esri-zoom{display:none!important}}calcite-action-bar{--calcite-internal-action-bar-gap: 0px;--calcite-internal-action-bar-padding: 0px}}`;
+class W extends $ {
   constructor() {
-    super(), this.defaultWebmapId = "", this.defaultLayerId = "", this.enableHome = !1, this.enableLegend = !1, this.enableLayerList = !0, this.enableFloorFilter = !1, this.enableFullscreen = !1, this.enableShare = !1, this.enableMapLayerPicker = !1, this.enableMapPicker = !1, this.enableSingleExpand = !1, this.enableSearch = !1, this.enableBasemap = !1, this.featureSelectionMode = "multiple", this.hide = !1, this.zoomToolsSize = "m", this.mapInfos = [], this.mapWidgetsIndex = 0, this.mapWidgetsPosition = "top-leading", this.mobileMapWidgetsPosition = "top-right", this.mapWidgetsSize = "m", this.stackTools = !1, this.mapToolsOrder = [], this.mobileToolsOrder = [], this.isMapLayout = !1, this.shareIncludeEmbed = !1, this.shareIncludeSocial = !1, this.selectedFeaturesIds = [], this.showOnlyUpdatableLayers = !1, this.isMobile = !1, this.enableSelectionTool = !1, this.visibilityIcon = "eyeball", this._configLayerOrderDefined = !1, this._translations = v({ name: "map-card", blocking: !0 }), this._toolInfos = [], this._filterActive = !1, this._layerIds = [], this._enabledLayerIds = [], this._defaultWebmapHonored = !1, this._loadedId = "", this._mapDiv = d(), this._mapPicker = d(), this._mapTools = d(), this._mobMapTools = d(), this._mapLayerPicker = d(), this._selectedWebMapId = "", this._isValidWebMap = !0, this.mapChanged = p(), this.beforeMapChanged = p(), this.toggleFilter = p(), this.clearSelection = p(), this.editMultipleFeatures = p(), this.listenOn(window, "mapInfoChange", this.mapInfoChange), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "idsFound", this._idsFound), this.enableSingleExpand = !0, this.stackTools = !0, w(window);
+    super(), this.defaultWebmapId = "", this.defaultLayerId = "", this.enableHome = !1, this.enableLegend = !1, this.enableLayerList = !0, this.enableFloorFilter = !1, this.enableFullscreen = !1, this.enableShare = !1, this.enableMapLayerPicker = !1, this.enableMapPicker = !1, this.enableSingleExpand = !1, this.enableSearch = !1, this.enableBasemap = !1, this.featureSelectionMode = "multiple", this.hide = !1, this.zoomToolsSize = "m", this.mapInfos = [], this.mapWidgetsIndex = 0, this.mapWidgetsPosition = "top-leading", this.mobileMapWidgetsPosition = "top-right", this.mapWidgetsSize = "m", this.stackTools = !1, this.mapToolsOrder = [], this.mobileToolsOrder = [], this.isMapLayout = !1, this.shareIncludeEmbed = !1, this.shareIncludeSocial = !1, this.selectedFeaturesIds = [], this.showOnlyUpdatableLayers = !1, this.isMobile = !1, this.enableSelectionTool = !1, this.visibilityIcon = "eyeball", this.pasteEnabled = !1, this.mapComponentId = "arcgis-map", this.showCopyPasteActions = !1, this._configLayerOrderDefined = !1, this._translations = v({ name: "map-card", blocking: !0 }), this._toolInfos = [], this._filterActive = !1, this._layerIds = [], this._enabledLayerIds = [], this._defaultWebmapHonored = !1, this._loadedId = "", this._mapDiv = d(), this._mapComponent = d(), this._mapPicker = d(), this._mapTools = d(), this._mobMapTools = d(), this._mapLayerPicker = d(), this._selectedWebMapId = "", this._isValidWebMap = !0, this.mapChanged = n(), this.beforeMapChanged = n(), this.toggleFilter = n(), this.clearSelection = n(), this.copyFeatures = n(), this.pasteFeatures = n(), this.editMultipleFeatures = n(), this.featuresCopied = n(), this.listenOn(window, "mapInfoChange", this.mapInfoChange), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "idsFound", this._idsFound), this.enableSingleExpand = !0, this.stackTools = !0, w(window);
   }
   static {
-    this.properties = { appLayout: 1, appProxies: 1, defaultWebmapId: 1, defaultLayerId: 1, enableHome: 5, enableLegend: 5, enableLayerList: 5, enableFloorFilter: 5, enableFullscreen: 5, enableShare: 5, enableMapLayerPicker: 5, enableMapPicker: 5, enableSingleExpand: 5, enableSearch: 5, enableBasemap: 5, featureSelectionMode: 1, basemapConfig: 0, hide: 5, zoomToolsSize: 1, mapInfos: 0, mapWidgetsIndex: 9, mapWidgetsPosition: 1, mobileMapWidgetsPosition: 1, mapWidgetsSize: 1, mapView: 0, stackTools: 5, theme: 1, mapToolsOrder: 0, mobileToolsOrder: 0, isMapLayout: 5, shareIncludeEmbed: 5, shareIncludeSocial: 5, selectedFeaturesIds: 0, selectedLayer: 0, zoomToScale: 9, showOnlyUpdatableLayers: 5, isMobile: 5, mapInfo: 0, enableSelectionTool: 5, visibilityIcon: 1, _configLayerOrderDefined: 16, _translations: 16, _searchConfiguration: 16, _webMapInfo: 16, _toolInfos: 16, _filterActive: 16, _mapDivHeight: 16, _mapDivWidth: 16, _layerIds: 16 };
+    this.properties = { appLayout: 1, appProxies: 1, defaultWebmapId: 1, defaultLayerId: 1, enableHome: 5, enableLegend: 5, enableLayerList: 5, enableFloorFilter: 5, enableFullscreen: 5, enableShare: 5, enableMapLayerPicker: 5, enableMapPicker: 5, enableSingleExpand: 5, enableSearch: 5, enableBasemap: 5, featureSelectionMode: 1, basemapConfig: 0, hide: 5, zoomToolsSize: 1, mapInfos: 0, mapWidgetsIndex: 9, mapWidgetsPosition: 1, mobileMapWidgetsPosition: 1, mapWidgetsSize: 1, mapView: 0, stackTools: 5, theme: 1, mapToolsOrder: 0, mobileToolsOrder: 0, isMapLayout: 5, shareIncludeEmbed: 5, shareIncludeSocial: 5, selectedFeaturesIds: 0, selectedLayer: 0, zoomToScale: 9, showOnlyUpdatableLayers: 5, isMobile: 5, mapInfo: 0, enableSelectionTool: 5, visibilityIcon: 1, pasteEnabled: 5, mapComponentId: 1, showCopyPasteActions: 5, _configLayerOrderDefined: 16, _translations: 16, _searchConfiguration: 16, _webMapInfo: 16, _toolInfos: 16, _filterActive: 16, _mapDivHeight: 16, _mapDivWidth: 16, _layerIds: 16 };
   }
   static {
-    this.styles = k;
+    this.styles = T;
   }
   static {
     this.shadowRootOptions = L;
   }
   willUpdate(e) {
-    e.has("appLayout") && this.appLayoutWatchHandler(), e.has("mapView") && this.mapViewWatchHandler(), e.has("mapInfo") && this.mapInfoWatchHandler(), e.has("selectedFeaturesIds") && this.selectedFeaturesIdsWatchHandler();
+    if (e.has("appLayout") && this.appLayoutWatchHandler(), e.has("mapView") && this.mapViewWatchHandler(), e.has("mapInfo") && this.mapInfoWatchHandler(), e.has("selectedFeaturesIds") && this.selectedFeaturesIdsWatchHandler(), e.has("pasteEnabled") && this.hasUpdated) {
+      const i = this._toolInfos.find((a) => a.icon === "paste-with-attribute");
+      i && (i.disabled = !this.pasteEnabled);
+    }
   }
   appLayoutWatchHandler() {
     this._updateShareUrl();
@@ -70,8 +73,8 @@ class C extends $ {
     }));
   }
   render() {
-    const e = this.hide ? "visibility-hidden-1" : "", i = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light", a = "height-full", t = this.isMapLayout ? "" : "display-none", s = this._isValidWebMap ? "" : "hidden", n = this.isMobile ? "" : "hidden", l = this.enableMapPicker && this.mapInfos.length > 1, h = this.enableMapLayerPicker && this._layerIds.length > 1;
-    return this._handleMapVisibility(), this._validateActiveActions(), o`<calcite-panel class="height-full width-full panel-header-override">${this._getMapLayerPicker()}${this._getHeaderActions()}<div slot=header-actions-end>${this.enableShare && this.isMapLayout ? this._getShare("share") : void 0}</div><calcite-progress class=${f(t)} value=0></calcite-progress><div class=${`${e} ${a}`}><div class="height-full" ${r(this._mapDiv)}></div></div>${o`<map-tools .basemapConfig=${this.basemapConfig} class=${`box-shadow ${i} ${s}`} .defaultLayerId=${this.defaultLayerId} .enableBasemap=${this.enableBasemap} .enableFloorFilter=${this.enableFloorFilter} .enableFullscreen=${this.enableFullscreen} .enableHome=${this.enableHome} .enableLegend=${this.enableLegend} .enableLayerList=${this.enableLayerList} .enableSearch=${this.enableSearch} .enableSingleExpand=${this.enableSingleExpand} .enableSelectionTool=${this.enableSelectionTool} .isMobile=${this.isMobile} .parentComponentHeight=${this._mapDivHeight} .parentComponentWidth=${this._mapDivWidth} .zoomToolsSize=${this.zoomToolsSize} layout=horizontal .mapView=${this.mapView} .mapWidgetsSize=${this.mapWidgetsSize} .position=${this.mapWidgetsPosition} .selectedFeaturesIds=${this.selectedFeaturesIds} .selectedLayer=${this.selectedLayer} .searchConfiguration=${this._searchConfiguration} .stackTools=${this.stackTools} .toolOrder=${this.mapToolsOrder} .visibilityIcon=${this.visibilityIcon} ${r(this._mapTools)}></map-tools><map-tools class=${`box-shadow ${i} ${n}`} .defaultLayerId=${this.defaultLayerId} .enabledLayerIds=${this._enabledLayerIds} .enableMapLayerPicker=${h} .enableMapPicker=${l} .isMobile=${this.isMobile} .zoomToolsSize=${this.zoomToolsSize} layout=vertical .mapInfos=${this.mapInfos} .mapView=${this.mapView} .mapWidgetsSize=${this.mapWidgetsSize} .parentComponentHeight=${this._mapDivHeight} .position=${this.mobileMapWidgetsPosition} .selectedLayer=${this.selectedLayer} .selectedWebMapId=${this._selectedWebMapId} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} .stackTools=${this.stackTools} .toolOrder=${this.mobileToolsOrder} ${r(this._mobMapTools)}></map-tools>`}</calcite-panel>`;
+    const e = this.hide ? "visibility-hidden-1" : "", i = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light", a = "height-full", t = this.isMapLayout ? "" : "display-none", s = this._isValidWebMap ? "" : "hidden", r = this.isMobile ? "" : "hidden", l = this.enableMapPicker && this.mapInfos.length > 1, p = this.enableMapLayerPicker && this._layerIds.length > 1;
+    return this._handleMapVisibility(), this._validateActiveActions(), o`<calcite-panel class="height-full width-full panel-header-override">${this._getMapLayerPicker()}${this._getHeaderActions()}<div slot=header-actions-end>${this.enableShare && this.isMapLayout ? this._getShare("share") : void 0}</div><calcite-progress class=${f(t)} value=0></calcite-progress><div class=${`${e} ${a}`}><div class="height-full" ${h(this._mapDiv)}><arcgis-map id=${this.mapComponentId ?? c} class="height-full" ${h(this._mapComponent)}></arcgis-map></div></div>${o`<map-tools style=${`visibility: ${s}`} .basemapConfig=${this.basemapConfig} class=${`box-shadow ${i} ${s}`} .configLayerOrderDefined=${this._configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} .enableBasemap=${this.enableBasemap} .enableFloorFilter=${this.enableFloorFilter} .enableFullscreen=${this.enableFullscreen} .enableHome=${this.enableHome} .enableLegend=${this.enableLegend} .enableLayerList=${this.enableLayerList} .enableSearch=${this.enableSearch} .enableSingleExpand=${this.enableSingleExpand} .enableSelectionTool=${this.enableSelectionTool} .isMobile=${this.isMobile} .parentComponentHeight=${this._mapDivHeight} .parentComponentWidth=${this._mapDivWidth} .zoomToolsSize=${this.zoomToolsSize} layout=horizontal .mapView=${this.mapView} .mapWidgetsSize=${this.mapWidgetsSize} .position=${this.mapWidgetsPosition} .selectedFeaturesIds=${this.selectedFeaturesIds} .selectedLayer=${this.selectedLayer} .searchConfiguration=${this._searchConfiguration} .stackTools=${this.stackTools} .toolOrder=${this.mapToolsOrder} .visibilityIcon=${this.visibilityIcon} ${h(this._mapTools)}></map-tools><map-tools style=${`visibility: ${r}`} class=${`box-shadow ${i} ${r}`} .configLayerOrderDefined=${this._configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} .enabledLayerIds=${this._enabledLayerIds} .enableMapLayerPicker=${p} .enableMapPicker=${l} .isMobile=${this.isMobile} .zoomToolsSize=${this.zoomToolsSize} layout=vertical .mapInfos=${this.mapInfos} .mapView=${this.mapView} .mapWidgetsSize=${this.mapWidgetsSize} .parentComponentHeight=${this._mapDivHeight} .position=${this.mobileMapWidgetsPosition} .selectedLayer=${this.selectedLayer} .selectedWebMapId=${this._selectedWebMapId} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} .stackTools=${this.stackTools} .toolOrder=${this.mobileToolsOrder} ${h(this._mobMapTools)}></map-tools>`}</calcite-panel>`;
   }
   updated() {
     this._mapDivHeight = this._mapDiv.value?.offsetHeight ?? 0, document.onclick = (e) => this._handleDocumentClick(e);
@@ -82,25 +85,23 @@ class C extends $ {
   async _loadMap(e) {
     const i = !this._defaultWebmapHonored && this.defaultWebmapId, a = this.mapInfos?.filter((l) => l.id === this.defaultWebmapId), t = JSON.stringify(e) !== JSON.stringify(this._webMapInfo);
     this._webMapInfo = i && a ? a[0] : !e?.id && this.mapInfos.length > 0 ? this.mapInfos[0] : e;
-    const s = this._webMapInfo.id, n = i && e?.id === this.defaultWebmapId;
-    if (this._loadedId !== s && !i || n) {
-      const l = new W({
+    const s = this._webMapInfo.id, r = i && e?.id === this.defaultWebmapId;
+    if (this._loadedId !== s && !i || r) {
+      const l = new C({
         portalItem: { id: s }
       });
       try {
-        l && await l.load(), this.appProxies && l && await y(l, S, this.appProxies), this.mapView = new T({
-          container: this._mapDiv.value,
-          map: l,
-          resizeAlign: "center"
-        }), this._loadedId = s, this._searchConfiguration = this._webMapInfo.searchConfiguration, this.beforeMapChanged.emit(), this.mapView && await this.mapView.when(() => {
-          this.mapView && (this._mapDivWidth = this._mapDiv.value && this._mapDiv.value.offsetWidth, this._mapTools.value && this.mapView.ui.add(this._mapTools.value, { position: this.mapWidgetsPosition, index: this.mapWidgetsIndex }), this._mobMapTools.value && this.mapView.ui.add(this._mobMapTools.value, { position: this.mobileMapWidgetsPosition, index: this.mapWidgetsIndex }), this._defaultWebmapHonored = n ? !0 : this._defaultWebmapHonored, this._isValidWebMap = !0, this.mapChanged.emit({
+        if (l && await l.load(), this.appProxies && l && await y(l, S, this.appProxies), this._mapComponent.value || await this.updateComplete, !this._mapComponent.value)
+          throw new Error("Map component is not available.");
+        this._mapComponent.value.map = l, this._mapComponent.value.resizeAlign = "center", await this._mapComponent.value.viewOnReady(), this.mapView = this._mapComponent.value.view, this._loadedId = s, this._searchConfiguration = this._webMapInfo.searchConfiguration, this.beforeMapChanged.emit(), this.mapView && await this.mapView.when(() => {
+          this.mapView && (this._mapDivWidth = this._mapDiv.value && this._mapDiv.value.offsetWidth, this._mapTools.value && this.mapView.ui.add(this._mapTools.value, { position: this.mapWidgetsPosition, index: this.mapWidgetsIndex }), this._mobMapTools.value && this.mapView.ui.add(this._mobMapTools.value, { position: this.mobileMapWidgetsPosition, index: this.mapWidgetsIndex }), this._defaultWebmapHonored = r ? !0 : this._defaultWebmapHonored, this._isValidWebMap = !0, this.mapChanged.emit({
             id: s,
             mapView: this.mapView,
             isValid: !0
           }), this.isMobile || document.getElementsByClassName("esri-zoom")[0]?.classList.remove("display-none"));
         });
-      } catch (h) {
-        console.error(h), this._loadedId = s, this._isValidWebMap = !1, this.mapChanged.emit({
+      } catch (p) {
+        console.error(p), this._loadedId = s, this._isValidWebMap = !1, this.mapChanged.emit({
           id: s,
           mapView: void 0,
           isValid: !1
@@ -116,13 +117,13 @@ class C extends $ {
   }
   _getMapLayerPicker() {
     const e = this.isMapLayout ? "header-actions-start" : "", i = this.mapInfos?.length > 1 ? "" : "display-none", a = this.isMapLayout ? "height-0" : "width-full", t = "display-flex", s = this.isMapLayout ? "" : "display-none";
-    return o`${!this.isMobile && o`<div slot=${e ?? m}><map-picker class=${`${i} ${a}`} id=map-picker .isMapLayout=${this.isMapLayout} .mapInfos=${this.mapInfos} .selectedWebMapId=${this._selectedWebMapId} ${r(this._mapPicker)}></map-picker></div>` || ""}<div slot=header-actions-start class=${`mapView-header display-flex ${s}`} id=solutions-map-layer-picker-container><div class=${`border-end ${t}`}>${this.mapView && o`<map-layer-picker appearance=transparent .configLayerOrderDefined=${this._configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} display=inline-flex .enabledLayerIds=${this._enabledLayerIds} height=50 .isMobile=${this.isMobile} .mapView=${this.mapView} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} placeholder-icon=layers scale=l .selectedIds=${this.selectedLayer ? [this.selectedLayer.id] : []} show-single-layer-as-label show-tables show-tables-disabled type=dropdown ${r(this._mapLayerPicker)}></map-layer-picker>` || ""}</div></div>`;
+    return o`${!this.isMobile && o`<div slot=${e ?? c}><map-picker class=${`${i} ${a}`} id=map-picker .isMapLayout=${this.isMapLayout} .mapInfos=${this.mapInfos} .selectedWebMapId=${this._selectedWebMapId} ${h(this._mapPicker)}></map-picker></div>` || ""}<div slot=header-actions-start class=${`mapView-header display-flex ${s}`} id=solutions-map-layer-picker-container><div class=${`border-end ${t}`}>${this.mapView && o`<map-layer-picker appearance=transparent .configLayerOrderDefined=${this._configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} display=inline-flex .enabledLayerIds=${this._enabledLayerIds} height=50 .isMobile=${this.isMobile} .mapView=${this.mapView} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} placeholder-icon=layers scale=l .selectedIds=${this.selectedLayer ? [this.selectedLayer.id] : []} show-single-layer-as-label show-tables show-tables-disabled type=dropdown ${h(this._mapLayerPicker)}></map-layer-picker>` || ""}</div></div>`;
   }
   _getHeaderActions() {
-    return o`<div slot=header-content><calcite-action-bar class=${f("display-flex")} expand-disabled expanded id=${this._getId("bar") ?? m} layout=horizontal><calcite-action-group>${this.isMapLayout ? this._getActions() : void 0}</calcite-action-group></calcite-action-bar></div>`;
+    return o`<div slot=header-content><calcite-action-bar class=${f("display-flex")} expand-disabled expanded id=${this._getId("bar") ?? c} layout=horizontal><calcite-action-group>${this.isMapLayout ? this._getTools() : void 0}</calcite-action-group></calcite-action-bar></div>`;
   }
   _getShare(e) {
-    return o`<div class="share-action" id=${this._getId(e) ?? m}>${this.mapView && o`<instant-apps-social-share class="instant-app-share" .embed=${this.shareIncludeEmbed} flip-rtl popover-button-icon-scale=s scale=m share-button-color=neutral share-button-type=action .socialMedia=${this.shareIncludeSocial} .view=${this.mapView} ${r((i) => {
+    return o`<div class="share-action" id=${this._getId(e) ?? c}>${this.mapView && o`<instant-apps-social-share class="instant-app-share" .embed=${this.shareIncludeEmbed} flip-rtl popover-button-icon-scale=s scale=m share-button-color=neutral share-button-type=action .socialMedia=${this.shareIncludeSocial} .view=${this.mapView} ${h((i) => {
       i && (this._shareNode = i, this._updateShareUrl());
     })}></instant-apps-social-share>` || ""}${this._getToolTip("bottom", `map-${e}`, this._translations?.share)}</div>`;
   }
@@ -134,7 +135,7 @@ class C extends $ {
     this._loadedId ? i.searchParams.set("webmap", this._loadedId) : i.searchParams.delete("webmap"), this.selectedLayer?.id ? i.searchParams.set("layer", this.selectedLayer.id) : i.searchParams.delete("layer"), this.selectedFeaturesIds?.length > 0 ? i.searchParams.set("oid", this.selectedFeaturesIds.join(",")) : i.searchParams.delete("oid"), this.appLayout && i.searchParams.set("applayout", this.appLayout), this._shareNode && (this._shareNode.autoUpdateShareUrl = !1, this._shareNode.shareUrl = i.href);
   }
   _initToolInfos() {
-    const e = this.selectedFeaturesIds.length > 0, i = this.selectedFeaturesIds.length < 2 || this.selectedFeaturesIds.length > c, a = this.featureSelectionMode === "multiple" && this.selectedLayer?.capabilities?.operations.supportsUpdate, t = [];
+    const e = this.selectedFeaturesIds.length > 0, i = this.selectedFeaturesIds.length < 2 || this.selectedFeaturesIds.length > m, a = this.featureSelectionMode === "multiple" && this.selectedLayer?.capabilities?.operations.supportsUpdate, t = [];
     t.push({
       active: !1,
       icon: "filter",
@@ -163,7 +164,23 @@ class C extends $ {
       func: () => this.editMultipleFeatures.emit(this.selectedFeaturesIds),
       disabled: i,
       toolTip: this._translations.editMultiple
+    }), this.showCopyPasteActions && (t.push({
+      active: !1,
+      icon: "copy",
+      indicator: !1,
+      label: this._translations.copy,
+      func: () => this.copyFeatures.emit({ featuresIds: this.selectedFeaturesIds, layerId: this.selectedLayer?.id }),
+      disabled: !e,
+      toolTip: this._translations.copy
     }), t.push({
+      active: !1,
+      icon: "paste-with-attribute",
+      indicator: !1,
+      label: this._translations.paste,
+      func: () => this.pasteFeatures.emit(),
+      disabled: !0,
+      toolTip: this._translations.paste
+    })), t.push({
       active: !1,
       icon: "refresh",
       indicator: !1,
@@ -194,9 +211,9 @@ class C extends $ {
     }
   }
   _validateEnabledActions() {
-    const e = this.selectedFeaturesIds.length > 0, i = this.selectedFeaturesIds.length < 2 || this.selectedFeaturesIds.length > c, a = ["zoom-to-object", "pencil", "erase"];
+    const e = this.selectedFeaturesIds.length > 0, i = this.selectedFeaturesIds.length < 2 || this.selectedFeaturesIds.length > m, a = ["zoom-to-object", "pencil", "erase", "copy"];
     this._toolInfos?.forEach((t) => {
-      t && a.indexOf(t.icon) > -1 && (t.disabled = t.icon === "pencil" ? i : !e, t.toolTip = t.icon === "pencil" ? this.selectedFeaturesIds.length > c ? this._translations.featureEditLimitNotice : this._translations.editMultiple : t.toolTip);
+      t && a.indexOf(t.icon) > -1 && (t.disabled = t.icon === "pencil" ? i : !e, t.toolTip = t.icon === "pencil" ? this.selectedFeaturesIds.length > m ? this._translations.featureEditLimitNotice : this._translations.editMultiple : t.toolTip);
     });
   }
   _handleDocumentClick(e) {
@@ -211,21 +228,21 @@ class C extends $ {
   async _toggleFilter() {
     this.toggleFilter.emit();
   }
-  _getActions() {
+  _getTools() {
     return this._toolInfos?.reduce((e, i) => (i && e.push(this._getAction(i.active, i.icon, i.indicator, i.label, i.func, i.disabled, i.loading, i.toolTip)), e), []);
   }
   _getToolTip(e, i, a) {
     return o`<calcite-tooltip .placement=${e} .referenceElement=${i}><span>${a}</span></calcite-tooltip>`;
   }
-  _getAction(e, i, a, t, s, n, l, h) {
-    const u = this.selectedLayer === void 0 ? !0 : n;
-    return o`<calcite-action .active=${e} appearance=solid .disabled=${u} .icon=${i} .id=${`map-${i}`} .indicator=${a} .label=${t} .loading=${l} @click=${s} .text=${t} text-enabled></calcite-action>${this._getToolTip("auto", `map-${i}`, h)}`;
+  _getAction(e, i, a, t, s, r, l, p) {
+    const u = this.selectedLayer === void 0 ? !0 : r;
+    return o`<calcite-action .active=${e} .disabled=${u} .icon=${i} .id=${`map-${i}`} .indicator=${a} .label=${t} .loading=${l} @click=${s} .text=${t} text-enabled></calcite-action>${this._getToolTip("auto", `map-${i}`, p)}`;
   }
   _getId(e) {
     return `solutions-action-${e}`;
   }
 }
-b("map-card", C);
+b("map-card", W);
 export {
-  C as MapCard
+  W as MapCard
 };

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

@@ -1,5 +1,6 @@
 import "@esri/calcite-components/components/calcite-panel";
 import "@esri/calcite-components/components/calcite-progress";
+import "@arcgis/map-components/components/arcgis-map";
 import "../map-tools/index.js";
 import "../map-picker/index.js";
 import "../map-layer-picker/index.js";

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

@@ -1,7 +1,8 @@
 /// <reference path="../../index.d.ts" />
-import type FloorFilter from "@arcgis/core/widgets/FloorFilter.js";
 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 {
   /**
@@ -10,12 +11,8 @@ 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: 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: MapView | undefined;
   /** Emitted on demand when the Facility 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.js";
-import * as r from "@arcgis/core/core/reactiveUtils.js";
-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,11 +1,12 @@
 /// <reference path="../../index.d.ts" />
-import type Fullscreen from "@arcgis/core/widgets/Fullscreen.js";
 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: 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: MapView | undefined;
   /** Emitted on demand when the fullscreen widget state has changed */

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.js";
-import * as h from "@arcgis/core/core/reactiveUtils.js";
-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.js

@@ -3,17 +3,17 @@ import { c as m } from "../../chunks/runtime.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 d, ref as o } from "lit-html/directives/ref.js";
+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";
 import { useContextConsumer as w } from "@arcgis/lumina/context";
 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 = _({ name: "map-layer-picker", blocking: !0 }), this.defaultLayerHonored = !1, this._layerSelectElement = d(), this._layerComboboxElement = d(), 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 = d(), 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 };
@@ -55,6 +55,10 @@ class $ extends g {
   async mapChanged(e) {
     e.detail.isValid || (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());
   }
@@ -74,7 +78,7 @@ class $ extends g {
   }
   _getMapLayerPopOver() {
     const e = this.height && this.height > 0 ? { "max-height": `${this.height.toString()}px` } : {};
-    return i`<calcite-popover auto-close focus-trap-disabled .label=${this.referenceElement} placement=left .referenceElement=${this.referenceElement} scale=s ${o(this._popover)}><div class=popover-list style=${c(e)}>${this._getMapLayerOptions()}</div></calcite-popover>`;
+    return i`<calcite-popover auto-close focus-trap-disabled .label=${this.referenceElement} placement=left .referenceElement=${this.referenceElement} scale=s ${d(this._popover)}><div class=popover-list style=${c(e)}>${this._getMapLayerOptions()}</div></calcite-popover>`;
   }
   _getInvalidPlaceholder() {
     return i`<div><calcite-notice class="height-100" icon=exclamation-mark-triangle id=no-valid-layers kind=danger open><div slot=message>${this._translations.noLayersFound}</div></calcite-notice><calcite-tooltip .label=${this._translations.enableEditUpdate} placement=bottom reference-element=no-valid-layers><span>${this._translations.enableEditUpdate}</span></calcite-tooltip></div>`;
@@ -84,10 +88,10 @@ class $ extends g {
     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} ${o(this._layerElement)}>${this._getMapLayerOptions()}</calcite-select>`;
+    return i`<calcite-select .disabled=${this.disabled} id=${e ?? l} label @calciteSelectChange=${() => this._layerSelectionChange()} .scale=${this.scale} ${d(this._layerElement)}>${this._getMapLayerOptions()}</calcite-select>`;
   }
   _getCombobox(e) {
-    return i`<calcite-combobox clear-disabled id=${e ?? l} label @calciteComboboxChange=${() => this._layerSelectionChange()} .placeholderIcon=${this.placeholderIcon} .scale=${this.scale} selection-mode=single ${o(this._layerElement)}>${this._getMapLayerOptions()}</calcite-combobox>`;
+    return i`<calcite-combobox clear-disabled id=${e ?? l} label @calciteComboboxChange=${() => this._layerSelectionChange()} .placeholderIcon=${this.placeholderIcon} .scale=${this.scale} selection-mode=single ${d(this._layerElement)}>${this._getMapLayerOptions()}</calcite-combobox>`;
   }
   _getDropdown(e) {
     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>`;

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

@@ -1,15 +1,12 @@
 /// <reference path="../../index.d.ts" />
-import type Legend from "@arcgis/core/widgets/Legend.js";
 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: 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: MapView | undefined;
 }