@arcgis/portal-components 5.2.0-next.99 → 6.0.0-next.0

package/dist/components/arcgis-portal-extent-picker/customElement.js

@@ -1,32 +1,34 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as S } from "../../chunks/runtime.js";
-import { css as F, html as l } from "lit";
-import M from "@arcgis/core/Basemap.js";
-import L from "@arcgis/core/Color.js";
-import E from "@arcgis/core/config.js";
-import c from "@arcgis/core/geometry/Extent.js";
-import * as V from "@arcgis/core/geometry/geometryEngine.js";
+import { c as R } from "../../chunks/runtime.js";
+import { css as P, html as c } from "lit";
+import A from "@arcgis/core/Basemap.js";
+import $ from "@arcgis/core/Color.js";
+import f from "@arcgis/core/config.js";
+import p from "@arcgis/core/geometry/Extent.js";
+import { intersectionExecute as I } from "@arcgis/core/geometry/operators/intersectionOperator.js";
 import u from "@arcgis/core/geometry/Point.js";
 import h from "@arcgis/core/geometry/Polygon.js";
-import C from "@arcgis/core/geometry/SpatialReference.js";
-import * as p from "@arcgis/core/geometry/support/webMercatorUtils.js";
+import k from "@arcgis/core/geometry/SpatialReference.js";
+import * as x from "@arcgis/core/geometry/support/webMercatorUtils.js";
 import g from "@arcgis/core/Graphic.js";
-import * as $ from "@arcgis/core/intl.js";
-import y from "@arcgis/core/layers/GraphicsLayer.js";
-import R from "@arcgis/core/layers/Layer.js";
-import P from "@arcgis/core/layers/TileLayer.js";
-import I from "@arcgis/core/Map.js";
-import A from "@arcgis/core/portal/PortalItem.js";
-import T from "@arcgis/core/request.js";
-import b from "@arcgis/core/symbols/SimpleFillSymbol.js";
-import N from "@arcgis/core/views/MapView.js";
-import O from "@arcgis/core/widgets/Search.js";
-import D from "@arcgis/core/widgets/Sketch/SketchViewModel.js";
-import { LitElement as G, createEvent as w, safeStyleMap as z, safeClassMap as j } from "@arcgis/lumina";
-import { createRef as d, ref as x } from "lit/directives/ref.js";
-import { u as B } from "../../chunks/useT9n.js";
-const W = F`.extent-picker-modal{z-index:1001}.extent-picker-content{display:flex;min-height:100%;height:100%}.side-panel{padding:var(--calcite-spacing-lg);display:flex;flex-direction:column;overflow-y:auto;max-height:100%;width:420px}.extent-button{margin-top:var(--calcite-spacing-lg)}.use-location-header{margin-top:var(--calcite-spacing-xxxl);margin-bottom:var(--calcite-spacing-lg)}.search-container,.search-container .esri-search{width:100%}.search-container calcite-autocomplete{width:100%}.map-panel{flex:1 1 0%;position:relative;display:flex}.map-loader{position:absolute;z-index:var(--calcite-z-index-1);top:50%;left:50%;transform:translate(-50%,-50%)}.map-container{flex:1 1 0%;opacity:0;transition:opacity .3s ease}.loader-container{flex:1 1 0%}.map-container--loaded{opacity:1}.coordinates-section{margin-top:var(--calcite-spacing-lg)}`;
-class J {
+import * as S from "@arcgis/core/intl.js";
+import v from "@arcgis/core/layers/GraphicsLayer.js";
+import V from "@arcgis/core/layers/Layer.js";
+import M from "@arcgis/core/layers/TileLayer.js";
+import T from "@arcgis/core/layers/VectorTileLayer.js";
+import D from "@arcgis/core/layers/MapImageLayer.js";
+import G from "@arcgis/core/Map.js";
+import O from "@arcgis/core/portal/PortalItem.js";
+import F from "@arcgis/core/request.js";
+import * as N from "@arcgis/core/rest/geometryService.js";
+import j from "@arcgis/core/rest/support/ProjectParameters.js";
+import L from "@arcgis/core/symbols/SimpleFillSymbol.js";
+import z from "@arcgis/core/views/MapView.js";
+import { LitElement as B, createEvent as E, safeStyleMap as b, safeClassMap as U } from "@arcgis/lumina";
+import { createRef as m, ref as d } from "lit/directives/ref.js";
+import { u as W } from "../../chunks/useT9n.js";
+const J = P`.extent-picker-modal{z-index:1001}.extent-picker-content{display:flex;min-height:100%;height:100%}.side-panel{padding:var(--calcite-spacing-lg);display:flex;flex-direction:column;overflow-y:auto;max-height:100%;width:420px}.extent-button{margin-top:var(--calcite-spacing-lg)}.use-location-header{margin-top:var(--calcite-spacing-xxxl);margin-bottom:var(--calcite-spacing-lg)}.search-container{width:100%}.search-container .esri-search,.search-container arcgis-search{width:100%}.search-container calcite-autocomplete{width:100%}.map-panel{flex:1 1 0%;position:relative;display:flex}.map-loader{position:absolute;z-index:var(--calcite-z-index-1);top:50%;left:50%;transform:translate(-50%,-50%)}.map-container{flex:1 1 0%;opacity:0;transition:opacity .3s ease}.loader-container{flex:1 1 0%}.map-container--loaded{opacity:1}.coordinates-section{margin-top:var(--calcite-spacing-lg)}`;
+class q {
   constructor(t) {
     this.outerRing = [
       [180, -90],
@@ -37,13 +39,13 @@ class J {
     ], this.map = t;
   }
   init() {
-    this.maskSymbol = new b({
+    this.maskSymbol = new L({
       color: [0, 0, 0, 0.5],
       outline: {
         color: [128, 128, 128, 0.5],
         width: "0px"
       }
-    }), this.maskLayer = new y({ id: "maskLayer " }), this.overlapLayer = new y({ id: "overlapLayer" }), this.map?.add(this.maskLayer), this.map?.add(this.overlapLayer);
+    }), this.maskLayer = new v({ id: "maskLayer " }), this.overlapLayer = new v({ id: "overlapLayer" }), this.map?.add(this.maskLayer), this.map?.add(this.overlapLayer);
   }
   hide() {
     this.maskLayer.visible = !1;
@@ -73,14 +75,14 @@ class J {
     if (!t)
       return i;
     if (t.type === "extent" && t.xmax === t.xmin) {
-      const r = new h({ rings: [this.outerRing] });
-      return i.graphic = new g({ geometry: r, symbol: e }), i;
+      const n = new h({ rings: [this.outerRing] });
+      return i.graphic = new g({ geometry: n, symbol: e }), i;
     }
     t = this.toWGS84(t);
-    let a, o;
+    let a, r;
     if (t.type === "extent") {
-      const r = this.checkPolyOverlap(t);
-      r ? (a = r?.ring?.reverse(), o = r?.oring?.reverse()) : a = [
+      const n = this.checkPolyOverlap(t);
+      n ? (a = n?.ring?.reverse(), r = n?.oring?.reverse()) : a = [
         [t.xmin, t.ymax],
         [t.xmax, t.ymax],
         [t.xmax, t.ymin],
@@ -90,10 +92,10 @@ class J {
     }
     let s = [];
     t.xmin === t.xmax ? s = [this.outerRing] : s = [this.outerRing, a?.reverse() || [[]]];
-    const n = new h({
+    const o = new h({
       rings: s
     });
-    return o && (i.overlap = o), i.graphic = new g({ geometry: n, symbol: e }), i;
+    return r && (i.overlap = r), i.graphic = new g({ geometry: o, symbol: e }), i;
   }
   checkPolyOverlap(t) {
     const e = {};
@@ -110,119 +112,145 @@ class J {
         [t.xmax, t.ymax],
         [-180, t.ymax],
         [-180, t.ymin]
-      ], o = 180 - Math.abs(t.xmax), s = 180 - Math.abs(t.xmin);
-      return o > s ? (e.ring = a, e.oring = i) : (e.ring = i, e.oring = a), e;
+      ], r = 180 - Math.abs(t.xmax), s = 180 - Math.abs(t.xmin);
+      return r > s ? (e.ring = a, e.oring = i) : (e.ring = i, e.oring = a), e;
     } else
       return;
   }
   toWGS84(t) {
-    const e = new C({ wkid: 4326 });
-    return p.canProject(t, e) ? p.project(t, e) : t;
+    const e = new k({ wkid: 4326 });
+    return x.canProject(t, e) ? x.project(t, e) : t;
   }
 }
-function U(m) {
-  if (!m)
+function _(y) {
+  if (!y)
     return;
-  let t = E.assetsPath;
-  t.endsWith("/") || (t += "/"), m?.firstElementChild?.insertAdjacentHTML(
+  let t = f.assetsPath;
+  t.endsWith("/") || (t += "/"), y?.firstElementChild?.insertAdjacentHTML(
     "beforebegin",
     `<link rel="stylesheet" href="${t}esri/themes/light/main.css" />`
   );
 }
-class q extends G {
+class H extends B {
   constructor() {
-    super(...arguments), this.polygonSymbol = new b({
+    super(...arguments), this.polygonSymbol = new L({
       style: "solid",
-      color: new L([227, 139, 79, 0]),
+      color: new $([227, 139, 79, 0]),
       outline: {
-        color: new L([65, 105, 255]),
+        color: new $([65, 105, 255]),
         width: 0
       }
-    }), this.dlOverlapSymbol = new b({
+    }), this.dlOverlapSymbol = new L({
       style: "solid",
       color: [255, 0, 0, 0.5],
       outline: {
         color: [65, 105, 255],
         width: 0
       }
-    }), this.messages = B(), this.searchContainer = d(), this.mapContainer = d(), this.topCoordField = d(), this.bottomCoordField = d(), this.leftCoordField = d(), this.rightCoordField = d(), this.minLatLabel = "", this.maxLatLabel = "", this.minLngLabel = "", this.maxLngLabel = "", this.ymax = "0", this.ymin = "0", this.xmin = "0", this.xmax = "0", this.isDrawStart = !1, this.loading = !0, this.active = !1, this.contentOnly = !1, this.isArea = !1, this.arcgisExtentPickerChange = w(), this.arcgisExtentPickerClose = w(), this.arcgisExtentPickerSave = w();
+    }), this.messages = W(), this.searchComponent = m(), this.sketchComponent = m(), this.mapContainer = m(), this.sketchListenersAdded = !1, this.searchInitialized = !1, this.topCoordField = m(), this.bottomCoordField = m(), this.leftCoordField = m(), this.rightCoordField = m(), this.minLatLabel = "", this.maxLatLabel = "", this.minLngLabel = "", this.maxLngLabel = "", this.firstLoad = !0, this.ymax = "0", this.ymin = "0", this.xmin = "0", this.xmax = "0", this.isDrawStart = !1, this.loading = !0, this.active = !1, this.contentOnly = !1, this.isArea = !1, this.arcgisExtentPickerChange = E(), this.arcgisExtentPickerClose = E(), this.arcgisExtentPickerSave = E();
   }
   static {
     this.properties = { ymax: 16, ymin: 16, xmin: 16, xmax: 16, isDrawStart: 16, loading: 16, featureExtent: 16, initialValue: 16, active: 5, extentValue: 0, itemId: 1, portal: 0, extentService: 1, contentOnly: 5, isArea: 5 };
   }
   static {
-    this.styles = W;
+    this.styles = J;
   }
   getExtent() {
     return this.getExtentValue();
   }
   async load() {
-    if (this.itemId) {
-      if (this.portal) {
-        const e = this.portal.url.replace("/sharing/rest/", "");
-        e !== E.portalUrl && (E.portalUrl = e);
-      }
-      const t = new Intl.NumberFormat($.getLocale(), {
-        minimumFractionDigits: 1,
-        maximumFractionDigits: 1
-      });
-      this.minLatLabel = t.format(-90), this.maxLatLabel = t.format(90), this.minLngLabel = t.format(-180), this.maxLngLabel = t.format(180), this.item = new A({
-        id: this.itemId,
-        portal: this.portal
-      }), await this.item.load();
+    if (this.minLatLabel = this.formatAxisLabel(-90), this.maxLatLabel = this.formatAxisLabel(90), this.minLngLabel = this.formatAxisLabel(-180), this.maxLngLabel = this.formatAxisLabel(180), this.portal) {
+      const t = this.portal.url.replace("/sharing/rest/", "");
+      t !== f.portalUrl && (f.portalUrl = t);
     }
-    if (this.portal && (this.orgExtent = this.portal.defaultExtent?.toJSON()), this.portal?.region) {
-      const t = this.portal.region, e = await T(`${this.portal.url.replace("/sharing/rest/", "")}/sharing/rest/portals/self?region=${t}&default=true&f=pjson`, {
+    if (this.itemId && (this.item = new O({
+      id: this.itemId,
+      portal: this.portal
+    }), await this.item.load()), this.portal && (this.orgExtent = this.portal.defaultExtent?.toJSON()), this.portal?.region) {
+      const t = this.portal.region, i = (await F(`${this.portal.url.replace("/sharing/rest/", "")}/sharing/rest/portals/self?region=${t}&default=true&f=pjson`, {
         responseType: "json"
-      });
-      this.orgRegionExtent = e.data.defaultExtent;
+      })).data;
+      this.orgRegionExtent = i.defaultExtent;
     }
   }
   async loaded() {
-    U(this.el.shadowRoot), await this.initMap();
+    _(this.el.shadowRoot), await this.initMap();
   }
   convertToNumber(t) {
     return this.parseNumber(t);
   }
   setFeatureExtent(t) {
     let e;
-    t.spatialReference.isGeographic ? e = new c({
-      xmax: t.xmax,
-      xmin: t.xmin,
-      ymax: t.ymax,
-      ymin: t.ymin,
-      spatialReference: { wkid: 4326 }
-    }) : e = this.toWGS84(t), this.featureExtent ? (this.featureExtent.xmin = Math.min(e.xmin, this.featureExtent.xmin), this.featureExtent.ymin = Math.min(e.ymin, this.featureExtent.ymin), this.featureExtent.xmax = Math.max(e.xmax, this.featureExtent.xmax), this.featureExtent.ymax = Math.max(e.ymax, this.featureExtent.ymax)) : this.featureExtent = e;
+    if (t.spatialReference.isGeographic)
+      e = new p({
+        xmax: t.xmax,
+        xmin: t.xmin,
+        ymax: t.ymax,
+        ymin: t.ymin,
+        spatialReference: { wkid: 4326 }
+      });
+    else if (e = this.toWGS84(t), e === t) {
+      this.tryAsyncProjection(t);
+      return;
+    }
+    this.featureExtent ? (this.featureExtent.xmin = Math.min(e.xmin, this.featureExtent.xmin), this.featureExtent.ymin = Math.min(e.ymin, this.featureExtent.ymin), this.featureExtent.xmax = Math.max(e.xmax, this.featureExtent.xmax), this.featureExtent.ymax = Math.max(e.ymax, this.featureExtent.ymax)) : this.featureExtent = e;
+  }
+  async tryAsyncProjection(t) {
+    const e = new j();
+    if (e.geometries = [t], e.outSpatialReference = new k({
+      wkid: 4326
+    }), !f.geometryServiceUrl)
+      return;
+    const a = (await N.project(f.geometryServiceUrl, e))?.[0];
+    a && this.setFeatureExtent(a);
   }
   async initMap() {
-    const t = new I({
-      basemap: "streets-vector"
+    const t = this.portal?.useVectorBasemaps ? this.portal?.defaultVectorBasemap : this.portal?.defaultBasemap, e = new G({
+      basemap: t || "streets-vector"
     });
-    if (this.extentService) {
-      const e = new P({
-        url: this.extentService
-      }), i = new M({
-        baseLayers: [e],
-        id: "org_basemap"
-      });
-      t.basemap = i;
-    }
-    if (this.mask = new J(t), this.mask.init(), this.dateLineLayer = new y({ id: "dateLineLayer" }), t.add(this.dateLineLayer), this.areasLayer = new y({ id: "areaGraphics" }), t.add(this.areasLayer), this.item?.type === "Feature Service" || this.item?.type === "Map Service") {
-      const e = await R.fromPortalItem({ portalItem: this.item });
-      e.visible = !1, t.add(e), e.when((i) => {
-        if ("layers" in i)
-          for (let a = 0; a < i.layers.length; a++)
-            i.layers.getItemAt(a).queryExtent().then((s) => {
-              s.extent && this.setFeatureExtent(s.extent);
+    if (this.extentService)
+      try {
+        const a = this.extentService.trim();
+        let r;
+        if (/\/VectorTileServer\/?$/iu.test(a))
+          r = new T({
+            url: a
+          });
+        else {
+          const n = (await F(`${a}?f=pjson`, {
+            responseType: "json"
+          })).data;
+          r = n.singleFusedMapCache === !0 && !!n.tileInfo ? new M({
+            url: a
+          }) : new D({
+            url: a
+          });
+        }
+        await r.load();
+        const s = new A({
+          baseLayers: [r],
+          id: "org_basemap"
+        });
+        e.basemap = s;
+      } catch (a) {
+        console.warn("[arcgis-portal-extent-picker] extentService basemap failed to load, using default basemap", a);
+      }
+    if (this.mask = new q(e), this.mask.init(), this.dateLineLayer = new v({ id: "dateLineLayer" }), e.add(this.dateLineLayer), this.areasLayer = new v({ id: "areaGraphics" }), e.add(this.areasLayer), this.item?.type === "Feature Service" || this.item?.type === "Map Service") {
+      const a = await V.fromPortalItem({ portalItem: this.item });
+      a.visible = !1, e.add(a), a.when((r) => {
+        if ("layers" in r)
+          for (let s = 0; s < r.layers.length; s++)
+            r.layers.getItemAt(s).queryExtent().then((n) => {
+              n.extent && this.setFeatureExtent(n.extent);
             });
         else
-          i.queryExtent().then((a) => {
-            a.extent && this.setFeatureExtent(a.extent);
+          r.queryExtent().then((s) => {
+            s.extent && this.setFeatureExtent(s.extent);
           });
       });
     }
-    this.view = new N({
-      map: t,
+    if (this.view = new z({
+      map: e,
       popup: {
         dockEnabled: !0,
         dockOptions: {
@@ -236,31 +264,29 @@ class q extends G {
       zoom: 2,
       center: [0, 0],
       container: this.mapContainer.value
-    }), this.view.when(async () => {
-      if (this.basemapExtent = this.getBasemapExtent(), this.itemExtent = this.item?.extent, this.extentValue?.xmax !== void 0 && this.extentValue?.xmin !== void 0 && this.extentValue?.ymax !== void 0 && this.extentValue?.ymin !== void 0)
-        this.ymin = this.extentValue?.ymin || "0", this.ymax = this.extentValue?.ymax || "0", this.xmax = this.extentValue?.xmax || "0", this.xmin = this.extentValue?.xmin || "0", this.handleInputChange(), this.initialValue = this.currentExtent;
-      else if (this.itemExtent)
-        await this.drawExtent(this.itemExtent), this.initialValue = this.itemExtent;
-      else if (this.featureExtent)
-        await this.drawExtent(this.featureExtent), this.initialValue = this.featureExtent;
-      else if (this.portal?.defaultExtent) {
-        const i = this.portal.defaultExtent.toJSON();
-        await this.drawExtent(i), this.initialValue = i;
-      }
-      this.initSearchWidget(), this.loading = !1;
-    });
+    }), await this.view.when(), this.basemapExtent = this.getBasemapExtent(), this.itemExtent = this.item?.extent, this.extentValue?.xmax !== void 0 && this.extentValue?.xmin !== void 0 && this.extentValue?.ymax !== void 0 && this.extentValue?.ymin !== void 0)
+      this.ymin = this.extentValue?.ymin || "0", this.ymax = this.extentValue?.ymax || "0", this.xmax = this.extentValue?.xmax || "0", this.xmin = this.extentValue?.xmin || "0", await this.handleInputChange(), this.initialValue = this.currentExtent;
+    else if (this.itemExtent)
+      await this.drawExtent(this.itemExtent), this.initialValue = this.itemExtent;
+    else if (this.featureExtent)
+      await this.drawExtent(this.featureExtent), this.initialValue = this.featureExtent;
+    else if (this.portal?.defaultExtent) {
+      const a = this.portal.defaultExtent.toJSON();
+      await this.drawExtent(a), this.initialValue = a;
+    }
+    await this.initSearchWidget(), this.loading = !1;
   }
   getBasemapExtent() {
     try {
       let t, e, i, a;
       if (this.view?.map?.basemap?.hasOwnProperty("baseLayers")) {
-        const o = this.view.map.basemap.baseLayers;
-        if (o.length > 0) {
-          for (const n of o) {
-            const r = n.fullExtent || { xmin: 0, ymin: 0, xmax: 0, ymax: 0 };
-            t = t !== void 0 && t > r?.xmin ? t : r.xmin, i = i !== void 0 && i > r?.ymin ? i : r.ymin, e = e !== void 0 && e < r.xmax ? e : r.xmax, a = a !== void 0 && a < r.ymax ? a : r.ymax;
+        const r = this.view.map.basemap.baseLayers;
+        if (r.length > 0) {
+          for (const o of r) {
+            const n = o.fullExtent || { xmin: 0, ymin: 0, xmax: 0, ymax: 0 };
+            t = t !== void 0 && t > n?.xmin ? t : n.xmin, i = i !== void 0 && i > n?.ymin ? i : n.ymin, e = e !== void 0 && e < n.xmax ? e : n.xmax, a = a !== void 0 && a < n.ymax ? a : n.ymax;
           }
-          return new c({
+          return new p({
             xmin: t,
             xmax: e,
             ymin: i,
@@ -269,7 +295,7 @@ class q extends G {
           });
         }
       }
-      return new c({
+      return new p({
         ymin: -90,
         ymax: 90,
         xmin: -180,
@@ -277,7 +303,7 @@ class q extends G {
         spatialReference: { wkid: 4326 }
       });
     } catch {
-      return new c({
+      return new p({
         ymin: -90,
         ymax: 90,
         xmin: -180,
@@ -287,7 +313,7 @@ class q extends G {
     }
   }
   async drawExtent(t) {
-    if (!t || !t.xmin && t.xmin !== 0 || !t.xmax && t.xmax !== 0 || !t.ymin && t.ymin !== 0 || !t.ymax && t.ymax !== 0)
+    if (this.isDrawStart = !1, !t || !t.xmin && t.xmin !== 0 || !t.xmax && t.xmax !== 0 || !t.ymin && t.ymin !== 0 || !t.ymax && t.ymax !== 0)
       return;
     const e = new h();
     e.spatialReference = t.spatialReference, e.addRing([
@@ -299,15 +325,21 @@ class q extends G {
     ]), await this.addInitialExtentPicker({ geometry: e });
   }
   toWGS84(t) {
-    const e = new C({ wkid: 4326 });
-    return p.canProject(t, e) ? p.project(t, e) : t;
+    const e = new k({ wkid: 4326 });
+    return x.canProject(t, e) ? x.project(t, e) : t;
   }
   formatNum(t) {
-    return $.formatNumber(t, {
+    return S.formatNumber(t, {
       minimumFractionDigits: 6,
       maximumFractionDigits: 6
     });
   }
+  formatAxisLabel(t) {
+    return S.formatNumber(t, {
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1
+    });
+  }
   strippedInvalidChars(t) {
     const e = Array.from({ length: 10 }, (i, a) => a.toString()).join("");
     return Array.from(t).filter((i) => e.includes(i) || i === "." || i === "-").join("");
@@ -317,89 +349,101 @@ class q extends G {
     return e = this.strippedInvalidChars(e), parseFloat(e);
   }
   async startupSketching(t, e) {
-    if (t && (t = this.toMap(t)), this.sketchViewModel = new D({
-      updateOnGraphicClick: !1,
-      layer: this.areasLayer,
-      view: this.view,
-      polygonSymbol: this.polygonSymbol
-    }), this.clearAllGraphics(), !e)
+    if (t && (t = this.toMap(t)), await this.initSketchComponent(), this.clearAllGraphics(), !e)
       if (t) {
-        t.type === "extent" && (t = h.fromExtent(t)), this.currentExtent = this.toWGS84(t?.extent?.toJSON()), this.ymax = this.formatNum(this.currentExtent.ymax), this.ymin = this.formatNum(this.currentExtent.ymin), this.xmin = this.formatNum(this.currentExtent.xmin), this.xmax = this.formatNum(this.currentExtent.xmax), this.arcgisExtentPickerChange.emit(this.getExtentValue()), t = V.intersect(t, this.basemapExtent);
+        t.type === "extent" && (t = h.fromExtent(t)), this.currentExtent = this.toWGS84(t?.extent?.toJSON()), this.ymax = this.formatNum(this.currentExtent.ymax), this.ymin = this.formatNum(this.currentExtent.ymin), this.xmin = this.formatNum(this.currentExtent.xmin), this.xmax = this.formatNum(this.currentExtent.xmax), this.firstLoad ? this.firstLoad = !1 : this.arcgisExtentPickerChange.emit(this.getExtentValue()), t = I(t, this.basemapExtent);
         const i = new g({
           symbol: this.polygonSymbol,
           geometry: t
         });
-        i.geometry && (this.fallbackExtent = i.geometry.extent, this.areasLayer?.add(i), this.mask?.clear(), this.mask?.update(i.geometry.extent), await this.zoomTo(), setTimeout(async () => {
-          try {
-            i.layer && await this.sketchViewModel?.update([i], {
-              tool: "transform",
-              enableRotation: !1,
-              toggleToolOnClick: !1,
-              reshapeOptions: {
-                enableCreateCurveFromStraightEdge: !1
-              }
-            });
-          } catch {
-          }
-        }, 0));
+        i.geometry && (this.fallbackExtent = i.geometry.extent, this.areasLayer?.add(i), this.mask?.clear(), this.mask?.update(i.geometry.extent), await this.zoomTo(), await this.activateGraphicUpdate(i));
       } else
-        this.sketchViewModel.create("rectangle");
-    this.addSketchListeners();
+        await this.sketchComponent.value?.create("rectangle");
   }
-  addSketchListeners() {
-    this.sketchViewModel?.on("update", async (t) => {
-      if (!t.toolEventInfo)
+  async activateGraphicUpdate(t) {
+    try {
+      const e = this.sketchComponent.value;
+      if (!e || !this.view || !this.areasLayer)
         return;
-      const e = t?.graphics?.[0]?.geometry?.extent, i = e && this.mask?.update(e);
-      if (t.toolEventInfo.type === "scale-stop" || t.toolEventInfo.type === "move-stop") {
-        let a;
-        const o = parseFloat(`${e?.xmax ?? "0"}`).toFixed(6), s = parseFloat(`${e?.xmin ?? "0"}`).toFixed(6), n = parseFloat(`${e?.ymax ?? "0"}`).toFixed(6), r = parseFloat(`${e?.ymin ?? "0"}`).toFixed(6);
-        if (o === s || n === r ? (a = e, o === s && (a.xmax += 1), n === r && (a.ymax += 1)) : a = t?.graphics?.[0]?.geometry?.extent, i?.overlap) {
-          const v = i.graphic?.geometry, k = new h({
-            rings: [v?.rings[1]]
-          });
-          await this.addInitialExtentPicker({ geometry: k.extent });
-        } else
-          await this.startupSketching(a);
-        this.isDrawStart = !1;
-      } else if (this.dateLineLayer?.removeAll(), i?.overlap) {
-        const a = new g({
-          geometry: new h({ rings: [i.overlap] }),
-          symbol: this.dlOverlapSymbol
+      await e.componentOnReady(), await this.view.whenLayerView(this.areasLayer), await e.triggerUpdate(t, {
+        tool: "transform",
+        enableRotation: !1,
+        toggleToolOnClick: !1,
+        reshapeOptions: {
+          enableCreateCurveFromStraightEdge: !1
+        }
+      });
+    } catch {
+    }
+  }
+  async initSketchComponent() {
+    const t = this.sketchComponent.value;
+    t && (t.defaultGraphicsLayerDisabled = !0, t.updateOnGraphicClickDisabled = !1, t.layer = this.areasLayer, t.polygonSymbol = this.polygonSymbol, t.view = this.view, this.sketchListenersAdded || (t.addEventListener("arcgisUpdate", (e) => {
+      this.handleSketchUpdate(e);
+    }), t.addEventListener("arcgisCreate", (e) => {
+      this.handleSketchCreate(e);
+    }), this.sketchListenersAdded = !0), await t.componentOnReady());
+  }
+  async handleSketchUpdate(t) {
+    const e = t.detail;
+    if (e.state === "cancel") {
+      const s = this.areasLayer?.graphics?.getItemAt(0)?.geometry;
+      s && await this.startupSketching(s);
+      return;
+    }
+    if (!e.toolEventInfo)
+      return;
+    const i = e?.graphics?.[0]?.geometry?.extent, a = i && this.mask?.update(i);
+    if (e.toolEventInfo.type === "scale-stop" || e.toolEventInfo.type === "move-stop") {
+      let r;
+      const s = parseFloat(`${i?.xmax ?? "0"}`).toFixed(6), o = parseFloat(`${i?.xmin ?? "0"}`).toFixed(6), n = parseFloat(`${i?.ymax ?? "0"}`).toFixed(6), l = parseFloat(`${i?.ymin ?? "0"}`).toFixed(6);
+      if (s === o || n === l ? (r = i, s === o && (r.xmax += 1), n === l && (r.ymax += 1)) : r = e?.graphics?.[0]?.geometry?.extent, a?.overlap) {
+        const w = a.graphic?.geometry, C = new h({
+          rings: [w?.rings[1]]
         });
-        this.dateLineLayer?.add(a);
-      }
-    }), this.sketchViewModel?.on("create", async (t) => {
-      if (this.dateLineLayer?.removeAll(), !t.graphic)
-        return;
-      this.mask?.clear();
-      const e = t?.graphic?.geometry?.extent, i = this.mask?.add(e);
-      if (i?.overlap ? (this.remainderPoly = new g({
-        geometry: new h({ rings: [i.overlap] }),
+        await this.addInitialExtentPicker({ geometry: C.extent });
+      } else
+        await this.startupSketching(r);
+      this.isDrawStart = !1;
+    } else if (this.dateLineLayer?.removeAll(), a?.overlap) {
+      const r = new g({
+        geometry: new h({ rings: [a.overlap] }),
         symbol: this.dlOverlapSymbol
-      }), this.dateLineLayer?.add(this.remainderPoly)) : this.remainderPoly = null, t.state === "complete") {
-        let a;
-        const o = t.graphic?.geometry?.extent?.xmin || 0;
-        let s = t.graphic?.geometry?.extent?.xmax || 0;
-        const n = t.graphic?.geometry?.extent?.ymin || 0;
-        let r = t.graphic?.geometry?.extent?.ymax || 0;
-        if (o === s || n === r)
-          o === s && (s = s + 1), n === r && (r = r + 1), a = new c({
-            xmin: o,
-            xmax: s,
-            ymin: n,
-            ymax: r,
-            spatialReference: t.graphic?.geometry?.extent?.spatialReference
-          });
-        else {
-          const v = i?.graphic?.geometry;
-          a = new h({
-            rings: [v?.rings[1]]
-          }).extent;
-        }
-        this.remainderPoly ? await this.addInitialExtentPicker({ geometry: a }) : await this.startupSketching(a), this.isDrawStart = !1, this.mapContainer.value.focus();
+      });
+      this.dateLineLayer?.add(r);
+    }
+  }
+  async handleSketchCreate(t) {
+    const e = t.detail;
+    if (this.dateLineLayer?.removeAll(), !e.graphic)
+      return;
+    this.mask?.clear();
+    const i = e?.graphic?.geometry?.extent, a = this.mask?.add(i);
+    if (a?.overlap ? (this.remainderPoly = new g({
+      geometry: new h({ rings: [a.overlap] }),
+      symbol: this.dlOverlapSymbol
+    }), this.dateLineLayer?.add(this.remainderPoly)) : this.remainderPoly = null, e.state === "complete") {
+      let r;
+      const s = e.graphic?.geometry?.extent?.xmin || 0;
+      let o = e.graphic?.geometry?.extent?.xmax || 0;
+      const n = e.graphic?.geometry?.extent?.ymin || 0;
+      let l = e.graphic?.geometry?.extent?.ymax || 0;
+      if (s === o || n === l)
+        s === o && (o = o + 1), n === l && (l = l + 1), r = new p({
+          xmin: s,
+          xmax: o,
+          ymin: n,
+          ymax: l,
+          spatialReference: e.graphic?.geometry?.extent?.spatialReference
+        });
+      else {
+        const w = a?.graphic?.geometry;
+        r = new h({
+          rings: [w?.rings[1]]
+        }).extent;
       }
-    });
+      this.remainderPoly ? await this.addInitialExtentPicker({ geometry: r }) : await this.startupSketching(r), this.isDrawStart = !1, this.mapContainer.value.focus();
+    }
   }
   async addInitialExtentPicker(t) {
     if (!t.geometry) {
@@ -417,32 +461,32 @@ class q extends G {
         t = t ? t.union(a) : a;
       }), !t)
         return;
-      const e = this.toMap(c.fromJSON(t.toJSON()).expand(1.35));
+      const e = this.toMap(t.clone().expand(1.35));
       e && await this.view?.goTo(e);
     }
   }
   clearAllGraphics() {
-    this.sketchViewModel?.cancel(), this.view?.map?.layers?.forEach((e) => {
+    this.sketchComponent.value?.cancel(), this.view?.map?.layers?.forEach((e) => {
       e.type === "graphics" && e.removeAll();
     });
   }
   toMap(t) {
-    return this.view && p.canProject(t, this.view) ? p.project(t, this.view.spatialReference) : t;
-  }
-  initSearchWidget() {
-    const t = new O({
-      view: this.view,
-      popupEnabled: !1,
-      resultGraphicEnabled: !1,
-      container: this.searchContainer.value
-    }), e = t.viewModel;
-    t.viewModel.allSources.on("change", () => {
-      e.allSources.forEach((i) => {
+    return this.view && x.canProject(t, this.view) ? x.project(t, this.view.spatialReference) : t;
+  }
+  async initSearchWidget() {
+    const t = this.searchComponent.value;
+    if (!t || this.searchInitialized)
+      return;
+    t.view = this.view, t.popupDisabled = !0, t.resultGraphicDisabled = !0, await t.componentOnReady();
+    const e = () => {
+      t.allSources.forEach((i) => {
         i.zoomScale = null;
       });
-    }), t.on("select-result", (i) => {
-      this.startupSketching(i.result.extent);
-    });
+    };
+    e(), t.allSources.on("change", e), t.addEventListener("arcgisSelectResult", (i) => {
+      const a = i.detail?.result;
+      this.startupSketching(a?.extent);
+    }), this.searchInitialized = !0;
   }
   getExtentValue() {
     return {
@@ -454,15 +498,15 @@ class q extends G {
       }
     };
   }
-  handleInputChange() {
-    const t = this.parseNumber(this.ymin), e = this.parseNumber(this.ymax), i = this.parseNumber(this.xmin), a = this.parseNumber(this.xmax), o = new c({
+  async handleInputChange() {
+    const t = this.parseNumber(this.ymin), e = this.parseNumber(this.ymax), i = this.parseNumber(this.xmin), a = this.parseNumber(this.xmax), r = new p({
       spatialReference: { wkid: 4326 },
       xmin: i,
       xmax: a,
       ymin: t,
       ymax: e
     });
-    this.currentExtent = o, this.drawExtent(o);
+    this.currentExtent = r, await this.drawExtent(r);
   }
   handleSave() {
     if (!this.topCoordField.value.isValid()) {
@@ -496,56 +540,54 @@ class q extends G {
     return await new Promise((e) => setTimeout(e, t));
   }
   renderModal() {
-    return l`<calcite-dialog class="extent-picker-modal" role=dialog scale=l outside-close-disabled .open=${this.active} placement=cover @calciteDialogClose=${() => {
+    return c`<calcite-dialog class="extent-picker-modal" role=dialog scale=l outside-close-disabled .open=${this.active} placement=cover @calciteDialogClose=${() => {
       this.arcgisExtentPickerClose.emit();
-    }} style=${z({
+    }} style=${b({
       "--calcite-dialog-content-space": "0"
-    })} .heading=${this.isArea ? this.messages.setArea : this.messages.setExtent} heading-level=3><div class="extent-picker-content">${this.renderContent()}</div>${this.initialValue && l`<calcite-button appearance=outline slot=footer-start icon-start=reset @click=${async () => {
-      if (this.initialValue) {
-        const t = +this.ymin === f(this.initialValue.ymin) && +this.ymax === f(this.initialValue.ymax);
-        +this.xmin === f(this.initialValue.xmin) && +this.xmax === f(this.initialValue.xmax) && t && (this.ymin = "0", this.ymax = "0", this.xmin = "0", this.xmax = "0", await this.timeout(100)), this.drawExtent(this.initialValue);
-      }
+    })} .heading=${this.isArea ? this.messages.setArea : this.messages.setExtent} heading-level=3><div class="extent-picker-content">${this.renderContent()}</div>${this.initialValue && c`<calcite-button appearance=outline slot=footer-start icon-start=reset @click=${async () => {
+      this.initialValue && (this.isDrawStart && (this.isDrawStart = !1, await this.sketchComponent.value?.cancel(), this.startupSketching(this.fallbackExtent)), this.ymin = "0", this.ymax = "0", this.xmin = "0", this.xmax = "0", await this.timeout(100), await this.drawExtent(this.initialValue));
     }}>${this.messages.revert}</calcite-button>` || ""}<calcite-button appearance=outline slot=footer-end @click=${() => this.arcgisExtentPickerClose.emit()}>${this.messages.cancel}</calcite-button><calcite-button slot=footer-end @click=${async () => this.handleSave()}>${this.messages.save}</calcite-button></calcite-dialog>`;
   }
   renderContent() {
     const t = !!(this.portal && !this.portal.id), e = !!(this.orgExtent && !t), i = !!(this.orgRegionExtent && !t), a = !!this.featureExtent;
-    return l`<div class="side-panel">${!(!e && !i && !a) && l`<div>${this.isArea ? this.messages.areaBasedOn : this.messages.extentBasedOn}</div>${e && l`<calcite-button class="extent-button" alignment=start scale=l kind=neutral appearance=outline-fill icon-start=organization @click=${() => {
+    return c`<div class="side-panel">${!(!e && !i && !a) && c`<div>${this.isArea ? this.messages.areaBasedOn : this.messages.extentBasedOn}</div>${e && c`<calcite-button class="extent-button" alignment=start scale=l kind=neutral appearance=outline-fill icon-start=organization @click=${() => {
       this.drawExtent(this.orgExtent);
-    }}>${this.messages.orgExtent}</calcite-button>` || ""}${i && l`<calcite-button class="extent-button" alignment=start scale=l kind=neutral appearance=outline-fill icon-start=organization @click=${() => {
+    }}>${this.messages.orgExtent}</calcite-button>` || ""}${i && c`<calcite-button class="extent-button" alignment=start scale=l kind=neutral appearance=outline-fill icon-start=organization @click=${() => {
       this.drawExtent(this.orgRegionExtent);
-    }}>${this.messages.orgRegion}</calcite-button>` || ""}${a && l`<calcite-button class="extent-button" alignment=start scale=l kind=neutral appearance=outline-fill icon-start=feature-layer @click=${() => {
+    }}>${this.messages.orgRegion}</calcite-button>` || ""}${a && c`<calcite-button class="extent-button" alignment=start scale=l kind=neutral appearance=outline-fill icon-start=feature-layer @click=${() => {
       this.drawExtent(this.featureExtent);
-    }}>${this.messages.currentFeatures}</calcite-button>` || ""}` || ""}<div class="use-location-header">${this.messages.useLocation}</div><div class="search-container"><div ${x(this.searchContainer)}></div></div><div><div class="use-location-header">${this.isArea ? this.messages.drawAreaTitle : this.messages.drawExtentTitle}</div><calcite-action .text=${(this.isArea ? this.messages.drawArea : this.messages.drawExtent) || ""} text-enabled icon=rectangle-plus .active=${this.isDrawStart} .indicator=${this.isDrawStart} @click=${async () => {
-      this.isDrawStart = !this.isDrawStart, this.isDrawStart ? (this.sketchViewModel || await this.startupSketching(), this.clearAllGraphics(), this.sketchViewModel?.create("rectangle")) : (this.sketchViewModel?.cancel(), this.startupSketching(this.fallbackExtent));
+    }}>${this.messages.currentFeatures}</calcite-button>` || ""}` || ""}<div class="use-location-header">${this.messages.useLocation}</div><div class="search-container"><arcgis-search popup-disabled result-graphic-disabled ${d(this.searchComponent)}></arcgis-search></div><div><div class="use-location-header">${this.isArea ? this.messages.drawAreaTitle : this.messages.drawExtentTitle}</div><calcite-action .text=${(this.isArea ? this.messages.drawArea : this.messages.drawExtent) || ""} text-enabled icon=rectangle-plus .active=${this.isDrawStart} .indicator=${this.isDrawStart} @click=${async () => {
+      this.isDrawStart = !this.isDrawStart, this.isDrawStart ? (this.sketchComponent.value || await this.startupSketching(), this.clearAllGraphics(), await this.sketchComponent.value?.create("rectangle")) : (await this.sketchComponent.value?.cancel(), this.startupSketching(this.fallbackExtent));
     }}></calcite-action></div><div class="coordinates-section"><calcite-accordion appearance=transparent icon-position=start scale=l><calcite-accordion-item .heading=${this.messages.coordinates}><p>${this.messages.coordinatesDescription}</p><arcgis-portal-extent-picker-coord-field input-id=top-coord .label=${this.messages.top} .value=${this.strippedInvalidChars(this.ymax)} .errorMessage=${this.formatLatitudeError(this.messages.invalidTop || "")} min=-90 max=90 @arcgisCoordChange=${(s) => {
       this.ymax = s.detail;
-      const n = this.bottomCoordField.value.checkRelatedField();
-      n && (this.ymin = n), this.handleInputChange();
-    }} .relatedErrorMessage=${this.messages.topGreaterThanBottom} .validateRelated=${(s) => s > this.convertToNumber(this.ymin)} ${x(this.topCoordField)}></arcgis-portal-extent-picker-coord-field><arcgis-portal-extent-picker-coord-field input-id=bottom-coord .label=${this.messages.bottom} .value=${this.strippedInvalidChars(this.ymin)} .errorMessage=${this.formatLatitudeError(this.messages.invalidBottom || "")} min=-90 max=90 @arcgisCoordChange=${(s) => {
+      const o = this.bottomCoordField.value.checkRelatedField();
+      o && (this.ymin = o), this.handleInputChange();
+    }} .relatedErrorMessage=${this.messages.topGreaterThanBottom} .validateRelated=${(s) => s > this.convertToNumber(this.ymin)} ${d(this.topCoordField)}></arcgis-portal-extent-picker-coord-field><arcgis-portal-extent-picker-coord-field input-id=bottom-coord .label=${this.messages.bottom} .value=${this.strippedInvalidChars(this.ymin)} .errorMessage=${this.formatLatitudeError(this.messages.invalidBottom || "")} min=-90 max=90 @arcgisCoordChange=${(s) => {
       this.ymin = s.detail;
-      const n = this.topCoordField.value.checkRelatedField();
-      n && (this.ymax = n), this.handleInputChange();
-    }} .relatedErrorMessage=${this.messages.bottomLessThanTop} .validateRelated=${(s) => s < this.convertToNumber(this.ymax)} ${x(this.bottomCoordField)}></arcgis-portal-extent-picker-coord-field><arcgis-portal-extent-picker-coord-field input-id=left-coord .label=${this.messages.left} .value=${this.strippedInvalidChars(this.xmin)} .errorMessage=${this.formatLongitudeError(this.messages.invalidLeft || "")} min=-180 max=180 @arcgisCoordChange=${(s) => {
+      const o = this.topCoordField.value.checkRelatedField();
+      o && (this.ymax = o), this.handleInputChange();
+    }} .relatedErrorMessage=${this.messages.bottomLessThanTop} .validateRelated=${(s) => s < this.convertToNumber(this.ymax)} ${d(this.bottomCoordField)}></arcgis-portal-extent-picker-coord-field><arcgis-portal-extent-picker-coord-field input-id=left-coord .label=${this.messages.left} .value=${this.strippedInvalidChars(this.xmin)} .errorMessage=${this.formatLongitudeError(this.messages.invalidLeft || "")} min=-180 max=180 @arcgisCoordChange=${(s) => {
       this.xmin = s.detail;
-      const n = this.rightCoordField.value.checkRelatedField();
-      n && (this.xmax = n), this.handleInputChange();
-    }} .relatedErrorMessage=${this.messages.leftLessThanRight} .validateRelated=${(s) => s < this.convertToNumber(this.xmax)} ${x(this.leftCoordField)}></arcgis-portal-extent-picker-coord-field><arcgis-portal-extent-picker-coord-field input-id=right-coord .label=${this.messages.right} .value=${this.strippedInvalidChars(this.xmax)} .errorMessage=${this.formatLongitudeError(this.messages.invalidRight || "")} min=-180 max=180 @arcgisCoordChange=${(s) => {
+      const o = this.rightCoordField.value.checkRelatedField();
+      o && (this.xmax = o), this.handleInputChange();
+    }} .relatedErrorMessage=${this.messages.leftLessThanRight} .validateRelated=${(s) => s < this.convertToNumber(this.xmax)} ${d(this.leftCoordField)}></arcgis-portal-extent-picker-coord-field><arcgis-portal-extent-picker-coord-field input-id=right-coord .label=${this.messages.right} .value=${this.strippedInvalidChars(this.xmax)} .errorMessage=${this.formatLongitudeError(this.messages.invalidRight || "")} min=-180 max=180 @arcgisCoordChange=${(s) => {
       this.xmax = s.detail;
-      const n = this.leftCoordField.value.checkRelatedField();
-      n && (this.xmin = n), this.handleInputChange();
-    }} .relatedErrorMessage=${this.messages.rightGreaterThanLeft} .validateRelated=${(s) => s > this.convertToNumber(this.xmin)} ${x(this.rightCoordField)}></arcgis-portal-extent-picker-coord-field></calcite-accordion-item></calcite-accordion></div></div><div class="map-panel">${this.loading && l`<calcite-loader class="map-loader" label="Loading the application"></calcite-loader>` || ""}<div class=${j({
+      const o = this.leftCoordField.value.checkRelatedField();
+      o && (this.xmin = o), this.handleInputChange();
+    }} .relatedErrorMessage=${this.messages.rightGreaterThanLeft} .validateRelated=${(s) => s > this.convertToNumber(this.xmin)} ${d(this.rightCoordField)}></arcgis-portal-extent-picker-coord-field></calcite-accordion-item></calcite-accordion></div></div><div class="map-panel">${this.loading && c`<calcite-loader class="map-loader" label="Loading the application"></calcite-loader>` || ""}<arcgis-zoom .view=${this.view} visual-scale=s style=${b({
+      zIndex: "1"
+    })}></arcgis-zoom><arcgis-sketch hidden default-graphics-layer-disabled style=${b({
+      display: "none"
+    })} ${d(this.sketchComponent)}></arcgis-sketch><div class=${U({
       "map-container": !0,
       "map-container--loaded": !this.loading
-    })} ${x(this.mapContainer)}></div></div>`;
+    })} ${d(this.mapContainer)}></div></div>`;
   }
   render() {
-    return this.contentOnly ? l`<div class="extent-picker-content">${this.renderContent()}</div>` : this.renderModal();
+    return this.contentOnly ? c`<div class="extent-picker-content">${this.renderContent()}</div>` : this.renderModal();
   }
 }
-function f(m) {
-  return Math.round(m * 1e6) / 1e6;
-}
-S("arcgis-portal-extent-picker", q);
+R("arcgis-portal-extent-picker", H);
 export {
-  q as ArcgisPortalExtentPicker
+  H as ArcgisPortalExtentPicker
 };