@arcgis/portal-components 5.0.0-next.9 → 5.0.0-next.91

package/dist/components/arcgis-portal-classification-form-element/customElement.js

@@ -5,12 +5,12 @@ import { css as d, html as i } from "lit";
 import { u as h } from "../../chunks/useT9n.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.9 */
+v5.0.0-next.91 */
 const m = d`.spacing-y{margin:var(--calcite-spacing-md) 0}.portal-classification-form-element-tooltip{display:flex;justify-content:space-between;align-items:center}`;
 function l(n, e) {
   return n.uiElement === e;
 }
-class v extends c {
+class g extends c {
   constructor() {
     super(...arguments), this.messages = h(), this.isRequiredErrors = /* @__PURE__ */ new Set(), this.arcgisAttributeValueChange = b();
   }
@@ -48,13 +48,13 @@ class v extends c {
     if (!Array.isArray(this.renderingInfo?.valueExpressionResult))
       return;
     const e = this.value;
-    return u(this.renderingInfo?.valueExpressionResult, (t) => t.label, (t) => i`<calcite-combobox-item .selected=${e === t.value} text-label=${t.label ?? a} .value=${t.value} data-testid=${`single-combobox-item-${t.value}`}></calcite-combobox-item>`);
+    return u(this.renderingInfo?.valueExpressionResult, (t) => t.label, (t) => i`<calcite-combobox-item .selected=${e === t.value} .heading=${t.label} .value=${t.value} data-testid=${`single-combobox-item-${t.value}`}></calcite-combobox-item>`);
   }
   _renderComboboxOptions() {
     if (!Array.isArray(this.renderingInfo?.valueExpressionResult))
       return;
     const e = this.value;
-    return this.renderingInfo?.valueExpressionResult.map((t) => i`<calcite-combobox-item .selected=${e?.includes(t.value)} text-label=${t.label ?? a} .value=${t.value} data-testid=${`combobox-item-${t.value}`}></calcite-combobox-item>`);
+    return this.renderingInfo?.valueExpressionResult.map((t) => i`<calcite-combobox-item .selected=${e?.includes(t.value)} .heading=${t.label} .value=${t.value} data-testid=${`combobox-item-${t.value}`}></calcite-combobox-item>`);
   }
   renderMultiSelect() {
     return l(this.attribute, "multi-select") ? i`<calcite-label .for=${this.attributeKey}>${this.attribute.label}<calcite-combobox id=${this.attributeKey ?? a} .label=${this.attribute.label} .name=${this.attributeKey} @calciteComboboxChange=${(e) => {
@@ -68,7 +68,7 @@ class v extends c {
     if (!this.renderingInfo?.valueExpressionResult || Array.isArray(this.renderingInfo?.valueExpressionResult))
       return;
     const e = this.value;
-    return Object.entries(this.renderingInfo?.valueExpressionResult).map(([t, s]) => i`<calcite-combobox-item .selected=${e?.includes(t)} text-label=${t ?? a} .value=${t}>${s.map((r) => i`<calcite-combobox-item .selected=${e?.includes(r.value)} text-label=${r.label ?? a} .value=${r.value} data-testid=${`grouped-combobox-item-${r.value}`}></calcite-combobox-item>`)}</calcite-combobox-item>`);
+    return Object.entries(this.renderingInfo?.valueExpressionResult).map(([t, s]) => i`<calcite-combobox-item .selected=${e?.includes(t)} .heading=${t} .value=${t}>${s.map((r) => i`<calcite-combobox-item .selected=${e?.includes(r.value)} .heading=${r.label} .value=${r.value} data-testid=${`grouped-combobox-item-${r.value}`}></calcite-combobox-item>`)}</calcite-combobox-item>`);
   }
   renderMultiGroupedSelectNested() {
     return l(this.attribute, "multi-grouped-select-nested") ? i`<calcite-label .for=${this.attributeKey}>${this.attribute.label}<calcite-combobox id=${this.attributeKey ?? a} .label=${this.attribute.label} .name=${this.attributeKey} @calciteComboboxChange=${(e) => {
@@ -97,7 +97,7 @@ class v extends c {
     }
   }
 }
-o("arcgis-portal-classification-form-element", v);
+o("arcgis-portal-classification-form-element", g);
 export {
-  v as ArcgisPortalClassificationFormElement
+  g as ArcgisPortalClassificationFormElement
 };

package/dist/components/arcgis-portal-extent-picker/customElement.d.ts

@@ -0,0 +1,51 @@
+/// <reference path="../../index.d.ts" />
+import { default as Extent } from '@arcgis/core/geometry/Extent.js';
+import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
+import { default as Portal } from '@arcgis/core/portal/Portal.js';
+
+export type ExtentValue = {
+    ymin: string;
+    ymax: string;
+    xmin: string;
+    xmax: string;
+};
+export type ExtentObj = {
+    extent: ExtentValue;
+};
+/** To select extent value from a map or by entering coordinates. */
+export declare class ArcgisPortalExtentPicker extends LitElement {
+    /**
+     * if true, open the dialog
+     *
+     * @default false
+     */
+    active: boolean;
+    /** current extent value */
+    extentValue?: ExtentValue;
+    /** Optional; if passed, use the itemId to load the Portal item */
+    itemId?: string;
+    /** Optional; Portal instance */
+    portal?: Portal;
+    /** Optional; URL of the extent service, used to initialize TileLayer */
+    extentService?: string;
+    /**
+     * Optional; if true, show only the content without the calcite-dialog wrapper
+     *
+     * @default false
+     */
+    contentOnly: boolean;
+    /**
+     * Optional; if true, display texts that are for areas rather than the default extent texts
+     *
+     * @default false
+     */
+    isArea: boolean;
+    /** Returns the current extent value */
+    getExtent(): ExtentObj;
+    /** Emitted when the extent value changes */
+    readonly arcgisExtentPickerChange: TargetedEvent<this, ExtentObj>;
+    /** Emitted when the dialog is closed */
+    readonly arcgisExtentPickerClose: TargetedEvent<this, void>;
+    /** Emitted when the save button is clicked */
+    readonly arcgisExtentPickerSave: TargetedEvent<this, ExtentObj>;
+}

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

@@ -0,0 +1,553 @@
+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 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 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";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/5.0/esri/copyright.txt for details.
+v5.0.0-next.91 */
+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 {
+  constructor(t) {
+    this.outerRing = [
+      [180, -90],
+      [-180, -90],
+      [-180, 90],
+      [180, 90],
+      [180, -90]
+    ], this.map = t;
+  }
+  init() {
+    this.maskSymbol = new b({
+      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);
+  }
+  hide() {
+    this.maskLayer.visible = !1;
+  }
+  show() {
+    this.maskLayer.visible = !0;
+  }
+  add(t, e) {
+    const i = this.buildGraphic(t, e);
+    if (i)
+      return i.graphic && this.maskLayer?.add(i.graphic), i;
+  }
+  update(t, e, i) {
+    i ? this.remove(null, i) : this.clear();
+    const a = this.buildGraphic(t, e);
+    if (a)
+      return a.graphic && this.maskLayer?.add(a.graphic), a;
+  }
+  clear() {
+    this.maskLayer?.removeAll();
+  }
+  remove(t, e) {
+    !t && !e || (e && !t && (t = this.maskLayer?.graphics.getItemAt(e)), t && this.maskLayer?.remove(t));
+  }
+  buildGraphic(t, e = this.maskSymbol) {
+    const i = {};
+    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;
+    }
+    t = this.toWGS84(t);
+    let a, o;
+    if (t.type === "extent") {
+      const r = this.checkPolyOverlap(t);
+      r ? (a = r?.ring?.reverse(), o = r?.oring?.reverse()) : a = [
+        [t.xmin, t.ymax],
+        [t.xmax, t.ymax],
+        [t.xmax, t.ymin],
+        [t.xmin, t.ymin],
+        [t.xmin, t.ymax]
+      ];
+    }
+    let s = [];
+    t.xmin === t.xmax ? s = [this.outerRing] : s = [this.outerRing, a?.reverse() || [[]]];
+    const n = new h({
+      rings: s
+    });
+    return o && (i.overlap = o), i.graphic = new g({ geometry: n, symbol: e }), i;
+  }
+  checkPolyOverlap(t) {
+    const e = {};
+    if (t.xmax <= t.xmin) {
+      const i = [
+        [t.xmin, t.ymin],
+        [180, t.ymin],
+        [180, t.ymax],
+        [t.xmin, t.ymax],
+        [t.xmin, t.ymin]
+      ], a = [
+        [-180, t.ymin],
+        [t.xmax, t.ymin],
+        [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;
+    } else
+      return;
+  }
+  toWGS84(t) {
+    const e = new C({ wkid: 4326 });
+    return p.canProject(t, e) ? p.project(t, e) : t;
+  }
+}
+function U(m) {
+  if (!m)
+    return;
+  let t = E.assetsPath;
+  t.endsWith("/") || (t += "/"), m?.firstElementChild?.insertAdjacentHTML(
+    "beforebegin",
+    `<link rel="stylesheet" href="${t}esri/themes/light/main.css" />`
+  );
+}
+class q extends G {
+  constructor() {
+    super(...arguments), this.polygonSymbol = new b({
+      style: "solid",
+      color: new L([227, 139, 79, 0]),
+      outline: {
+        color: new L([65, 105, 255]),
+        width: 0
+      }
+    }), this.dlOverlapSymbol = new b({
+      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();
+  }
+  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;
+  }
+  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.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`, {
+        responseType: "json"
+      });
+      this.orgRegionExtent = e.data.defaultExtent;
+    }
+  }
+  async loaded() {
+    U(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;
+  }
+  async initMap() {
+    const t = new I({
+      basemap: "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);
+            });
+        else
+          i.queryExtent().then((a) => {
+            a.extent && this.setFeatureExtent(a.extent);
+          });
+      });
+    }
+    this.view = new N({
+      map: t,
+      popup: {
+        dockEnabled: !0,
+        dockOptions: {
+          // Disables the dock button from the popup
+          buttonEnabled: !1,
+          // Ignore the default sizes that trigger responsive docking
+          breakpoint: !1,
+          position: "bottom-center"
+        }
+      },
+      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;
+    });
+  }
+  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;
+          }
+          return new c({
+            xmin: t,
+            xmax: e,
+            ymin: i,
+            ymax: a,
+            spatialReference: this.view.spatialReference
+          });
+        }
+      }
+      return new c({
+        ymin: -90,
+        ymax: 90,
+        xmin: -180,
+        xmax: 180,
+        spatialReference: { wkid: 4326 }
+      });
+    } catch {
+      return new c({
+        ymin: -90,
+        ymax: 90,
+        xmin: -180,
+        xmax: 180,
+        spatialReference: { wkid: 4326 }
+      });
+    }
+  }
+  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)
+      return;
+    const e = new h();
+    e.spatialReference = t.spatialReference, e.addRing([
+      new u({ x: t.xmin, y: t.ymin }),
+      new u({ x: t.xmin, y: t.ymax }),
+      new u({ x: t.xmax, y: t.ymax }),
+      new u({ x: t.xmax, y: t.ymin }),
+      new u({ x: t.xmin, y: t.ymin })
+    ]), await this.addInitialExtentPicker({ geometry: e });
+  }
+  toWGS84(t) {
+    const e = new C({ wkid: 4326 });
+    return p.canProject(t, e) ? p.project(t, e) : t;
+  }
+  formatNum(t) {
+    return $.formatNumber(t, {
+      minimumFractionDigits: 6,
+      maximumFractionDigits: 6
+    });
+  }
+  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("");
+  }
+  parseNumber(t) {
+    let e = t.replace(",", ".");
+    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.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);
+        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));
+      } else
+        this.sketchViewModel.create("rectangle");
+    this.addSketchListeners();
+  }
+  addSketchListeners() {
+    this.sketchViewModel?.on("update", async (t) => {
+      if (!t.toolEventInfo)
+        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
+        });
+        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] }),
+        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();
+      }
+    });
+  }
+  async addInitialExtentPicker(t) {
+    if (!t.geometry) {
+      await this.startupSketching(null, !0);
+      return;
+    }
+    const e = this.toMap(t.geometry);
+    await this.startupSketching(e);
+  }
+  async zoomTo() {
+    if (this.areasLayer?.graphics) {
+      let t;
+      if (this.areasLayer.graphics.forEach((i) => {
+        const a = i?.geometry?.extent;
+        t = t ? t.union(a) : a;
+      }), !t)
+        return;
+      const e = this.toMap(c.fromJSON(t.toJSON()).expand(1.35));
+      e && await this.view?.goTo(e);
+    }
+  }
+  clearAllGraphics() {
+    this.sketchViewModel?.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) => {
+        i.zoomScale = null;
+      });
+    }), t.on("select-result", (i) => {
+      this.startupSketching(i.result.extent);
+    });
+  }
+  getExtentValue() {
+    return {
+      extent: {
+        ymin: this.normalizeDecimal(this.ymin),
+        ymax: this.normalizeDecimal(this.ymax),
+        xmin: this.normalizeDecimal(this.xmin),
+        xmax: this.normalizeDecimal(this.xmax)
+      }
+    };
+  }
+  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({
+      spatialReference: { wkid: 4326 },
+      xmin: i,
+      xmax: a,
+      ymin: t,
+      ymax: e
+    });
+    this.currentExtent = o, this.drawExtent(o);
+  }
+  handleSave() {
+    if (!this.topCoordField.value.isValid()) {
+      this.topCoordField.value.setFocus();
+      return;
+    }
+    if (!this.bottomCoordField.value.isValid()) {
+      this.bottomCoordField.value.setFocus();
+      return;
+    }
+    if (!this.leftCoordField.value.isValid()) {
+      this.leftCoordField.value.setFocus();
+      return;
+    }
+    if (!this.rightCoordField.value.isValid()) {
+      this.rightCoordField.value.setFocus();
+      return;
+    }
+    this.arcgisExtentPickerSave.emit(this.getExtentValue());
+  }
+  normalizeDecimal(t) {
+    return t.replace(",", ".");
+  }
+  formatLongitudeError(t) {
+    return t.replace("${minLng}", this.minLngLabel).replace("${maxLng}", this.maxLngLabel);
+  }
+  formatLatitudeError(t) {
+    return t.replace("${minLat}", this.minLatLabel).replace("${maxLat}", this.maxLatLabel);
+  }
+  async timeout(t) {
+    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=${() => {
+      this.arcgisExtentPickerClose.emit();
+    }} style=${z({
+      "--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);
+      }
+    }}>${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=${() => {
+      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.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.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));
+    }}></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) => {
+      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) => {
+      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) => {
+      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({
+      "map-container": !0,
+      "map-container--loaded": !this.loading
+    })} ${x(this.mapContainer)}></div></div>`;
+  }
+  render() {
+    return this.contentOnly ? l`<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);
+export {
+  q as ArcgisPortalExtentPicker
+};

package/dist/components/arcgis-portal-extent-picker/index.d.ts

@@ -0,0 +1,8 @@
+import "@esri/calcite-components/components/calcite-dialog";
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-action";
+import "@esri/calcite-components/components/calcite-accordion";
+import "@esri/calcite-components/components/calcite-accordion-item";
+import "../arcgis-portal-extent-picker-coord-field/index.js";
+import "@esri/calcite-components/components/calcite-loader";
+export * from "./customElement.js";

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

@@ -0,0 +1,8 @@
+import "@esri/calcite-components/components/calcite-dialog";
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-action";
+import "@esri/calcite-components/components/calcite-accordion";
+import "@esri/calcite-components/components/calcite-accordion-item";
+import "../arcgis-portal-extent-picker-coord-field/index.js";
+import "@esri/calcite-components/components/calcite-loader";
+export * from "./customElement.js";