@arcgis/map-components 5.2.0-next.12 → 5.2.0-next.14

package/dist/components/arcgis-slider-scale-range/customElement.js

@@ -1,14 +1,14 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { g as x, c as p } from "../../chunks/runtime.js";
-import { keyed as g } from "lit/directives/keyed.js";
-import { LitElement as _, createEvent as d, safeStyleMap as u, nothing as v } from "@arcgis/lumina";
+import { g as x, c as _ } from "../../chunks/runtime.js";
+import { keyed as p } from "lit/directives/keyed.js";
+import { LitElement as g, createEvent as d, safeStyleMap as u, nothing as M } from "@arcgis/lumina";
 import { watch as f } from "@arcgis/core/core/reactiveUtils.js";
-import { u as M } from "../../chunks/useView.js";
+import { u as v } from "../../chunks/useView.js";
 import { u as y } from "../../chunks/useT9n.js";
-import { css as L, html as r } from "lit";
-import { usePropertyChange as b } from "@arcgis/lumina/controllers";
-import { createRef as $, ref as w } from "lit/directives/ref.js";
-import T from "@arcgis/core/portal/Portal.js";
+import { css as b, html as o } from "lit";
+import { usePropertyChange as $ } from "@arcgis/lumina/controllers";
+import { createRef as L, ref as w } from "lit/directives/ref.js";
+import R from "@arcgis/core/portal/Portal.js";
 const h = /* @__PURE__ */ new Set([
   "ar-iq",
   "ar-kw",
@@ -84,7 +84,7 @@ const h = /* @__PURE__ */ new Set([
   "th-th",
   "zh-cn",
   "zh-tw"
-]), R = {
+]), T = {
   ar: "iq",
   bg: "bg",
   cs: "cz",
@@ -112,7 +112,7 @@ const h = /* @__PURE__ */ new Set([
   sv: "se",
   th: "th",
   zh: "cn"
-}, P = L`:host{display:block;width:310px;max-width:100%}.slider{height:50px}.scale-indicator-container{position:relative;width:100%;margin-top:2px}.scale-indicator-icon{transform:scale(.8,1.7);margin-left:-6px;width:1px;--calcite-icon-color: var(--calcite-color-text-3)}.scale-menu-list{max-height:220px;overflow-y:auto}.scale-menu-input{max-width:120px}.scale-menu-button-container{display:flex;direction:ltr;justify-content:space-between}.scale-menu-button{min-width:0}:dir(rtl) .scale-menu-button-container>*{direction:rtl}.preview-container{padding:6px;background-color:var(--calcite-color-foreground-1);box-shadow:0 1px 2px #0000004d}`, l = [
+}, P = b`:host{display:block;width:310px;max-width:100%}.slider{height:50px}.scale-indicator-container{position:relative;width:100%;margin-top:2px}.scale-indicator-icon{transform:scale(.8,1.7);margin-left:-6px;width:1px;--calcite-icon-color: var(--calcite-color-text-3)}.scale-menu-list{max-height:220px;overflow-y:auto}.scale-menu-input{max-width:120px}.scale-menu-button-container{display:flex;direction:ltr;justify-content:space-between}.scale-menu-button{min-width:0}:dir(rtl) .scale-menu-button-container>*{direction:rtl}.preview-container{padding:6px;background-color:var(--calcite-color-foreground-1);box-shadow:0 1px 2px #0000004d}`, l = [
   { id: "world", scale: 147914382, minScale: 147914382, maxScale: 1e8 },
   { id: "continent", scale: 5e7, minScale: 99999999, maxScale: 35e6 },
   { id: "countriesBig", scale: 25e6, minScale: 34999999, maxScale: 15e6 },
@@ -134,9 +134,9 @@ const h = /* @__PURE__ */ new Set([
   { id: "rooms", scale: 400, minScale: 400, maxScale: 101 },
   { id: "room", scale: 100, minScale: 100, maxScale: 0 }
 ];
-class I extends _ {
+class I extends g {
   constructor() {
-    super(...arguments), this.messages = y(), this._sliderRef = $(), this._activeMenu = null, this._customScaleSelected = null, this._portalRegion = null, this._layerMaxScaleLimit = l[l.length - 1].maxScale, this._layerMinScaleLimit = l[0].minScale, this.autoDestroyDisabled = !1, this.disabled = !1, this.hidePreview = !1, this.hideMaxScaleMenu = !1, this.hideMinScaleMenu = !1, this.icon = "actual-size", this.maxScale = 0, this.maxScaleLimit = l[l.length - 1].maxScale, this.minScale = 0, this.minScaleLimit = l[0].minScale, this.mode = "range", this.showWorldValue = !1, this.view = M(this), this.arcgisChange = d(), this.arcgisInput = d(), this.arcgisPropertyChange = b()("state", "minScale", "maxScale"), this.arcgisReady = d();
+    super(...arguments), this.messages = y(), this._sliderRef = L(), this._activeMenu = null, this._customScaleSelected = null, this._portalRegion = null, this._layerMaxScaleLimit = l[l.length - 1].maxScale, this._layerMinScaleLimit = l[0].minScale, this.autoDestroyDisabled = !1, this.disabled = !1, this.hidePreview = !1, this.hideMaxScaleMenu = !1, this.hideMinScaleMenu = !1, this.icon = "actual-size", this.maxScale = 0, this.maxScaleLimit = l[l.length - 1].maxScale, this.minScale = 0, this.minScaleLimit = l[0].minScale, this.mode = "range", this.showWorldValue = !1, this.view = v(this), this.arcgisChange = d(), this.arcgisInput = d(), this.arcgisPropertyChange = $()("state", "minScale", "maxScale"), this.arcgisReady = d();
   }
   static {
     this.properties = { _activeMenu: 16, _customScaleSelected: 16, _portalRegion: 16, _layerMaxScaleLimit: 16, _layerMinScaleLimit: 16, autoDestroyDisabled: 5, disabled: 7, hidePreview: 5, hideMaxScaleMenu: 5, hideMinScaleMenu: 5, icon: 1, label: 1, layer: 0, maxScale: 9, maxScaleLimit: 9, minScale: 9, minScaleLimit: 9, mode: 1, referenceElement: 1, region: 1, showWorldValue: 5, state: 32, view: 0 };
@@ -152,7 +152,7 @@ class I extends _ {
     await this.manager.destroy();
   }
   willUpdate(e) {
-    if ((e.has("maxScaleLimit") || e.has("minScaleLimit")) && (this.minScaleLimit === 0 && (this.minScaleLimit = this._layerMinScaleLimit), this.maxScaleLimit === 0 && (this.maxScaleLimit = this._layerMaxScaleLimit), this.minScaleLimit = Math.min(this.minScaleLimit, this._layerMinScaleLimit), this.maxScaleLimit = Math.max(this.maxScaleLimit, this._layerMaxScaleLimit), this.minScale !== 0 && (this.minScale = Math.min(this.minScale, this.minScaleLimit)), this.maxScale !== 0 && (this.maxScale = Math.max(this.maxScale, this.maxScaleLimit)), this._syncLayerScale()), e.has("maxScale") || e.has("minScale")) {
+    if ((e.has("maxScaleLimit") || e.has("minScaleLimit")) && (this.minScaleLimit === 0 && (this.minScaleLimit = l[0].minScale), this.maxScaleLimit === 0 && (this.maxScaleLimit = l[l.length - 1].maxScale), this.minScaleLimit = Math.min(this.minScaleLimit, l[0].minScale), this.maxScaleLimit = Math.max(this.maxScaleLimit, l[l.length - 1].maxScale), this.minScale !== 0 && (this.minScale = Math.min(this.minScale, this._interactiveMinScale)), this.maxScale !== 0 && (this.maxScale = Math.max(this.maxScale, this._interactiveMaxScale)), this.hasUpdated && this._syncLayerScale()), e.has("maxScale") || e.has("minScale")) {
       if (this.minScale !== 0) {
         const i = this._clampScale("min", this.minScale);
         this.minScale = i === this.minScaleLimit ? 0 : i;
@@ -162,11 +162,11 @@ class I extends _ {
         this.maxScale = i === this.maxScaleLimit ? 0 : i;
       }
     }
-    e.has("layer") && this.layer && this.layer.load().catch(() => {
-    }), e.has("mode") && (this.mode === "max-scale-only" ? this.minScale = 0 : this.mode === "min-scale-only" && (this.maxScale = 0), e.get("mode") !== void 0 && this._syncLayerScale());
+    e.has("layer") && (this.layer ? this.layer.load().catch(() => {
+    }) : (this._layerMinScaleLimit = l[0].minScale, this._layerMaxScaleLimit = l[l.length - 1].maxScale)), e.has("mode") && (this.mode === "max-scale-only" ? this.minScale = 0 : this.mode === "min-scale-only" && (this.maxScale = 0), e.get("mode") !== void 0 && this._syncLayerScale());
   }
   loaded() {
-    T.getDefault().load().then((i) => {
+    R.getDefault().load().then((i) => {
       const a = i.user?.culture ?? i.culture;
       a && (this._portalRegion = a.split("-")[1]?.toLowerCase() ?? null);
     }).catch(() => {
@@ -179,37 +179,46 @@ class I extends _ {
       }), ({ loaded: i, ready: a }) => {
         if (!i || !a || !this.layer)
           return;
+        this._layerMinScaleLimit = l[0].minScale, this._layerMaxScaleLimit = l[l.length - 1].maxScale;
         const s = this.layer.type === "wcs" || this.layer.type === "imagery-tile" && this.layer.raster?.tileType === "Raster" ? null : "tileInfo" in this.layer ? this.layer.tileInfo?.lods : null;
         if (s)
-          this._layerMinScaleLimit = s[0].scale === 0 ? l[0].minScale : Math.min(l[0].minScale, s[0].scale), !("resampling" in this.layer) || this.layer.resampling || (this._layerMaxScaleLimit = s[s.length - 1].scale);
+          !("resampling" in this.layer) || this.layer.resampling || (this._layerMinScaleLimit = s[0].scale === 0 ? l[0].minScale : Math.min(l[0].minScale, s[0].scale), this._layerMaxScaleLimit = s[s.length - 1].scale);
         else {
-          const m = this.layer && "maxScaleRange" in this.layer ? this.layer.maxScaleRange : null;
-          let n = 0, o = 0;
-          m && (n = m.minScale, o = m.maxScale), o !== 0 && (this._layerMaxScaleLimit = o), n !== 0 && (this._layerMinScaleLimit = n);
+          const n = this.layer && "maxScaleRange" in this.layer ? this.layer.maxScaleRange : null;
+          let r = 0, m = 0;
+          n && (r = n.minScale, m = n.maxScale), m !== 0 && (this._layerMaxScaleLimit = m), r !== 0 && (this._layerMinScaleLimit = r);
         }
-        this.minScaleLimit = Math.min(this.minScaleLimit, this._layerMinScaleLimit), this.maxScaleLimit = Math.max(this.maxScaleLimit, this._layerMaxScaleLimit);
         const c = this.layer;
-        c && "minScale" in c && "maxScale" in c && (c.minScale !== 0 && this.minScale === 0 && (this.minScale = Math.min(c.minScale, this.minScaleLimit)), c.maxScale !== 0 && this.maxScale === 0 && (this.maxScale = Math.max(c.maxScale, this.maxScaleLimit)));
+        c && "minScale" in c && "maxScale" in c && (c.minScale !== 0 && this.minScale === 0 && (this.minScale = Math.min(c.minScale, this._interactiveMinScale)), c.maxScale !== 0 && this.maxScale === 0 && (this.maxScale = Math.max(c.maxScale, this._interactiveMaxScale)));
       }, { initial: !0 })
     ]);
   }
+  get _interactiveMinScale() {
+    return Math.min(this.minScaleLimit, this._layerMinScaleLimit);
+  }
+  get _interactiveMaxScale() {
+    return Math.max(this.maxScaleLimit, this._layerMaxScaleLimit);
+  }
   get _effectiveMinScale() {
-    return this.minScale === 0 ? this.minScaleLimit : this.minScale;
+    return this.minScale === 0 ? this._interactiveMinScale : this.minScale;
   }
   get _effectiveMaxScale() {
-    return this.maxScale === 0 ? this.maxScaleLimit : this.maxScale;
+    return this.maxScale === 0 ? this._interactiveMaxScale : this.maxScale;
+  }
+  get _sliderFullRangeMin() {
+    return this._mapScaleToSlider(this.minScaleLimit);
+  }
+  get _sliderFullRangeMax() {
+    return this._mapScaleToSlider(this.maxScaleLimit);
   }
   _clampScale(e, i) {
-    return e === "min" ? Math.min(Math.max(i, this._effectiveMaxScale + 1), this.minScaleLimit) : Math.max(Math.min(i, this._effectiveMinScale - 1), this.maxScaleLimit);
+    return e === "min" ? Math.min(Math.max(i, this._effectiveMaxScale + 1), this._interactiveMinScale) : Math.max(Math.min(i, this._effectiveMinScale - 1), this._interactiveMaxScale);
   }
   _getDropdownLabel(e) {
     const i = e === "min" ? this._effectiveMinScale : this._effectiveMaxScale, a = Math.floor(this._mapScaleToSlider(i)), t = this.messages.scaleRangeLabels;
     return t ? t[l[a].id] : "";
   }
   _getSpriteSheetFile() {
-    const e = this.messages._lang.toLowerCase();
-    if (h.has(e))
-      return e;
     if (this.region) {
       const a = this.region.toLowerCase(), t = `${this.messages._t9nLocale}-${a}`;
       if (h.has(t))
@@ -218,12 +227,15 @@ class I extends _ {
         if (s.endsWith(`-${a}`))
           return s;
     }
+    const e = this.messages._lang.toLowerCase();
+    if (h.has(e))
+      return e;
     if (this._portalRegion) {
       const a = `${this.messages._t9nLocale}-${this._portalRegion}`;
       if (h.has(a))
         return a;
     }
-    const i = R[this.messages._t9nLocale];
+    const i = T[this.messages._t9nLocale];
     if (i) {
       const a = `${this.messages._t9nLocale}-${i}`;
       if (h.has(a))
@@ -242,20 +254,20 @@ class I extends _ {
     const e = this._sliderRef.value;
     if (e) {
       if (this.mode === "max-scale-only") {
-        const i = Math.max(this._mapSliderToScale(e.values[0]), this.maxScaleLimit);
-        this.maxScale = i === this.maxScaleLimit ? 0 : i;
+        const i = Math.max(this._mapSliderToScale(e.values[0]), this._interactiveMaxScale);
+        this.maxScale = i === this._interactiveMaxScale ? 0 : i;
       } else if (this.mode === "min-scale-only") {
-        const i = Math.min(this._mapSliderToScale(e.values[0]), this.minScaleLimit);
-        this.minScale = i === this.minScaleLimit ? 0 : i;
+        const i = Math.min(this._mapSliderToScale(e.values[0]), this._interactiveMinScale);
+        this.minScale = i === this._interactiveMinScale ? 0 : i;
       } else {
-        const i = Math.min(this._mapSliderToScale(e.values[0]), this.minScaleLimit), a = Math.max(this._mapSliderToScale(e.values[1]), this.maxScaleLimit);
-        this.minScale = i === this.minScaleLimit ? 0 : i, this.maxScale = a === this.maxScaleLimit ? 0 : a;
+        const i = Math.min(this._mapSliderToScale(e.values[0]), this._interactiveMinScale), a = Math.max(this._mapSliderToScale(e.values[1]), this._interactiveMaxScale);
+        this.minScale = i === this._interactiveMinScale ? 0 : i, this.maxScale = a === this._interactiveMaxScale ? 0 : a;
       }
       this._syncLayerScale();
     }
   }
   _mapScaleToSlider(e) {
-    const i = Math.min(l[0].minScale, Math.max(l[l.length - 1].maxScale, e)), a = l.findIndex((n) => i >= n.maxScale && i <= n.minScale), t = l[a], s = a, c = a + 0.9999;
+    const i = Math.min(l[0].minScale, Math.max(l[l.length - 1].maxScale, e)), a = l.findIndex((r) => i >= r.maxScale && i <= r.minScale), t = l[a], s = a, c = a + 0.9999;
     return t ? s + (i - t.minScale) * (c - s) / (t.maxScale - t.minScale) : 0;
   }
   _mapSliderToScale(e) {
@@ -270,21 +282,22 @@ class I extends _ {
   }
   _renderScalePreviewPopover() {
     const e = this._renderScalePreview();
-    return this.hidePreview || !e ? null : r`<div slot=popover>${e}</div>`;
+    return this.hidePreview || !e ? null : o`<div slot=popover>${e}</div>`;
   }
   render() {
-    return r`<div><arcgis-slider class="slider" .disabled=${this.disabled} layout=horizontal .fillPlacement=${this.mode === "max-scale-only" ? "start" : this.mode === "min-scale-only" ? "end" : void 0} .fullRangeMin=${this._mapScaleToSlider(l[0].minScale)} .fullRangeMax=${this._mapScaleToSlider(l[l.length - 1].maxScale)} .max=${this._mapScaleToSlider(this.maxScaleLimit)} .min=${this._mapScaleToSlider(this.minScaleLimit)} .labelFormatter=${(e, i, a) => a(Math.round(this._mapSliderToScale(e)))} .values=${this.mode === "max-scale-only" ? [this._mapScaleToSlider(this._effectiveMaxScale)] : this.mode === "min-scale-only" ? [this._mapScaleToSlider(this._effectiveMinScale)] : [this._mapScaleToSlider(this._effectiveMinScale), this._mapScaleToSlider(this._effectiveMaxScale)]} @arcgisInput=${this._handleSliderThumbDrag} ${w(this._sliderRef)}>${this._renderScalePreviewPopover()}${this.view?.scale != null && this._renderCurrentScaleIndicator(this.view.scale) || ""}</arcgis-slider><div class="scale-menu-button-container" slot=content-end>${this.mode !== "max-scale-only" && !this.hideMinScaleMenu ? [this._renderScaleMenuButtons("min"), this._renderScaleMenuPopover("min")] : r`<div></div>`}${this.mode !== "min-scale-only" && !this.hideMaxScaleMenu && [this._renderScaleMenuButtons("max"), this._renderScaleMenuPopover("max")] || ""}</div></div>`;
+    const e = this._mapScaleToSlider(this._interactiveMinScale), i = this._mapScaleToSlider(this._interactiveMaxScale), a = this._sliderFullRangeMin, t = this._sliderFullRangeMax;
+    return o`<div><arcgis-slider class="slider" .disabled=${this.disabled} layout=horizontal .fillPlacement=${this.mode === "max-scale-only" ? "start" : this.mode === "min-scale-only" ? "end" : void 0} .fullRangeMin=${a < e ? a : void 0} .fullRangeMax=${t > i ? t : void 0} .max=${i} .min=${e} .labelFormatter=${(s, c, n) => n(Math.round(this._mapSliderToScale(s)))} .values=${this.mode === "max-scale-only" ? [this._mapScaleToSlider(this._effectiveMaxScale)] : this.mode === "min-scale-only" ? [this._mapScaleToSlider(this._effectiveMinScale)] : [this._mapScaleToSlider(this._effectiveMinScale), this._mapScaleToSlider(this._effectiveMaxScale)]} @arcgisInput=${this._handleSliderThumbDrag} ${w(this._sliderRef)}>${this._renderScalePreviewPopover()}${this.view?.scale != null && this._renderCurrentScaleIndicator(this.view.scale) || ""}</arcgis-slider><div class="scale-menu-button-container" slot=content-end>${this.mode !== "max-scale-only" && !this.hideMinScaleMenu ? [this._renderScaleMenuButtons("min"), this._renderScaleMenuPopover("min")] : o`<div></div>`}${this.mode !== "min-scale-only" && !this.hideMaxScaleMenu && [this._renderScaleMenuButtons("max"), this._renderScaleMenuPopover("max")] || ""}</div></div>`;
   }
   _renderCurrentScaleIndicator(e) {
-    const i = this._sliderRef.value, a = i?.fullRangeMax ?? this._mapScaleToSlider(l[l.length - 1].maxScale), t = i?.fullRangeMin ?? this._mapScaleToSlider(l[0].minScale), s = a - t, c = Math.min(100, Math.max(0, (this._mapScaleToSlider(e) - t) / s * 100));
-    return g("scale-indicator", r`<div class="scale-indicator-container" slot=content-end><div class="scale-indicator-icon" style=${u({
+    const i = this._sliderFullRangeMin, t = this._sliderFullRangeMax - i, s = Math.min(100, Math.max(0, (this._mapScaleToSlider(e) - i) / t * 100));
+    return p("scale-indicator", o`<div class="scale-indicator-container" slot=content-end><div class="scale-indicator-icon" style=${u({
       position: "absolute",
-      left: `${c}%`
+      left: `${s}%`
     })} .title=${`${this.messages.currentScale} 1:${Math.round(e).toLocaleString(this.messages._t9nLocale)}`}><calcite-icon icon=caret-up scale=s></calcite-icon></div></div>`);
   }
   _renderCustomScaleValue(e, i) {
     const a = Math.round(i).toString();
-    return r`<calcite-list-item .label=${this.messages?.featuredScaleLabels?.custom} .selected=${this._customScaleSelected === e} @calciteListItemSelect=${(t) => {
+    return o`<calcite-list-item .label=${this.messages?.featuredScaleLabels?.custom} .selected=${this._customScaleSelected === e} @calciteListItemSelect=${(t) => {
       const s = t.target.querySelector("calcite-input-number");
       this._handleCustomScaleInput(e, s?.value ?? ""), this._customScaleSelected = e;
     }}><calcite-input-number dir=ltr class="scale-menu-input" slot=content-end group-separator inputmode=numeric .max=${l[0].minScale} .min=${l[l.length - 1].maxScale} number-button-type=none .placeholder=${this.messages?.customScaleInputTooltip} prefix-text=1: scale=s step=1 .value=${a} @click=${(t) => t.stopPropagation()} @keydown=${(t) => {
@@ -292,10 +305,10 @@ class I extends _ {
     }}></calcite-input-number></calcite-list-item>`;
   }
   _renderScaleMenuButtons(e) {
-    return r`<calcite-button .disabled=${this.disabled} class="scale-menu-button" .id=${`scale-menu-button-${e}`} icon-end=chevron-down scale=s .appearance=${this._activeMenu === e ? "outline" : "transparent"}>${this._getDropdownLabel(e)}</calcite-button>`;
+    return o`<calcite-button .disabled=${this.disabled} class="scale-menu-button" .id=${`scale-menu-button-${e}`} icon-end=chevron-down scale=s .appearance=${this._activeMenu === e ? "outline" : "transparent"}>${this._getDropdownLabel(e)}</calcite-button>`;
   }
   _renderScaleMenuPopover(e) {
-    return r`<calcite-popover auto-close .label=${`${e === "min" ? "Min" : "Max"} scale menu`} .referenceElement=${`scale-menu-button-${e}`} .placement=${e === "max" ? "bottom-end" : "bottom-start"} .open=${this._activeMenu === e} scale=s @calcitePopoverOpen=${() => this._activeMenu = e} @calcitePopoverClose=${() => {
+    return o`<calcite-popover auto-close .label=${`${e === "min" ? "Min" : "Max"} scale menu`} .referenceElement=${`scale-menu-button-${e}`} .placement=${e === "max" ? "bottom-end" : "bottom-start"} .open=${this._activeMenu === e} scale=s @calcitePopoverOpen=${() => this._activeMenu = e} @calcitePopoverClose=${() => {
       this._activeMenu === e && (this._activeMenu = null);
     }}>${this._renderScaleMenu(e)}</calcite-popover>`;
   }
@@ -303,24 +316,24 @@ class I extends _ {
     const i = Math.floor(this._mapScaleToSlider(this._effectiveMaxScale)), a = Math.floor(this._mapScaleToSlider(this._effectiveMinScale)), t = e === "min" ? this._effectiveMinScale : this._effectiveMaxScale, s = this.messages.featuredScaleLabels;
     if (!s)
       return;
-    const c = Math.floor(this._mapScaleToSlider(this.maxScaleLimit)), m = Math.floor(this._mapScaleToSlider(this.minScaleLimit)), n = l.filter((o, S) => e === "min" ? S < i && S >= m : S > a && S <= c).map((o) => this._renderScaleMenuItem({
-      scaleLabel: s[o.id],
-      scaleValue: o.scale,
-      isSelected: t === o.scale,
-      valueVisible: o.id !== "world" || this.showWorldValue,
+    const c = Math.floor(this._mapScaleToSlider(this._interactiveMaxScale)), n = Math.floor(this._mapScaleToSlider(this._interactiveMinScale)), r = l.filter((m, S) => e === "min" ? S < i && S >= n : S > a && S <= c).map((m) => this._renderScaleMenuItem({
+      scaleLabel: s[m.id],
+      scaleValue: m.scale,
+      isSelected: t === m.scale,
+      valueVisible: m.id !== "world" || this.showWorldValue,
       type: e
     }));
-    return r`<calcite-list label="Scale Menu List" scale=s class="scale-menu-list" selection-appearance=icon selection-mode=single-persist>${this.view?.scale != null && this._renderCustomScaleValue(e, t) || ""}${this.view?.scale != null ? this._renderScaleMenuItem({
+    return o`<calcite-list label="Scale Menu List" scale=s class="scale-menu-list" selection-appearance=icon selection-mode=single-persist>${this.view?.scale != null && this._renderCustomScaleValue(e, t) || ""}${this.view?.scale != null ? this._renderScaleMenuItem({
       scaleValue: this.view.scale,
       scaleLabel: s.current,
       isSelected: t === this.view.scale,
       valueVisible: !0,
       type: e
-    }) : null}${n}</calcite-list>`;
+    }) : null}${r}</calcite-list>`;
   }
   _renderScaleMenuItem(e) {
     const { scaleValue: i, scaleLabel: a, isSelected: t, valueVisible: s } = e, c = i === l[0].scale ? ` ${this.messages.aboveSuffix}` : i === l[l.length - 1].scale ? ` ${this.messages.belowSuffix}` : "";
-    return r`<calcite-list-item .label=${a} .selected=${t && this._customScaleSelected !== e.type} .description=${s ? `1:${Math.round(i).toLocaleString(this.messages._t9nLocale)}${c}` : void 0} @calciteListItemSelect=${() => {
+    return o`<calcite-list-item .label=${a} .selected=${t && this._customScaleSelected !== e.type} .description=${s ? `1:${Math.round(i).toLocaleString(this.messages._t9nLocale)}${c}` : void 0} @calciteListItemSelect=${() => {
       this._setScale(e.type, i), this._customScaleSelected = null;
     }}></calcite-list-item>`;
   }
@@ -328,17 +341,17 @@ class I extends _ {
     const e = this._sliderRef.value?.activeValue;
     if (typeof e != "number")
       return null;
-    const i = Math.min(l.length - 1, Math.max(0, Math.floor(e))), a = 5, t = 128, s = t * (i % a), c = t * Math.floor(i / a), m = `-${s}px -${c}px`, n = this._getSpriteSheetFile();
-    return r`<div class="preview-container"><img src=${x(`./assets/slider-scale-range/images/${n}.avif`) ?? v} style=${u({
+    const i = Math.min(l.length - 1, Math.max(0, Math.floor(e))), a = 5, t = 128, s = t * (i % a), c = t * Math.floor(i / a), n = `-${s}px -${c}px`, r = this._getSpriteSheetFile();
+    return o`<div class="preview-container"><img src=${x(`./assets/slider-scale-range/images/${r}.avif`) ?? M} style=${u({
       display: "block",
       height: `${t}px`,
       width: `${t}px`,
-      objectPosition: m,
+      objectPosition: n,
       objectFit: "none"
     })}></div>`;
   }
 }
-p("arcgis-slider-scale-range", I);
+_("arcgis-slider-scale-range", I);
 export {
   I as ArcgisSliderScaleRange
 };

package/dist/components/arcgis-utility-network-trace-location/customElement.js

@@ -5,18 +5,18 @@ import * as C from "@arcgis/core/geometry/operators/cutOperator.js";
 import * as m from "@arcgis/core/geometry/operators/lengthOperator.js";
 import * as b from "@arcgis/core/geometry/operators/projectOperator.js";
 import I from "@arcgis/core/geometry/Polyline.js";
-import F from "@arcgis/core/geometry/SpatialReference.js";
-import v from "@arcgis/core/Graphic.js";
+import G from "@arcgis/core/geometry/SpatialReference.js";
+import F from "@arcgis/core/Graphic.js";
 import T from "@arcgis/core/rest/networks/support/TraceLocation.js";
-import w from "@arcgis/core/symbols/SimpleMarkerSymbol.js";
-import { LitElement as G, createEvent as L } from "@arcgis/lumina";
-import { log as u, composeMissingPropertyMessage as f } from "@arcgis/toolkit/log";
+import L from "@arcgis/core/symbols/SimpleMarkerSymbol.js";
+import { LitElement as v, createEvent as w } from "@arcgis/lumina";
+import { log as l, composeMissingPropertyMessage as g } from "@arcgis/toolkit/log";
 import { u as A } from "../../chunks/useT9n.js";
 import { d as S, i as P } from "../../chunks/layer-utils.js";
 const N = x`calcite-block{--calcite-block-content-space: 0;--calcite-block-border-color: transparent;margin:0}.add-location-button{--calcite-button-border-color: var(--calcite-color-border-1);--calcite-button-icon-color: var(--calcite-color-text-1);--calcite-button-text-color: var(--calcite-color-text-1)}.button-container{justify-content:center;display:grid}.clear-button{--calcite-button-border-color: transparent}`;
-class R extends G {
+class R extends v {
   constructor() {
-    super(...arguments), this.messages = A({ blocking: !0 }), this.isSelectWaiting = !1, this.traceLocationType = "starting-point", this.spatialTolerance = 0.05, this.autoDestroyDisabled = !1, this.arcgisTraceLocationChange = L(), this.arcgisTraceLocationSelectEnd = L(), this.arcgisTraceLocationSelectStart = L();
+    super(...arguments), this.messages = A({ blocking: !0 }), this.isSelectWaiting = !1, this.traceLocationType = "starting-point", this.spatialTolerance = 0.05, this.autoDestroyDisabled = !1, this.arcgisTraceLocationChange = w(), this.arcgisTraceLocationSelectEnd = w(), this.arcgisTraceLocationSelectStart = w();
   }
   static {
     this.properties = { isSelectWaiting: 16, beforeTraceLocationSelectStart: 0, afterHitTest: 0, view: 0, traceLocationType: 1, traceLocations: 0, filterLayers: 0, sketchViewModel: 0, spatialTolerance: 9, autoDestroyDisabled: 5, utilityNetwork: 0 };
@@ -35,25 +35,25 @@ class R extends G {
       hasZ: !1,
       hasM: !0,
       paths: e,
-      spatialReference: new F({ wkid: t })
+      spatialReference: new G({ wkid: t })
     });
   }
   _calculatePercentAlong(e, t) {
-    const r = e.spatialReference, s = this._createPolyline(e.paths, r.wkid), n = t.x - 0.5, a = t.x + 0.5, c = t.y - 0.5, i = t.y + 0.5, o = [
+    const r = e.spatialReference, s = this._createPolyline(e.paths, r.wkid), o = t.x - 0.5, a = t.x + 0.5, c = t.y - 0.5, i = t.y + 0.5, u = [
       [
-        [n, c],
+        [o, c],
         [a, i]
       ]
-    ], l = this._createPolyline(o, t.spatialReference.wkid), p = b.execute(l, r);
+    ], n = this._createPolyline(u, t.spatialReference.wkid), p = b.execute(n, r);
     if (!p)
-      return u("error", this, "Unable to project flag geometry to source geometry spatial reference."), 0.5;
+      return l("error", this, "Unable to project flag geometry to source geometry spatial reference."), -1;
     const d = C.execute(s, p);
     if (d.length > 0) {
-      const g = m.execute(s, { unit: "feet" });
-      let h;
-      return d[0].paths[0][0][0] === s.paths[0][0][0] ? h = m.execute(d[0], { unit: "feet" }) : d.length > 1 ? h = m.execute(d[1], { unit: "feet" }) : h = 0, h / g;
+      const h = m.execute(s, { unit: "feet" });
+      let f;
+      return d[0].paths[0][0][0] === s.paths[0][0][0] ? f = m.execute(d[0], { unit: "feet" }) : d.length > 1 ? f = m.execute(d[1], { unit: "feet" }) : f = 0, f / h;
     }
-    return u("warn", this, "Unable to cut the source geometry with the flag geometry."), 0.5;
+    return l("warn", this, "Unable to cut the source geometry with the flag geometry."), -1;
   }
   get _edgeSourceLayerIds() {
     const e = this.utilityNetwork?.dataElement?.domainNetworks;
@@ -62,7 +62,7 @@ class R extends G {
   async _handleAddButtonClick() {
     const { view: e, sketchViewModel: t } = this;
     if (!(e && t)) {
-      u("error", this, "Cannot add trace location."), t || u("error", this, f("sketchViewModel")), e || u("error", this, f("view"));
+      l("error", this, "Cannot add trace location."), t || l("error", this, g("sketchViewModel")), e || l("error", this, g("view"));
       return;
     }
     if (this.beforeTraceLocationSelectStart) {
@@ -73,10 +73,10 @@ class R extends G {
         this.isSelectWaiting = !1;
       }
     }
-    this.arcgisTraceLocationSelectStart.emit({ cancelSelect: () => t.cancel() }).defaultPrevented || await this._startSketch(e, t);
+    await this._startSketch(e, t);
   }
   async _startSketch(e, t) {
-    this._clickHandler?.remove(), this._clickHandler = t.on("create", (r) => this._handleSketchComplete(r, e, t)), "acquireCursor" in e && e.acquireCursor("crosshair"), t.snappingOptions.enabled = !0, t.create("point");
+    this.arcgisTraceLocationSelectStart.emit({ cancelSelect: () => t.cancel() }).defaultPrevented || (this._clickHandler?.remove(), this._clickHandler = t.on("create", (s) => this._handleSketchComplete(s, e, t)), "acquireCursor" in e && e.acquireCursor("crosshair"), t.snappingOptions.enabled = !0, t.create("point"));
   }
   _handleSketchComplete(e, t, r) {
     if (e.state === "complete" && e.graphic) {
@@ -88,104 +88,87 @@ class R extends G {
   async _performHitTest(e, t, r) {
     const { utilityNetwork: s } = this;
     if (!s) {
-      u("error", this, f("utilityNetwork")), this._resetCursor(), this.arcgisTraceLocationSelectEnd.emit();
+      l("error", this, g("utilityNetwork")), this._resetCursor(), this.arcgisTraceLocationSelectEnd.emit();
       return;
     }
-    const n = e.graphic?.geometry, a = t.toScreen(n);
+    const o = e.graphic?.geometry, a = t.toScreen(o);
     if (!a) {
-      u("warn", this, "No screen point available for hit test."), this._startSketch(t, r);
+      l("warn", this, "No screen point available for hit test."), this._startSketch(t, r);
       return;
     }
     const i = (await t.hitTest(a, {
       include: this.filterLayers
-    })).results.filter((o) => o.type === "graphic" && o?.layer && o.graphic);
+    })).results.filter((n) => n.type === "graphic" && n?.layer && n.graphic);
     if (i.length === 0) {
-      u("info", this, "No usable hit test results found."), this._startSketch(t, r);
+      l("info", this, "No usable hit test results found."), this._startSketch(t, r);
       return;
     }
-    this._resetCursor(), await this._processHitTestResults(i, n, t), this.arcgisTraceLocationSelectEnd.emit();
+    this._resetCursor(), await this._processHitTestResults(i, o, t) ? this.arcgisTraceLocationSelectEnd.emit() : this._startSketch(t, r);
   }
   _resetCursor() {
     const { view: e, sketchViewModel: t } = this;
     if (!e) {
-      u("error", this, f("view"));
+      l("error", this, g("view"));
       return;
     }
     t && (t.snappingOptions.enabled = !1), this._clickHandler?.remove(), this._clickHandler = void 0, "acquireCursor" in e && e.acquireCursor("default");
   }
   async _processHitTestResults(e, t, r) {
-    if (e.length === 0) {
-      u("error", this, "There are no hit test results to process.");
-      return;
-    }
-    const s = e[0], n = e.map((i) => {
-      const o = i, l = o.graphic;
-      return l.origin = o.layer, l.sourceLayer = o.layer, l;
+    if (e.length === 0)
+      return l("error", this, "There are no hit test results to process."), !1;
+    const s = e[0], o = e.map((u) => {
+      const n = u, p = n.graphic;
+      return p.origin = n.layer, p.sourceLayer = n.layer, p;
     });
     let a = s.graphic;
     if (this.afterHitTest)
       try {
-        a = await this.afterHitTest(n);
+        a = await this.afterHitTest(o);
       } catch {
         a = null;
       }
-    if (!a) {
-      u("error", this, "No graphic available from hit test results."), this.arcgisTraceLocationSelectEnd.emit();
-      return;
-    }
+    if (!a)
+      return l("error", this, "No graphic available from hit test results."), this.arcgisTraceLocationSelectEnd.emit(), !0;
     const c = await this._ensureNecessaryAttributes(a);
-    if (!c) {
-      u("error", this, "Unable to ensure necessary attributes on the selected graphic."), this.arcgisTraceLocationSelectEnd.emit();
-      return;
-    }
-    await this._generateTraceLocation(c, t, r);
+    return c ? await this._generateTraceLocation(c, t, r) : (l("error", this, "Unable to ensure necessary attributes on the selected graphic."), this.arcgisTraceLocationSelectEnd.emit(), !0);
   }
   async _ensureNecessaryAttributes(e) {
-    const t = (S(e.layer), e.layer), r = t.geometryType === null, s = t.fieldsIndex?.get("assetgroup") ?? !1, n = t.fieldsIndex?.get("assetgroup")?.name ?? "assetgroup", a = t.fieldsIndex?.get("assettype") ?? !1, c = t.fieldsIndex?.get("assettype")?.name ?? "assettype", i = e.getGlobalId(), o = e.getObjectId(), l = s ? !!e.getAttribute(n) : !0, p = a ? !!e.getAttribute(c) : !0, d = !!e.geometry;
-    if (i && o && l && p && (d || r))
+    const t = (S(e.layer), e.layer), r = t.geometryType === null, s = t.fieldsIndex?.get("assetgroup") ?? !1, o = t.fieldsIndex?.get("assetgroup")?.name ?? "assetgroup", a = t.fieldsIndex?.get("assettype") ?? !1, c = t.fieldsIndex?.get("assettype")?.name ?? "assettype", i = e.getGlobalId(), u = e.getObjectId(), n = s ? !!e.getAttribute(o) : !0, p = a ? !!e.getAttribute(c) : !0, d = !!e.geometry;
+    if (i && u && n && p && (d || r))
       return e;
-    const g = t.createQuery();
-    return g.objectIds = [o], (await t.queryFeatures(g))?.features[0] || null;
+    const h = t.createQuery();
+    return h.objectIds = [u], (await t.queryFeatures(h))?.features[0] || null;
   }
   async _generateTraceLocation(e, t, r) {
-    const { traceLocations: s } = this, n = e.getGlobalId() ?? "", a = e.geometry?.type, c = await this._generateFlagInfo(e, t);
-    if (!c) {
-      u("error", this, "Unable to generate flag info for trace location.");
-      return;
-    }
-    const i = s?.filter((l) => l.spatialProperties.mapGraphic?.getGlobalId() === n) ?? [];
+    const { traceLocations: s } = this, o = e.getGlobalId() ?? "", a = e.geometry?.type, c = await this._generateFlagInfo(e, t);
+    if (!c)
+      return l("error", this, "Unable to generate flag info for trace location."), !1;
+    const i = s?.filter((n) => n.spatialProperties.mapGraphic?.getGlobalId() === o) ?? [];
     if (i.length > 0) {
-      if (a !== "polyline") {
-        u("warn", this, "A flag with the same globalId already exists.");
-        return;
-      } else if (i.some((l) => Math.abs(l.traceLocation.percentAlong - c.traceLocation.percentAlong) <= this.spatialTolerance)) {
-        u("warn", this, "A flag with the same globalId already exists within tolerance.");
-        return;
-      }
+      if (a !== "polyline")
+        return l("warn", this, "A flag with the same globalId already exists."), !1;
+      if (i.some((n) => Math.abs(n.traceLocation.percentAlong - c.traceLocation.percentAlong) <= this.spatialTolerance))
+        return l("warn", this, "A flag with the same globalId already exists within tolerance."), !1;
     }
-    const o = this._addFlagGraphic(e, t, r);
-    if (!o) {
-      u("warn", this, "Unable to add flag graphic.");
-      return;
-    }
-    c.spatialProperties.flagGraphic = o, s?.add(c);
+    const u = this._addFlagGraphic(e, t, r);
+    return u ? (c.spatialProperties.flagGraphic = u, s?.add(c), !0) : (l("warn", this, "Unable to add flag graphic."), !1);
   }
   async _generateFlagInfo(e, t) {
-    const { traceLocationType: r, utilityNetwork: s } = this, n = e.getGlobalId() ?? "", a = e.geometry?.type, c = await this._generateItemTitle(e);
+    const { traceLocationType: r, utilityNetwork: s } = this, o = e.getGlobalId() ?? "", a = e.geometry?.type, c = await this._generateItemTitle(e);
     if (a === "point" || a === "polygon") {
-      const i = s?.getTerminalConfiguration(e), o = i ? i.terminals[0].id : 1;
+      const i = s?.getTerminalConfiguration(e), u = i ? i.terminals[0].id : 1;
       return {
         traceLocation: new T({
           type: r,
           isFilterBarrier: !1,
-          globalId: n,
-          terminalId: o
+          globalId: o,
+          terminalId: u
         }),
         flagProperties: {
           title: c,
           expanded: !1,
           terminalConfiguration: i ?? void 0,
-          selectedTerminals: i ? /* @__PURE__ */ new Set([o]) : void 0
+          selectedTerminals: i ? /* @__PURE__ */ new Set([u]) : void 0
         },
         spatialProperties: {
           mapPoint: t,
@@ -194,11 +177,11 @@ class R extends G {
       };
     } else if (a === "polyline") {
       const i = this._calculatePercentAlong(e.geometry, t);
-      return {
+      return i < 0 ? (l("warn", this, "Unable to calculate percent along for polyline flag."), null) : {
         traceLocation: new T({
           type: r,
           isFilterBarrier: !1,
-          globalId: n,
+          globalId: o,
           percentAlong: i
         }),
         flagProperties: {
@@ -213,20 +196,20 @@ class R extends G {
         }
       };
     } else if (!a) {
-      const i = P(e.layer) ? e.layer.parent : e.layer, o = i && this._edgeSourceLayerIds.includes(i.layerId), l = s?.getTerminalConfiguration(e), p = l ? l.terminals[0].id : o ? -1 : 1, d = o ? 0.5 : -1;
+      const i = P(e.layer) ? e.layer.parent : e.layer, u = i && this._edgeSourceLayerIds.includes(i.layerId), n = s?.getTerminalConfiguration(e), p = n ? n.terminals[0].id : u ? -1 : 1, d = u ? 0.5 : -1;
       return {
         traceLocation: new T({
           type: r,
           isFilterBarrier: !1,
-          globalId: n,
+          globalId: o,
           terminalId: p,
           percentAlong: d
         }),
         flagProperties: {
           title: c,
           expanded: !1,
-          terminalConfiguration: l ?? void 0,
-          selectedTerminals: l ? /* @__PURE__ */ new Set([p]) : void 0
+          terminalConfiguration: n ?? void 0,
+          selectedTerminals: n ? /* @__PURE__ */ new Set([p]) : void 0
         },
         spatialProperties: {
           mapPoint: t,
@@ -241,16 +224,16 @@ class R extends G {
     return ("getFeatureTitle" in r ? await r.getFeatureTitle(e) : null) || e?.getObjectId()?.toString() || t.labels.unknown;
   }
   _addFlagGraphic(e, t, r) {
-    const s = e.geometry ? e.geometry.type === "point" ? e.geometry : t : null, n = this._createFlagSymbol(), a = new v({
+    const s = e.geometry ? e.geometry.type === "point" ? e.geometry : t : null, o = this._createFlagSymbol(), a = new F({
       geometry: s,
-      symbol: n,
+      symbol: o,
       attributes: e.attributes
     });
     return r.graphics.add(a), a;
   }
   _createFlagSymbol() {
     const { traceLocationType: e } = this, t = [244, 21, 21, 0.6], r = [21, 244, 21, 0.6];
-    return e === "stopping-point" ? new w({
+    return e === "stopping-point" ? new L({
       color: t,
       style: "x",
       size: 12,
@@ -258,7 +241,7 @@ class R extends G {
         color: t,
         width: 2
       }
-    }) : e === "barrier" ? new w({
+    }) : e === "barrier" ? new L({
       color: t,
       style: "square",
       size: 12,
@@ -266,7 +249,7 @@ class R extends G {
         color: t,
         width: 0
       }
-    }) : new w({
+    }) : new L({
       color: r,
       style: "circle",
       size: 12,
@@ -283,7 +266,7 @@ class R extends G {
     }), t?.removeAll();
   }
   renderAddLocationBlock() {
-    const { traceLocationType: e, messages: t, traceLocations: r, view: s } = this, n = e === "starting-point" ? t.types.startingPoint : e === "barrier" ? t.types.barrier : t.types.stoppingPoint, a = n.heading, c = n.description, i = n.buttonText;
+    const { traceLocationType: e, messages: t, traceLocations: r, view: s } = this, o = e === "starting-point" ? t.types.startingPoint : e === "barrier" ? t.types.barrier : t.types.stoppingPoint, a = o.heading, c = o.description, i = o.buttonText;
     return y`<calcite-block .heading=${a} .label=${a} expanded .description=${c}>${r?.length ? y`<calcite-button class="clear-button" slot=actions-end appearance=transparent .label=${t.buttons.clear} @click=${() => this._handleClearButtonClick()}>${t.buttons.clear}</calcite-button><arcgis-utility-network-trace-location-list .traceLocations=${r} .traceLocationType=${e} .view=${s}></arcgis-utility-network-trace-location-list>` : null}<div class="button-container"><calcite-button .loading=${this.isSelectWaiting} class="add-location-button" icon-start=select appearance=outline .label=${i} @click=${() => this._handleAddButtonClick()}>${i}</calcite-button></div></calcite-block>`;
   }
   render() {