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

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

@@ -18,6 +18,8 @@ export abstract class CardManager extends LitElement {
       createRecord: string;
       create: string;
       back: string;
+      createMultiple: string;
+      moveClipboardFeatures: string;
   } & T9nMeta<{
       selectFeaturesToStart: string;
       selectFeaturesFromMapToStart: string;
@@ -25,7 +27,11 @@ export abstract class CardManager extends LitElement {
       createRecord: string;
       create: string;
       back: string;
+      createMultiple: string;
+      moveClipboardFeatures: string;
   }>;
+  /** string[]: list of layer ids that are allowed for paste operations */
+  accessor allowedPasteLayerIds: string[];
   /**
    * string: Label to show for create button
    *
@@ -67,8 +73,20 @@ export abstract class CardManager extends LitElement {
    * Should be a layer or table
    */
   accessor layerOrTable: FeatureLayer | undefined;
+  /**
+   * string: Id to pass in the map component
+   *
+   * @default ''
+   */
+  accessor mapComponentId: string | undefined;
   /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
   accessor mapView: MapView | undefined;
+  /**
+   * boolean: When true the paste action will be enabled
+   *
+   * @default false
+   */
+  accessor pasteEnabled: boolean;
   /** A list of ids that are currently selected */
   accessor selectedFeaturesIds: (number | string)[];
   /**
@@ -77,6 +95,12 @@ export abstract class CardManager extends LitElement {
    * @default false
    */
   accessor selectingFeatureFromMap: boolean;
+  /**
+   * boolean: When true the copy and paste actions will be shown
+   *
+   * @default false
+   */
+  accessor showCopyPasteActions: boolean;
   /**
    * boolean: When true the sketch widgets will be shown in the create feature component
    *
@@ -95,9 +119,15 @@ export abstract class CardManager extends LitElement {
   readonly createWorkFlowStarted: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emits when feature/record is submitted */
   readonly featureOrRecordSubmitted: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Emitted when the features have been copied to the clipboard */
+  readonly featuresCopied: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Emitted when the features have been pasted from the clipboard */
+  readonly featuresPasted: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     backFromCreateWorkFlow: CardManager["backFromCreateWorkFlow"]["detail"];
     createWorkFlowStarted: CardManager["createWorkFlowStarted"]["detail"];
     featureOrRecordSubmitted: CardManager["featureOrRecordSubmitted"]["detail"];
+    featuresCopied: CardManager["featuresCopied"]["detail"];
+    featuresPasted: CardManager["featuresPasted"]["detail"];
   };
 }

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

@@ -1,24 +1,41 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as d } from "../../chunks/runtime.js";
-import { css as u, html as a } from "lit";
-import { a as p } from "../../chunks/queryUtils.js";
-import { g as m } from "../../chunks/mapViewUtils.js";
-import { u as b } from "../../chunks/useT9n.js";
-import { createRef as g, ref as f } from "lit-html/directives/ref.js";
-import { LitElement as F, createEvent as r, noShadowRoot as w } from "@arcgis/lumina";
-const _ = u`@layer{:host{display:block!important}.display-none{display:none}.padding-1{padding:1rem}.position-relative{position:relative}.overflow-auto{overflow:auto}.height-full{height:100%}.position-static{position:static!important}.z-index-500{z-index:500!important}card-manager{display:block}}`;
-class C extends F {
+import { c as C } from "../../chunks/runtime.js";
+import { css as g, html as s } from "lit";
+import { a as c } from "../../chunks/queryUtils.js";
+import { g as w } from "../../chunks/mapViewUtils.js";
+import { u as _ } from "../../chunks/useT9n.js";
+import { createRef as p, ref as d } from "lit-html/directives/ref.js";
+import { LitElement as f, createEvent as o, noShadowRoot as b, safeClassMap as y } from "@arcgis/lumina";
+const F = g`@layer{:host{display:block!important}.display-none{display:none}.padding-1{padding:1rem}.position-relative{position:relative}.overflow-auto{overflow:auto}.height-full{height:100%}.paste-component{--arcgis-paste-height: 100%;--arcgis-paste-width: 100%;height:100%;width:100%}.position-static{position:static!important}.z-index-500{z-index:500!important}.margin-top-10{margin-top:10px}card-manager{display:block}}`;
+class v extends f {
   constructor() {
-    super(), this.customInfoText = "", this.enableEditGeometry = !1, this.enableSnapping = !1, this.isMobile = !1, this.zoomAndScrollToSelected = !1, this.selectedFeaturesIds = [], this.enableCreateFeatures = !0, this.createBtnLabel = "", this.selectingFeatureFromMap = !1, this.showSketchWidgets = !1, this._cardLoading = !1, this._graphics = [], this._showCreateFeatureComponent = !1, this._showSubmitBtn = !1, this._translations = b({ name: "card-manager", blocking: !0 }), this._isFeatureCreated = !1, this._createFeature = g(), this.createWorkFlowStarted = r(), this.backFromCreateWorkFlow = r(), this.featureOrRecordSubmitted = r(), this.listenOn(window, "featureSelectionChange", this.featureSelectionChange), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "relatedRecordToggled", this.relatedRecordToggled);
+    super(), this.customInfoText = "", this.enableEditGeometry = !1, this.enableSnapping = !1, this.isMobile = !1, this.zoomAndScrollToSelected = !1, this.selectedFeaturesIds = [], this.enableCreateFeatures = !0, this.createBtnLabel = "", this.selectingFeatureFromMap = !1, this.showSketchWidgets = !1, this.mapComponentId = "", this.pasteEnabled = !1, this.showCopyPasteActions = !1, this.allowedPasteLayerIds = [], this._cardLoading = !1, this._graphics = [], this._showCreateFeatureComponent = !1, this._showSubmitBtn = !1, this._activeFeatureCreationCount = 1, this._isPasting = !1, this._translations = _({ name: "card-manager", blocking: !0 }), this._isFeatureCreated = !1, this._createFeature = p(), this._pasteComponent = p(), this.createWorkFlowStarted = o(), this.backFromCreateWorkFlow = o(), this.featureOrRecordSubmitted = o(), this.featuresCopied = o(), this.featuresPasted = o(), this._featuresAdded = () => {
+      this._isPasting && this._pasteComponent.value && this._resetPasteWorkflow();
+    }, this._pasteComponentReady = async () => {
+      if (this._pasteComponent.value && this.mapComponentId && this._pasteComponent.value.referenceElement === void 0) {
+        const e = document.getElementById(this.mapComponentId);
+        await e.viewOnReady(), this._pasteComponent.value.referenceElement = e;
+      }
+    }, this._applyPasteCommand = async (e) => {
+      if (!this._pasteComponent.value) {
+        console.error("Paste failed: paste component is not available.");
+        return;
+      }
+      try {
+        e.detail.applySet && (this._isPasting = !0, await this._pasteComponent.value.writeChanges(e.detail.applySet), await this._resetPasteWorkflow());
+      } catch (t) {
+        await this._resetPasteWorkflow(), console.error("Paste failed:", t);
+      }
+    }, this.listenOn(window, "featureSelectionChange", this.featureSelectionChange), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "mapChanged", this.mapChanged), this.listenOn(window, "relatedRecordToggled", this.relatedRecordToggled), this.listenOn(window, "copyFeatures", this._copyFeatures), this.listenOn(window, "pasteFeatures", this._pasteFeatures), this.listenOn(window, "featuresAdded", this._featuresAdded);
   }
   static {
-    this.properties = { customInfoText: 1, enableEditGeometry: 5, enableSnapping: 5, isMobile: 5, layerOrTable: 0, mapView: 0, zoomAndScrollToSelected: 5, selectedFeaturesIds: 0, enableCreateFeatures: 5, createBtnLabel: 1, selectingFeatureFromMap: 5, showSketchWidgets: 5, _cardLoading: 16, _graphics: 16, _showCreateFeatureComponent: 16, _showSubmitBtn: 16, _translations: 16 };
+    this.properties = { customInfoText: 1, enableEditGeometry: 5, enableSnapping: 5, isMobile: 5, layerOrTable: 0, mapView: 0, zoomAndScrollToSelected: 5, selectedFeaturesIds: 0, enableCreateFeatures: 5, createBtnLabel: 1, selectingFeatureFromMap: 5, showSketchWidgets: 5, mapComponentId: 1, pasteEnabled: 5, showCopyPasteActions: 5, allowedPasteLayerIds: 0, _cardLoading: 16, _graphics: 16, _showCreateFeatureComponent: 16, _showSubmitBtn: 16, _activeFeatureCreationCount: 16, _isPasting: 16, _translations: 16 };
   }
   static {
-    this.styles = _;
+    this.styles = F;
   }
   static {
-    this.shadowRootOptions = w;
+    this.shadowRootOptions = b;
   }
   async featureSelectionChange(e) {
     this._showCreateFeatureComponent && !this._isFeatureCreated && this._backFromCreateFeature();
@@ -28,22 +45,73 @@ class C extends F {
   async layerSelectionChange(e) {
     this._showCreateFeatureComponent && this._backFromCreateFeature();
     const t = e.detail[0];
-    this.layerOrTable = this.mapView ? await m(this.mapView, t) : void 0;
+    this.layerOrTable = this.mapView ? await w(this.mapView, t) : void 0, await this._resetPasteWorkflow();
+  }
+  async mapChanged(e) {
+    await this._resetPasteWorkflow();
   }
   async relatedRecordToggled(e) {
     const t = e.detail;
     this.layerOrTable = t;
   }
+  async _copyFeatures(e) {
+    if (!this._pasteComponent.value)
+      return;
+    const t = e.detail.featuresIds, a = this.layerOrTable, i = await c(t, a, [], !0, this.mapView?.spatialReference), r = [];
+    i.forEach((n) => {
+      const l = {
+        layer: n.layer,
+        graphic: n,
+        type: "feature"
+      };
+      r.push(l);
+    }), this._pasteComponent.value.clipboard.setData(r), this.featuresCopied.emit(), this.requestUpdate();
+  }
+  async _pasteFeatures(e) {
+    if (!this._pasteComponent.value) {
+      console.error("Paste failed: paste component is not available.");
+      return;
+    }
+    try {
+      this._pasteComponent.value.closed = !1, await this._pasteComponent.value.showClipboardItems(!0), await this._pasteComponent.value.startMoveClipboard(!0), this.featuresPasted.emit();
+    } catch (t) {
+      console.error("Paste failed:", t);
+    }
+  }
+  _getLayerPermissionsCheck() {
+    const e = this.allowedPasteLayerIds?.length > 0 ? this.allowedPasteLayerIds.map(String) : this.layerOrTable?.id !== void 0 ? [String(this.layerOrTable.id)] : [], t = new Set(e);
+    return {
+      canCreate: (a) => t.has(String(a.id)) && !!a.capabilities?.operations?.supportsAdd,
+      canUpdate: (a) => t.has(String(a.id)) && !!a.capabilities?.operations?.supportsUpdate
+    };
+  }
+  async _resetPasteWorkflow() {
+    if (!this._pasteComponent.value) {
+      this._isPasting = !1;
+      return;
+    }
+    try {
+      await this._pasteComponent.value.showClipboardItems(!1), await this._pasteComponent.value.cancelMoveClipboard();
+    } catch (e) {
+      console.error("Reset paste workflow failed:", e);
+    } finally {
+      this._isPasting = !1, this._pasteComponent.value.closed = !0;
+    }
+  }
   async load() {
     this.selectedFeaturesIds?.length > 0 && (this._graphics = await this._getFeaturesByIds(this.selectedFeaturesIds));
   }
   render() {
-    const e = this._graphics?.length > 0 ? "" : "display-none", t = this._graphics?.length === 0 && this._showCreateFeatureComponent ? "" : "display-none", i = this._graphics?.length > 0 || this._showCreateFeatureComponent ? "display-none" : "", s = this.layerOrTable?.isTable, l = this.customInfoText ? this.customInfoText : this.selectingFeatureFromMap ? this._translations.selectFeaturesFromMapToStart : this._translations.selectFeaturesToStart, n = this.enableCreateFeatures && this.layerOrTable?.capabilities?.operations?.supportsAdd, o = this.createBtnLabel ? this.createBtnLabel : s ? this._translations.createRecord : this._translations.createFeature, c = !this.layerOrTable, h = this.enableSnapping && !this.layerOrTable?.isTable;
-    return a`<div class="overflow-auto height-full"><calcite-shell class=${`position-relative ${e}`}><div class="position-static z-index-500 height-full"><info-card .allowEditing=${this.layerOrTable?.editingEnabled} .enableEditGeometry=${this.enableEditGeometry} .enableSnapping=${h} .graphics=${this._graphics} .isLoading=${this._cardLoading} .isMobile=${this.isMobile} .mapView=${this.mapView} position=relative show-close-btn></info-card></div></calcite-shell><calcite-shell class=${`position-relative ${i}`}><calcite-panel><div class=padding-1><calcite-notice .icon=${this.selectingFeatureFromMap ? "map" : "table"} icon-flip-rtl open><div slot=message>${l}</div></calcite-notice></div>${!this.isMobile && n && a`<calcite-button .disabled=${c} @click=${() => this._createFeatureBtnClicked()} slot=footer width=full>${o}</calcite-button>` || ""}</calcite-panel></calcite-shell><calcite-shell class=${`position-relative ${t}`}><calcite-flow-item selected><calcite-panel .heading=${o}><calcite-action appearance=solid class="back-button hydrated" icon=chevron-left @click=${this._backFromCreateFeature} scale=s slot=header-actions-start .text=${this._translations.back}></calcite-action>${this.getEditorComponent()}${this._showSubmitBtn && a`<calcite-button appearance=solid class="footer-top-button footer-button" @click=${() => this._createFeature.value && void this._createFeature.value.submit()} slot=footer width=full>${this._translations.create}</calcite-button>` || ""}</calcite-panel></calcite-flow-item></calcite-shell></div>`;
+    const e = (this._pasteComponent.value?.closed || !this.showCopyPasteActions) && this._graphics?.length > 0 ? "" : "display-none", t = this._pasteComponent.value?.closed ? "display-none" : "", a = this._graphics?.length === 0 && this._showCreateFeatureComponent ? "" : "display-none", i = this._graphics?.length > 0 || this._showCreateFeatureComponent || !this._pasteComponent.value?.closed && this.showCopyPasteActions ? "display-none" : "", r = this.layerOrTable?.isTable, n = this.customInfoText ? this.customInfoText : this.selectingFeatureFromMap ? this._translations.selectFeaturesFromMapToStart : this._translations.selectFeaturesToStart, l = this.enableCreateFeatures && this.layerOrTable?.capabilities?.operations?.supportsAdd, h = this.createBtnLabel ? this.createBtnLabel : r ? this._translations.createRecord : this._translations.createFeature, u = !this.layerOrTable, m = this.enableSnapping && !this.layerOrTable?.isTable;
+    return s`<div class="overflow-auto height-full"><calcite-shell class=${`position-relative ${e}`}><div class="position-static z-index-500 height-full"><info-card .allowEditing=${this.layerOrTable?.editingEnabled} .enableEditGeometry=${this.enableEditGeometry} .enableSnapping=${m} .graphics=${this._graphics.reverse()} .isLoading=${this._cardLoading} .isMobile=${this.isMobile} .mapView=${this.mapView} .featuresReferenceId=${this.mapComponentId} position=relative .pasteEnabled=${this.pasteEnabled} show-close-btn .showCopyPasteActions=${this.showCopyPasteActions}></info-card></div></calcite-shell><calcite-shell class=${`position-relative ${i}`}><calcite-panel><div class=padding-1><calcite-notice .icon=${this.selectingFeatureFromMap ? "map" : "table"} icon-flip-rtl open><div slot=message>${n}</div></calcite-notice></div>${!this.isMobile && l && s`<calcite-button .disabled=${u} @click=${() => this._createFeatureBtnClicked()} slot=footer width=full>${h}</calcite-button>` || ""}</calcite-panel></calcite-shell><calcite-shell class=${`position-relative ${a}`}><calcite-flow-item selected><calcite-panel .heading=${h}><calcite-action class="back-button hydrated" icon=chevron-left @click=${this._backFromCreateFeature} scale=s slot=header-actions-start .text=${this._translations.back}></calcite-action>${this.getEditorComponent()}${this._showSubmitBtn && s`<calcite-button appearance=solid class="footer-top-button footer-button" @click=${() => this._createFeature.value && void this._createFeature.value.submit()} slot=footer width=full>${this._activeFeatureCreationCount > 1 ? this._translations.createMultiple.replace("{{n}}", String(this._activeFeatureCreationCount)) : this._translations.create}</calcite-button>` || ""}</calcite-panel></calcite-flow-item></calcite-shell>${this.showCopyPasteActions && s`<calcite-panel class=${y(t)} .loading=${this._isPasting}><arcgis-paste always-show-feature-form class=${`paste-component ${t}`} closed @arcgisReady=${this._pasteComponentReady} @arcgisApplyPasteCommand=${this._applyPasteCommand} @arcgisClose=${() => {
+      this._resetPasteWorkflow();
+    }} paste-with-multiple-layers-enabled paste-with-multiple-features-enabled .layerPermissionsCheck=${this._getLayerPermissionsCheck()} .supportedCommands=${["paste", "paste-as"]} .view=${this.mapView} ${d(this._pasteComponent)}><calcite-notice slot=commands-page-message class="margin-top-10" open icon=move><div slot=message>${this._translations.moveClipboardFeatures}</div></calcite-notice></arcgis-paste></calcite-panel>` || ""}</div>`;
   }
   getEditorComponent() {
     const e = this.enableSnapping && !this.layerOrTable?.isTable && this.enableCreateFeatures;
-    return a`<div>${this._showCreateFeatureComponent && a`<create-feature customize-submit .enableSnapping=${e} .mapView=${this.mapView} .isMobile=${this.isMobile} @drawComplete=${() => {
+    return s`<div>${this._showCreateFeatureComponent && s`<create-feature allow-multiple-creation customize-submit .enableSnapping=${e} .mapView=${this.mapView} .isMobile=${this.isMobile} @activeFeatureCountChange=${(t) => {
+      this._activeFeatureCreationCount = t.detail, this._showSubmitBtn = this._activeFeatureCreationCount > 0;
+    }} @drawComplete=${() => {
       this._showSubmitBtn = !0;
     }} @editingAttachment=${(t) => {
       this._showSubmitBtn = !t.detail;
@@ -51,10 +119,10 @@ class C extends F {
       setTimeout(() => {
         this._isFeatureCreated = !1;
       }, 2e3);
-    }} @success=${this._featureCreated} .showSketchWidgets=${this.showSketchWidgets} .selectedLayerId=${this.layerOrTable?.id} .showLayerVisibilityMsg=${this.layerOrTable?.visible === !1} ${f(this._createFeature)}></create-feature>` || ""}</div>`;
+    }} @success=${this._featureCreated} .showSketchWidgets=${this.showSketchWidgets} .selectedLayerId=${this.layerOrTable?.id} show-guiding-msg .showLayerVisibilityMsg=${this.layerOrTable?.visible === !1} ${d(this._createFeature)}></create-feature>` || ""}</div>`;
   }
   async _getFeaturesByIds(e) {
-    return (e.length > 0 && this.layerOrTable && this.mapView ? await p(e, this.layerOrTable, [], !0, this.mapView?.spatialReference) : []).sort((i, s) => e.indexOf(Number(i.getObjectId())) - e.indexOf(Number(s.getObjectId())));
+    return (e.length > 0 && this.layerOrTable && this.mapView ? await c(e, this.layerOrTable, [], !0, this.mapView?.spatialReference) : []).sort((a, i) => e.indexOf(Number(a.getObjectId())) - e.indexOf(Number(i.getObjectId())));
   }
   _createFeatureBtnClicked() {
     this._showCreateFeatureComponent = !0, this.createWorkFlowStarted.emit();
@@ -68,7 +136,7 @@ class C extends F {
     }, 50);
   }
 }
-d("card-manager", C);
+C("card-manager", v);
 export {
-  C as CardManager
+  v as CardManager
 };

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

@@ -5,5 +5,6 @@ import "@esri/calcite-components/components/calcite-notice";
 import "@esri/calcite-components/components/calcite-button";
 import "@esri/calcite-components/components/calcite-flow-item";
 import "@esri/calcite-components/components/calcite-action";
+import "@arcgis/map-components/components/arcgis-paste";
 import "../create-feature/index.js";
 export * from "./customElement.js";

package/dist/components/create-feature/customElement.d.ts

@@ -34,6 +34,7 @@ export abstract class CreateFeature extends LitElement {
       photo: string;
       error: string;
       imageExtractionError: string;
+      imageExtractionPartialError: string;
   } & T9nMeta<{
       chooseCategoryMsg: string;
       provideDetailsMsg: string;
@@ -57,6 +58,7 @@ export abstract class CreateFeature extends LitElement {
       photo: string;
       error: string;
       imageExtractionError: string;
+      imageExtractionPartialError: string;
   }>;
   /** array: Configured AI image extraction field and prompt for the selected LayerId */
   accessor aiImageExtraction: IImageExtraction[] | undefined;
@@ -186,6 +188,11 @@ export abstract class CreateFeature extends LitElement {
    * @returns Promise that resolves when the operation is complete
    */
   submit(): Promise<void>;
+  /**
+   * Emitted on demand when features are being created
+   * The number of features being created is passed as an argument.
+   */
+  readonly activeFeatureCountChange: import("@arcgis/lumina").TargetedEvent<this, number>;
   /** Emitted on demand when drawing is completed */
   readonly drawComplete: import("@arcgis/lumina").TargetedEvent<this, boolean>;
   /** Emitted on demand when editing attachments */
@@ -201,6 +208,7 @@ export abstract class CreateFeature extends LitElement {
   /** Emitted on demand when the feature is created successfully */
   readonly success: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
+    activeFeatureCountChange: CreateFeature["activeFeatureCountChange"]["detail"];
     drawComplete: CreateFeature["drawComplete"]["detail"];
     editingAttachment: CreateFeature["editingAttachment"]["detail"];
     editingLocation: CreateFeature["editingLocation"]["detail"];