@esri/solutions-components 5.1.0-next.16 → 5.1.0-next.161

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

@@ -1,5 +1,6 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type Graphic from "@arcgis/core/Graphic.js";
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
@@ -19,6 +20,9 @@ export abstract class InfoCard extends LitElement {
       back: string;
       indexOfTotal: string;
       delete: string;
+      toggleListView: string;
+      copy: string;
+      paste: string;
   } & T9nMeta<{
       fetchingData: string;
       edit: string;
@@ -28,6 +32,9 @@ export abstract class InfoCard extends LitElement {
       back: string;
       indexOfTotal: string;
       delete: string;
+      toggleListView: string;
+      copy: string;
+      paste: string;
   }>;
   /**
    * boolean: If true will show edit button
@@ -47,8 +54,10 @@ export abstract class InfoCard extends LitElement {
    * @default false
    */
   accessor enableSnapping: boolean;
+  /** string: Map component id to pass in the features component reference */
+  accessor featuresReferenceId: string | undefined;
   /** esri/Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html */
-  accessor graphics: __esri.Graphic[];
+  accessor graphics: Graphic[];
   /**
    * boolean: If true will highlights the features on map using Features Widget
    *
@@ -68,13 +77,19 @@ export abstract class InfoCard extends LitElement {
    */
   accessor isMobile: boolean;
   /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
   /**
    * boolean: If true will show the pagination for multiple features
    *
    * @default true
    */
   accessor paginationEnabled: boolean | undefined;
+  /**
+   * boolean: When true the paste action will be enabled
+   *
+   * @default false
+   */
+  accessor pasteEnabled: boolean;
   /**
    * string: Set the position of the feature info
    *
@@ -87,6 +102,12 @@ export abstract class InfoCard extends LitElement {
    * @default false
    */
   accessor showCloseBtn: boolean | undefined;
+  /**
+   * boolean: If true will show copy and paste actions
+   *
+   * @default false
+   */
+  accessor showCopyPasteActions: boolean | undefined;
   /** Go to the previous feature in the features widget */
   back(): Promise<void>;
   /**
@@ -105,23 +126,26 @@ export abstract class InfoCard extends LitElement {
   refresh(): Promise<any>;
   /** Toggle the visibility of the features list view */
   toggleListView(): Promise<void>;
-  /**
-   * update the current graphics to the features widget
-   *
-   * @param selectedGraphic
-   */
-  updateCurrentGraphic(selectedGraphic: __esri.Graphic): Promise<void>;
   /** Emitted on demand when close 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 paste action is clicked */
+  readonly pasteFeatures: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emitted on demand when the popup is closed */
   readonly popupClosed: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emitted on demand when the selected index changes */
   readonly selectionChanged: import("@arcgis/lumina").TargetedEvent<this, {
-      selectedFeature: __esri.Graphic[];
+      selectedFeature: Graphic[];
       selectedFeatureIndex: number;
   }>;
   readonly "@eventTypes": {
     clearSelection: InfoCard["clearSelection"]["detail"];
+    copyFeatures: InfoCard["copyFeatures"]["detail"];
+    pasteFeatures: InfoCard["pasteFeatures"]["detail"];
     popupClosed: InfoCard["popupClosed"]["detail"];
     selectionChanged: InfoCard["selectionChanged"]["detail"];
   };

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

@@ -1,72 +1,65 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as f } from "../../chunks/runtime.js";
+import { c as _ } from "../../chunks/runtime.js";
 import { P as g } from "../../chunks/popupUtils.js";
-import { u as b } from "../../chunks/useT9n.js";
-import { css as w, nothing as m, html as s } from "lit";
-import { LitElement as v, createEvent as r, noShadowRoot as y, safeStyleMap as $, safeClassMap as i } from "@arcgis/lumina";
-import x from "@arcgis/core/widgets/Features";
-import * as d from "@arcgis/core/core/reactiveUtils";
-const F = w`@layer{:host{display:block;--calcite-label-margin-bottom: 0}.padding-1-2{padding:.5rem}.display-none{display:none!important}.display-flex{display:flex}.position-absolute{position:absolute;inset:0;overflow:auto}.feature-node{position:relative!important}.feature-node .esri-features__footer{display:none!important}.button-container{justify-content:center;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.width-100{width:100%}.esri-features__container{padding:.5rem!important;background-color:var(--calcite-color-foreground-1)!important;height:100%!important}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:700}.z-index-1{z-index:1}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}.pagination-action{position:relative;left:3px}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand);font-weight:700}}`;
-class E extends v {
+import { u as v } from "../../chunks/useT9n.js";
+import { css as b, html as i } from "lit";
+import { LitElement as w, createEvent as n, noShadowRoot as m, safeStyleMap as y, safeClassMap as s } from "@arcgis/lumina";
+import { createRef as $, ref as F } from "lit-html/directives/ref.js";
+import * as r from "@arcgis/core/core/reactiveUtils.js";
+import c from "@arcgis/core/support/actions/ActionButton.js";
+const E = b`@layer{:host{display:block;--calcite-label-margin-bottom: 0}.padding-1-2{padding:.5rem}.display-none{display:none!important}.display-flex{display:flex}.position-absolute{position:absolute;inset:0;overflow:auto}.feature-node{position:relative!important}.button-container{justify-content:center;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.width-100{width:100%}.esri-features__container{padding:.5rem!important;background-color:var(--calcite-color-surface-2)!important;height:100%!important}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:700}.z-index-1{z-index:1}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}.pagination-action{position:relative;left:3px}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand);font-weight:700}}`;
+class x extends w {
   constructor() {
-    super(), this.enableEditGeometry = !1, this.enableSnapping = !1, this.graphics = [], this.isLoading = !1, this.isMobile = !1, this.allowEditing = !1, this.highlightEnabled = !0, this.paginationEnabled = !0, this.position = "absolute", this.showCloseBtn = !1, this._alertOpen = !1, this._count = "", this._editRecordOpen = !1, this._isMultipleEdits = !1, this._mobileTitle = "", this._showListView = !1, this._translations = b({ name: "info-card", blocking: !0 }), this._navigatedToRelatedFeature = !1, this._editEnabled = !1, this._featuresNodeId = `features-node${(/* @__PURE__ */ new Date()).getMilliseconds().toString()}`, this.popupClosed = r(), this.clearSelection = r(), this.selectionChanged = r(), this.listenOn(window, "closeEdit", this.closeEdit), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "refreshGraphics", this.refreshGraphics), this.listenOn(window, "editMultipleFeatures", this.editMultipleFeatures), this.listenOn(window, "selectedLanguageUpdated", this.selectedLanguageUpdated), this.listenOn(window, "clearSelection", this._alertClosed);
+    super(), this.enableEditGeometry = !1, this.enableSnapping = !1, this.graphics = [], this.isLoading = !1, this.isMobile = !1, this.allowEditing = !1, this.highlightEnabled = !0, this.paginationEnabled = !0, this.position = "absolute", this.showCloseBtn = !1, this.showCopyPasteActions = !1, this.pasteEnabled = !1, this._alertOpen = !1, this._count = "", this._editRecordOpen = !1, this._isMultipleEdits = !1, this._mobileTitle = "", this._showListView = !1, this._translations = v({ name: "info-card", blocking: !0 }), this._navigatedToRelatedFeature = !1, this._editEnabled = !1, this._features = $(), this.popupClosed = n(), this.clearSelection = n(), this.selectionChanged = n(), this.copyFeatures = n(), this.pasteFeatures = n(), this.listenOn(window, "closeEdit", this.closeEdit), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "refreshGraphics", this.refreshGraphics), this.listenOn(window, "editMultipleFeatures", this.editMultipleFeatures), this.listenOn(window, "selectedLanguageUpdated", this.selectedLanguageUpdated), this.listenOn(window, "clearSelection", this._alertClosed);
   }
   static {
-    this.properties = { enableEditGeometry: 5, enableSnapping: 5, graphics: 0, isLoading: 5, isMobile: 5, mapView: 0, allowEditing: 5, highlightEnabled: 5, paginationEnabled: 5, position: 1, showCloseBtn: 5, _alertOpen: 16, _count: 16, _editRecordOpen: 16, _isMultipleEdits: 16, _mobileTitle: 16, _showListView: 16, _translations: 16, _navigatedToRelatedFeature: 16 };
+    this.properties = { enableEditGeometry: 5, enableSnapping: 5, graphics: 0, isLoading: 5, isMobile: 5, mapView: 0, featuresReferenceId: 1, allowEditing: 5, highlightEnabled: 5, paginationEnabled: 5, position: 1, showCloseBtn: 5, showCopyPasteActions: 5, pasteEnabled: 5, _alertOpen: 16, _count: 16, _editRecordOpen: 16, _isMultipleEdits: 16, _mobileTitle: 16, _showListView: 16, _translations: 16, _navigatedToRelatedFeature: 16 };
   }
   static {
-    this.styles = F;
+    this.styles = E;
   }
   static {
-    this.shadowRootOptions = y;
+    this.shadowRootOptions = m;
   }
   willUpdate(e) {
-    if (e.has("graphics") && this.graphicsWatchHandler(), e.has("isMobile") && this.isMobileWatchHandler(), e.has("mapView") && this.mapViewWatchHandler(), e.has("_translations")) {
+    if (e.has("graphics") && this.graphicsWatchHandler(), e.has("pasteEnabled") && this.hasUpdated && this._features.value?.headerActions?.length) {
+      const t = this._features.value.headerActions.find((a) => a.id === "paste-features");
+      t && (t.disabled = !this.pasteEnabled);
+    }
+    if (e.has("showCopyPasteActions") && this.hasUpdated && this.handleHeaderActions(), e.has("_translations")) {
       const t = this._translations._lang, a = e.get("_translations")?._lang;
-      if (t && a && t !== a && this._features) {
-        const n = [...this.graphics];
-        this.graphics = [], this.graphics = n;
+      if (t && a && t !== a && this._features.value) {
+        const l = [...this.graphics];
+        this.graphics = [], this.graphics = l;
       }
     }
   }
   async graphicsWatchHandler() {
-    this._navigatedToRelatedFeature && this._features && (this._features.clear(), this._features.close(), this._count = "", this._navigatedToRelatedFeature = !1), await this.setGraphics();
-  }
-  async isMobileWatchHandler() {
-    await this._initFeaturesWidget();
-  }
-  async mapViewWatchHandler() {
-    return await this._initFeaturesWidget();
+    if (this._navigatedToRelatedFeature && this._features.value && (await this._features.value.clear(), await this._features.value.close(), this._count = "", this._navigatedToRelatedFeature = !1), await this.setGraphics(), this._features.value?.headerActions?.length && this.showCopyPasteActions) {
+      const e = this._features.value.headerActions.find((t) => t.id === "copy-features");
+      e && (e.disabled = this.graphics.length === 0);
+    }
   }
   async getSelectedFeature() {
-    return this._features?.selectedFeature;
+    return this._features.value?.selectedFeature;
   }
   async refresh() {
     await this.setGraphics();
   }
   async back() {
-    this._features?.previous(), this._count = this._getCount();
+    await this._back();
   }
   async next() {
-    this._features?.next(), this._count = this._getCount();
+    await this._next();
   }
   async toggleListView() {
-    if (this._showListView = !this._showListView, this._features) {
-      const e = this._features.selectedFeatureIndex;
-      this._features.open({
-        features: this.graphics,
-        featureMenuOpen: this._showListView
-      }), this._features.selectedFeatureIndex = e;
-    }
-  }
-  async updateCurrentGraphic(e) {
-    this._features?.selectedFeatureWidget && console.log(e);
+    this._toggleListView();
   }
   async closeEdit() {
     this._editRecordOpen = !1, this._isMultipleEdits = !1;
   }
   async layerSelectionChange() {
-    this._showListView = !1, this._features?.viewModel && (this._features.viewModel.featureMenuOpen = !1, this._features.close());
+    this._showListView = !1, this._features.value?.viewModel && (this._features.value.featureMenuOpen = !1, await this._features.value.close());
   }
   async refreshGraphics(e) {
     this._navigatedToRelatedFeature || (this.graphics = [...e.detail]);
@@ -75,7 +68,7 @@ class E extends v {
     this._isMultipleEdits = !0, this._openEditRecord();
   }
   async selectedLanguageUpdated(e) {
-    this._features?.clear(), this._features?.close(), await this._initFeaturesWidget();
+    await this._features.value?.clear(), await this._features.value?.close();
   }
   async load() {
     this._popupUtils = new g();
@@ -84,47 +77,64 @@ class E extends v {
     this.graphics?.length > 0 && await this.setGraphics();
   }
   render() {
-    const e = this.isLoading ? "" : "display-none", t = this.isLoading || this._editRecordOpen ? "visibility-hidden" : "position-absolute", a = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none", n = !this.isLoading && this._editRecordOpen || this._showListView ? "display-none" : "", o = this._features?.features && this._features.features.length < 2 || this._navigatedToRelatedFeature, h = Number(this._features?.selectedFeature?.getObjectId()), p = Number.isNaN(h) ? [] : [h], c = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete, u = this._relatedFeature ? [this._relatedFeature] : this.graphics, _ = this._navigatedToRelatedFeature ? 0 : this._features?.selectedFeatureIndex, l = this.isMobile ? "display-none" : "";
-    return s`<calcite-shell class="z-index-1" style=${$({ position: this.position })}>${this._getHeader()}<calcite-loader class=${i(e)} .label=${this._translations.fetchingData}></calcite-loader><div class=${i("esri-widget feature-node " + t)} id=${this._featuresNodeId ?? m}></div><div class=${`${n} width-100`} slot=footer>${this.allowEditing ? s`<div class="display-flex top-border padding-1-2"><calcite-button appearance=solid id=solutions-edit @click=${() => this._openEditRecord()} width=full>${this._translations.edit}</calcite-button>${this.isMobile && c ? s`<delete-button class="padding-inline-start-1 width-100" id=solutions-delete .ids=${p} .layer=${this._layer} @editsComplete=${() => this._closePopup()}></delete-button>` : void 0}<calcite-tooltip class=${i(l)} placement=bottom reference-element=solutions-edit><span>${this._translations.edit}</span></calcite-tooltip>${this.isMobile && c ? s`<calcite-tooltip class=${i(l)} placement=bottom reference-element=solutions-delete><span>${this._translations.delete}</span></calcite-tooltip>` : void 0}</div>` : ""}${this.paginationEnabled && !o && s`<div class=${"display-flex padding-1-2 button-container top-border"}><div><calcite-button appearance=transparent .disabled=${o} icon-flip-rtl=both icon-start=chevron-left id=solutions-back @click=${() => this._back()} width=full></calcite-button><calcite-tooltip class=${i(l)} placement=top reference-element=solutions-back><span>${this._translations.back}</span></calcite-tooltip></div><calcite-action appearance=solid class="pagination-action" icon-flip-rtl @click=${() => this._toggleListView()} scale=s text text-enabled><span class="pagination-count">${this._count}</span></calcite-action><div><calcite-button appearance=transparent .disabled=${o} icon-flip-rtl=both icon-start=chevron-right id=solutions-next @click=${() => this._next()} width=full></calcite-button><calcite-tooltip class=${i(l)} placement=top reference-element=solutions-next><span>${this._translations.next}</span></calcite-tooltip></div></div>` || ""}</div><edit-card .allowMultipleEditing=${this._isMultipleEdits} class=${i(a)} .enableEditGeometry=${this.enableEditGeometry} .enableSnapping=${this.enableSnapping} .graphicIndex=${_} .graphics=${u} .mapView=${this.mapView} .open=${this._editRecordOpen}></edit-card><calcite-alert auto-close icon=layer-broken kind=warning label @calciteAlertClose=${() => this._alertClosed()} .open=${this._alertOpen} placement=top><div slot=title>${this._translations.editDisabled}</div><div slot=message>${this._translations.enableEditing}</div></calcite-alert></calcite-shell>`;
+    const e = this.isLoading ? "" : "display-none", t = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none", a = !this.isLoading && this._editRecordOpen || this._showListView ? "display-none" : "", l = this._features.value?.features && this._features.value.features.length < 2 || this._navigatedToRelatedFeature, h = Number(this._features.value?.selectedFeature?.getObjectId()), u = Number.isNaN(h) ? [] : [h], d = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete, p = this._relatedFeature ? [this._relatedFeature] : this.graphics, f = this._navigatedToRelatedFeature ? 0 : this._features.value?.selectedFeatureIndex, o = this.isMobile ? "display-none" : "";
+    return i`<calcite-shell class="z-index-1" style=${y({ position: this.position })}>${this._getHeader()}<calcite-loader class=${s(e)} .label=${this._translations.fetchingData}></calcite-loader>${this.mapView && this._getFeaturesComponent() || ""}<div class=${`${a} width-100`} slot=footer>${this.allowEditing ? i`<div class="display-flex top-border padding-1-2"><calcite-button appearance=solid id=solutions-edit @click=${() => this._openEditRecord()} width=full>${this._translations.edit}</calcite-button>${this.isMobile && d ? i`<delete-button class="padding-inline-start-1 width-100" id=solutions-delete .ids=${u} .layer=${this._layer} @editsComplete=${() => this._closePopup()}></delete-button>` : void 0}<calcite-tooltip class=${s(o)} placement=bottom reference-element=solutions-edit><span>${this._translations.edit}</span></calcite-tooltip>${this.isMobile && d ? i`<calcite-tooltip class=${s(o)} placement=bottom reference-element=solutions-delete><span>${this._translations.delete}</span></calcite-tooltip>` : void 0}</div>` : ""}${this.paginationEnabled && !l && i`<div class=${"display-flex padding-1-2 button-container top-border"}><div><calcite-button appearance=transparent .disabled=${l} icon-flip-rtl=both icon-start=chevron-left id=solutions-back @click=${() => this._back()} width=full></calcite-button><calcite-tooltip class=${s(o)} placement=top reference-element=solutions-back><span>${this._translations.back}</span></calcite-tooltip></div><calcite-action class="pagination-action" icon-flip-rtl @click=${() => this._toggleListView()} scale=s .text=${this._translations.toggleListView} text-enabled><span class="pagination-count">${this._count}</span></calcite-action><div><calcite-button appearance=transparent .disabled=${l} icon-flip-rtl=both icon-start=chevron-right id=solutions-next @click=${() => this._next()} width=full></calcite-button><calcite-tooltip class=${s(o)} placement=top reference-element=solutions-next><span>${this._translations.next}</span></calcite-tooltip></div></div>` || ""}</div><edit-card .allowMultipleEditing=${this._isMultipleEdits} class=${s(t)} .enableEditGeometry=${this.enableEditGeometry} .enableSnapping=${this.enableSnapping} .graphicIndex=${f} .graphics=${p} .mapView=${this.mapView} .open=${this._editRecordOpen}></edit-card><calcite-alert auto-close icon=layer-broken kind=warning label @calciteAlertClose=${() => this._alertClosed()} .open=${this._alertOpen} placement=top><div slot=title>${this._translations.editDisabled}</div><div slot=message>${this._translations.enableEditing}</div></calcite-alert></calcite-shell>`;
   }
   async setGraphics() {
-    this._features || await this._initFeaturesWidget(), this.graphics.length > 0 ? (this._layer = this.graphics[0]?.layer, this._editEnabled = !!(this._layer.editingEnabled && this._layer.capabilities?.operations.supportsUpdate), this._mobileTitle = this.mapView?.map && await this._popupUtils?.getPopupTitle(this.graphics[0], this.mapView.map) || "", this._features?.open({
-      features: this.graphics
-    })) : (this._features?.clear(), this._features?.close()), this._count = this._getCount();
-  }
-  async _initFeaturesWidget() {
-    return this.isMobile !== void 0 ? await this.mapView?.when(() => {
-      if (this._features)
-        this._features.view = this.mapView, this._features.visibleElements.actionBar = !1, this._features.visibleElements.closeButton = !!this.showCloseBtn, this._features.visibleElements.heading = !this.isMobile;
-      else if (this._features = new x({
-        view: this.mapView,
-        container: this._featuresNodeId,
-        visibleElements: {
-          actionBar: !1,
-          closeButton: this.showCloseBtn,
-          featureMenuHeading: !1,
-          heading: !this.isMobile
-        }
-      }), this._features) {
-        this._features.viewModel.highlightEnabled = !!this.highlightEnabled, d.watch(() => (this._features?.viewModel).featureMenuOpen, (t) => {
-          this._updateCount(), t || (this._showListView = t);
-        }), d.watch(() => this._features?.selectedFeatureIndex, (t) => {
-          t !== void 0 && t > -1 && this._features?.selectedFeature && this.selectionChanged.emit({
-            selectedFeature: [this._features.selectedFeature],
-            selectedFeatureIndex: this._features.selectedFeatureIndex
-          });
-        }), d?.watch(() => this._features.selectedDrillInFeature, (t) => {
-          t ? (this._relatedFeature = t, this._navigatedToRelatedFeature = !0) : (this._relatedFeature = void 0, this._navigatedToRelatedFeature = !1);
-        });
-        const e = this.el.querySelector("#" + this._featuresNodeId);
-        this.listenOn(e, "calciteFlowItemClose", () => {
-          this.clearSelection.emit();
-        });
+    this._features.value && (this.graphics.length > 0 ? (this._layer = this.graphics[0]?.layer, this._editEnabled = this._layer.editingEnabled && this._layer.capabilities?.operations.supportsUpdate, this._mobileTitle = this.mapView?.map && await this._popupUtils?.getPopupTitle(this.graphics[0], this.mapView.map) || "", this._features.value && (this._features.value.open = !0), this._features.value && (this._features.value.features = this.graphics)) : (await this._features.value.clear(), await this._features.value.close()), this._count = this._getCount());
+  }
+  handleHeaderActions() {
+    this.showCopyPasteActions && this._features.value?.headerActions.length === 0 ? (this._features.value.headerActions.addMany(this._getHeaderActions()), this._headerActionsHandle && this._headerActionsHandle.remove(), this._headerActionsHandle = r.on(() => this._features.value, "arcgisTriggerAction", (e) => {
+      e.detail.action.id === "copy-features" ? this.copyFeatures.emit({ featuresIds: this.graphics.map((t) => t.getObjectId()), layerId: this._layer?.id }) : e.detail.action.id === "paste-features" && this.pasteFeatures.emit();
+    })) : !this.showCopyPasteActions && this._features.value && this._features.value.headerActions.length > 0 && (this._features.value.headerActions.removeAll(), this._headerActionsHandle?.remove(), this._headerActionsHandle = void 0);
+  }
+  async featuresComponentReady() {
+    if (this._features.value) {
+      if (this.featuresReferenceId) {
+        const e = document.getElementById(this.featuresReferenceId);
+        e && (await e.viewOnReady(), this._features.value.referenceElement = e);
       }
-    }) : Promise.resolve();
+      this.handleHeaderActions(), await this.setGraphics(), this._features.value.selectedFeature && this.selectionChanged.emit({
+        selectedFeature: [this._features.value.selectedFeature],
+        selectedFeatureIndex: this._features.value.selectedFeatureIndex
+      }), r.watch(() => this._features.value?.featureMenuOpen, (e) => {
+        this._updateCount(), e || (this._showListView = e ?? !1);
+      }), r.watch(() => this._features.value?.selectedFeatureIndex, (e) => {
+        e !== void 0 && e > -1 && this._features.value?.selectedFeature && this.selectionChanged.emit({
+          selectedFeature: [this._features.value.selectedFeature],
+          selectedFeatureIndex: this._features.value.selectedFeatureIndex
+        });
+      }), r.watch(() => this._features.value?.selectedDrillInFeature, (e) => {
+        e ? (this._relatedFeature = e, this._navigatedToRelatedFeature = !0) : (this._relatedFeature = void 0, this._navigatedToRelatedFeature = !1);
+      });
+    }
   }
   _getHeader() {
-    return this.isMobile && !this._editRecordOpen ? s`<calcite-panel class="border-width-0" slot=header><calcite-action appearance=solid class="end-border" icon=chevron-left icon-flip-rtl @click=${() => this._closePopup()} scale=s slot=header-actions-start text></calcite-action><span class="font-bold" slot=header-content>${this._mobileTitle}</span></calcite-panel>` : void 0;
+    return this.isMobile && !this._editRecordOpen ? i`<calcite-panel class="border-width-0" slot=header><calcite-action class="end-border" icon=chevron-left icon-flip-rtl @click=${() => this._closePopup()} scale=s slot=header-actions-start text></calcite-action><span class="font-bold" slot=header-content>${this._mobileTitle}</span></calcite-panel>` : void 0;
+  }
+  _getFeaturesComponent() {
+    const e = this._editRecordOpen ? "display-none" : "";
+    return i`<arcgis-features class=${s(e)} .view=${this.mapView} hide-action-bar .hideCloseButton=${!this.showCloseBtn} hide-feature-menu-heading .hideHeading=${this.isMobile} .highlightDisabled=${!this.highlightEnabled} hide-feature-navigation @arcgisReady=${this.featuresComponentReady} @arcgisClose=${() => {
+      this.clearSelection.emit();
+    }} ${F(this._features)}></arcgis-features>`;
+  }
+  _getHeaderActions() {
+    return [
+      new c({
+        id: "copy-features",
+        title: this._translations.copy,
+        className: "copy-features",
+        icon: "copy",
+        disabled: this.graphics.length === 0
+      }),
+      new c({
+        id: "paste-features",
+        title: this._translations.paste,
+        className: "paste-features",
+        icon: "paste-with-attribute",
+        disabled: !this.pasteEnabled
+      })
+    ];
   }
   _closePopup() {
     this.popupClosed.emit();
@@ -136,30 +146,27 @@ class E extends v {
     this._editEnabled ? this._editRecordOpen = !0 : this._alertOpen = !0;
   }
   async _back() {
-    this._features?.previous(), await this._updateCount();
+    await this._features.value?.previous(), await this._updateCount();
   }
   async _next() {
-    this._features?.next(), await this._updateCount();
+    await this._features.value?.next(), await this._updateCount();
   }
   async _updateCount() {
-    const e = this._features?.selectedFeatureIndex;
+    const e = this._features.value?.selectedFeatureIndex;
     this._popupUtils && this.mapView && this.mapView.map && e !== void 0 && (this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[e], this.mapView.map)), this._count = this._getCount();
   }
   _getCount() {
-    const e = this._features?.viewModel && (this._features?.viewModel.selectedFeatureIndex + 1).toString() || "", t = this._features?.features?.length.toString() || "";
+    const e = this._features.value?.viewModel && (this._features.value?.viewModel.selectedFeatureIndex + 1).toString() || "", t = this._features.value?.features?.length.toString() || "";
     return this._translations.indexOfTotal.replace("{{index}}", e).replace("{{total}}", t) || "";
   }
   _toggleListView() {
-    if (this._showListView = !this._showListView, this._features) {
-      const e = this._features.selectedFeatureIndex;
-      this._features.open({
-        features: this.graphics,
-        featureMenuOpen: this._showListView
-      }), this._features.selectedFeatureIndex = e;
+    if (this._showListView = !this._showListView, this._features.value) {
+      const e = this._features.value?.selectedFeatureIndex;
+      this._features.value.open = !0, this._features.value.featureMenuOpen = this._showListView, this._features.value.features = this.graphics, this._features.value.selectedFeatureIndex = e;
     }
   }
 }
-f("info-card", E);
+_("info-card", x);
 export {
-  E as InfoCard
+  x as InfoCard
 };

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

@@ -7,4 +7,5 @@ import "@esri/calcite-components/components/calcite-action";
 import "../edit-card/index.js";
 import "@esri/calcite-components/components/calcite-alert";
 import "@esri/calcite-components/components/calcite-panel";
+import "@arcgis/map-components/components/arcgis-features";
 export * from "./customElement.js";

package/dist/components/layer-list/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 { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
@@ -33,8 +33,8 @@ export abstract class LayerList extends LitElement {
   accessor filterByMapExtent: boolean;
   /** string[]: If passed will show only these layers in the list if they are present in map and are editable */
   accessor layers: string[];
-  /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
+  accessor mapView: MapView | undefined;
   /**
    * boolean: if true display's feature count for each layer
    *

package/dist/components/layer-list/customElement.js

@@ -1,11 +1,11 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as y } from "../../chunks/runtime.js";
 import { d, a as m, c as p } from "../../chunks/mapViewUtils.js";
-import * as o from "@arcgis/core/intl";
+import * as o from "@arcgis/core/intl.js";
 import { u as f } from "../../chunks/useT9n.js";
 import { css as L, html as a } from "lit";
 import { LitElement as u, createEvent as h, noShadowRoot as w } from "@arcgis/lumina";
-import * as g from "@arcgis/core/core/reactiveUtils";
+import * as g from "@arcgis/core/core/reactiveUtils.js";
 async function _(n, t) {
   const { style: i = "decimal", places: e = 2 } = t || {}, s = o.convertNumberFormatToIntlOptions({
     places: e,
@@ -108,7 +108,7 @@ class I extends u {
     const i = this._layerItemsHash && this._layerItemsHash[t].name, e = this._layerItemsHash && this._layerItemsHash[t].formattedFeatureCount;
     return a`<calcite-list-item @calciteListItemSelect=${() => {
       this.onLayerItemSelected(t);
-    }}><div class="layer-name" slot=content-start>${i}</div>${this.showFeatureCount && e !== void 0 && e !== "" && a`<div class="feature-count" slot=content-end>${`(${e})`}</div>` || ""}${this.showNextIcon && a`<calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon>` || ""}</calcite-list-item>`;
+    }}><div class="layer-name" slot=content-start>${i}</div>${this.showFeatureCount && e !== void 0 && e !== "" && a`<div class="feature-count" slot=content-end>${`(${e})`}</div>` || ""}${this.showNextIcon && a`<calcite-icon aria-hidden=true flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon>` || ""}</calcite-list-item>`;
   }
   getExtentNotice() {
     return a`<calcite-notice class="notice-msg" icon=extent-filter kind=brand open scale=s><div slot=message>${this._translations.extentFilterMsg}</div></calcite-notice>`;

package/dist/components/layer-list-widget/customElement.d.ts

@@ -1,22 +1,19 @@
 /// <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 { VisibilityIconType } from "../../utils/interfaces.js";
+import type { Ref } from "lit-html/directives/ref.js";
+import type { ArcgisLayerList as ArcgisLayerList2 } from "@arcgis/map-components/components/arcgis-layer-list";
 
 export abstract class LayerListWidget extends LitElement {
-  /** arcgis/core/widgets/LayerList: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html */
-  accessor layerListWidget: __esri.LayerList | undefined;
+  /** arcgis-layer-list web component: https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-layer-list/ */
+  accessor layerListRef: Ref<ArcgisLayerList2>;
   /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
   /**
    * VisibilityIconType: visibility icon for the layer list widget
    *
    * @default 'eyeball'
    */
   accessor visibilityIcon: VisibilityIconType;
-  /** Emitted on demand when the fullscreen widget state has changed */
-  readonly fullscreenStateChange: import("@arcgis/lumina").TargetedEvent<this, string>;
-  readonly "@eventTypes": {
-    fullscreenStateChange: LayerListWidget["fullscreenStateChange"]["detail"];
-  };
 }

package/dist/components/layer-list-widget/customElement.js

@@ -1,47 +1,30 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as t } from "../../chunks/runtime.js";
 import { css as e, html as s } from "lit";
-import { LitElement as a, createEvent as c } from "@arcgis/lumina";
-import l from "@arcgis/core/widgets/LayerList";
-const r = e`:host{display:block}`;
-class n extends a {
+import { LitElement as l, safeStyleMap as r } from "@arcgis/lumina";
+import { createRef as a, ref as c } from "lit-html/directives/ref.js";
+const o = e`:host{display:block}`;
+class y extends l {
   constructor() {
-    super(...arguments), this.visibilityIcon = "eyeball", this.fullscreenStateChange = c();
+    super(...arguments), this.layerListRef = a(), this.visibilityIcon = "eyeball";
   }
   static {
-    this.properties = { mapView: 0, layerListWidget: 0, visibilityIcon: 1 };
+    this.properties = { mapView: 0, layerListRef: 0, visibilityIcon: 1 };
   }
   static {
-    this.styles = r;
+    this.styles = o;
   }
   willUpdate(i) {
-    i.has("mapView") && this.mapViewWatchHandler(), i.has("visibilityIcon") && this.visibilityIconWatchHandler();
-  }
-  async mapViewWatchHandler() {
-    await this.mapView?.when(async () => {
-      await this._initLayerListWidget();
-    });
+    i.has("visibilityIcon") && this.visibilityIconWatchHandler();
   }
   async visibilityIconWatchHandler() {
-    this.layerListWidget && (this.layerListWidget.visibilityAppearance = this.visibilityIcon === "checkbox" ? "checkbox" : "default");
+    this.layerListRef.value && (this.layerListRef.value.visibilityAppearance = this.visibilityIcon === "checkbox" ? "checkbox" : "default");
   }
   render() {
-    return s`<div class="layer-list-widget"></div>`;
-  }
-  async updated() {
-    this.hasUpdated || await this._initLayerListWidget();
-  }
-  async loaded() {
-    await this._initLayerListWidget();
-  }
-  async _initLayerListWidget() {
-    this.mapView && (this.layerListWidget = new l({
-      view: this.mapView,
-      visibilityAppearance: this.visibilityIcon === "checkbox" ? "checkbox" : "default"
-    }));
+    return this.mapView && s`<arcgis-layer-list style=${r(document.dir === "rtl" ? "direction: rtl;" : "direction: ltr;")} auto-destroy-disabled .view=${this.mapView} .visibilityAppearance=${this.visibilityIcon === "checkbox" ? "checkbox" : "default"} ${c(this.layerListRef)}></arcgis-layer-list>` || "";
   }
 }
-t("layer-list-widget", n);
+t("layer-list-widget", y);
 export {
-  n as LayerListWidget
+  y as LayerListWidget
 };

package/dist/components/layer-list-widget/index.js

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