@arcgis/map-components 5.1.0-next.98 → 5.1.0

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

@@ -1,14 +1,14 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { g as x, c as p } from "../../chunks/runtime.js";
-import { keyed as _ } from "lit/directives/keyed.js";
+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 v } from "../../chunks/useView.js";
 import { u as y } from "../../chunks/useT9n.js";
-import { css as L, html as m } from "lit";
+import { css as b, html as o } from "lit";
 import { usePropertyChange as $ } from "@arcgis/lumina/controllers";
-import { createRef as b, ref as w } from "lit/directives/ref.js";
-import T from "@arcgis/core/portal/Portal.js";
+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,35 @@ const h = /* @__PURE__ */ new Set([
   "th-th",
   "zh-cn",
   "zh-tw"
-]), P = L`:host{display:block;width:310px;max-width:100%}.slider{height:50px}.scale-indicator-container{position:relative;width:100%;margin-top:5px}.scale-indicator-icon{transform:scale(.8,1.7);margin-left:-6px;width:1px}.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 = [
+]), T = {
+  ar: "iq",
+  bg: "bg",
+  cs: "cz",
+  da: "dk",
+  de: "de",
+  el: "gr",
+  en: "us",
+  es: "es",
+  et: "ee",
+  fi: "fi",
+  fr: "fr",
+  is: "is",
+  it: "it",
+  ja: "jp",
+  ko: "kr",
+  lt: "lt",
+  lv: "lv",
+  nl: "nl",
+  nn: "no",
+  pl: "pl",
+  pt: "br",
+  ro: "ro",
+  ru: "ru",
+  sk: "sk",
+  sv: "se",
+  th: "th",
+  zh: "cn"
+}, 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 },
@@ -106,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 R extends g {
+class I extends g {
   constructor() {
-    super(...arguments), this.messages = y(), this._sliderRef = b(), 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();
+    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 };
@@ -124,7 +152,7 @@ class R extends g {
     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;
@@ -134,11 +162,11 @@ class R extends g {
         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(() => {
@@ -151,50 +179,68 @@ class R extends g {
       }), ({ 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 r = this.layer && "maxScaleRange" in this.layer ? this.layer.maxScaleRange : null;
-          let n = 0, o = 0;
-          r && (n = r.minScale, o = r.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() {
+    if (this.region) {
+      const a = this.region.toLowerCase(), t = `${this.messages._t9nLocale}-${a}`;
+      if (h.has(t))
+        return t;
+      for (const s of h)
+        if (s.endsWith(`-${a}`))
+          return s;
+    }
     const e = this.messages._lang.toLowerCase();
     if (h.has(e))
       return e;
-    if (this.region) {
-      const a = `${this.messages._t9nLocale}-${this.region.toLowerCase()}`;
+    if (this._portalRegion) {
+      const a = `${this.messages._t9nLocale}-${this._portalRegion}`;
       if (h.has(a))
         return a;
     }
-    if (this._portalRegion) {
-      const a = `${this.messages._t9nLocale}-${this._portalRegion}`;
+    const i = T[this.messages._t9nLocale];
+    if (i) {
+      const a = `${this.messages._t9nLocale}-${i}`;
       if (h.has(a))
         return a;
     }
-    const i = `${this.messages._t9nLocale}-${this.messages._t9nLocale}`;
-    if (h.has(i))
-      return i;
     for (const a of h)
       if (a.startsWith(`${this.messages._t9nLocale}-`))
         return a;
@@ -208,20 +254,20 @@ class R extends g {
     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) {
@@ -236,21 +282,22 @@ class R extends g {
   }
   _renderScalePreviewPopover() {
     const e = this._renderScalePreview();
-    return this.hidePreview || !e ? null : m`<div slot=popover>${e}</div>`;
+    return this.hidePreview || !e ? null : o`<div slot=popover>${e}</div>`;
   }
   render() {
-    return m`<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")] : m`<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 _("scale-indicator", m`<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 m`<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) => {
@@ -258,10 +305,10 @@ class R extends g {
     }}></calcite-input-number></calcite-list-item>`;
   }
   _renderScaleMenuButtons(e) {
-    return m`<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 m`<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>`;
   }
@@ -269,24 +316,24 @@ class R extends g {
     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)), r = Math.floor(this._mapScaleToSlider(this.minScaleLimit)), n = l.filter((o, S) => e === "min" ? S < i && S >= r : 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 m`<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 m`<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>`;
   }
@@ -294,17 +341,17 @@ class R extends g {
     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), r = `-${s}px -${c}px`, n = this._getSpriteSheetFile();
-    return m`<div class="preview-container"><img src=${x(`./assets/slider-scale-range/images/${n}.avif`) ?? M} 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: r,
+      objectPosition: n,
       objectFit: "none"
     })}></div>`;
   }
 }
-p("arcgis-slider-scale-range", R);
+_("arcgis-slider-scale-range", I);
 export {
-  R as ArcgisSliderScaleRange
+  I as ArcgisSliderScaleRange
 };

package/dist/components/arcgis-slider-size-legacy/customElement.d.ts

@@ -112,10 +112,10 @@ export abstract class ArcgisSliderSizeLegacy extends LitElement {
    *   numBins: 30,
    * });
    *
-   *  slider.histogramConfig = {
-   *    bins: histogramResult.bins
-   *  };
-   *       ```
+   * slider.histogramConfig = {
+   *   bins: histogramResult.bins
+   * };
+   * ```
    * @see [histogram](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/statistics/histogram/)
    */
   accessor histogramConfig: HistogramConfig | null | undefined;
@@ -166,7 +166,7 @@ export abstract class ArcgisSliderSizeLegacy extends LitElement {
    *   }
    *   return value.toFixed(0);
    * };
-   *            ```
+   * ```
    */
   accessor inputFormatFunction: LabelFormatFunction | null | undefined;
   /**
@@ -211,7 +211,7 @@ export abstract class ArcgisSliderSizeLegacy extends LitElement {
    * slider.labelFormatFunction = (value: number, type?: SliderFormatType): string => {
    *   return (type === "value") ? value.toFixed(0) : value.toString();
    * };
-   *           ```
+   * ```
    */
   accessor labelFormatFunction: LabelFormatFunction | null | undefined;
   /**
@@ -315,12 +315,12 @@ export abstract class ArcgisSliderSizeLegacy extends LitElement {
    *   min: 10,
    *   max: 25
    * };
-   *           ```
+   * ```
    * @example
    * ```js
    * // disables zooming on the slider
    * slider.zoomOptions = null;
-   *           ```
+   * ```
    * @example
    * ```js
    * // zooms the slider so thumbs can only be moved to positions above
@@ -328,7 +328,7 @@ export abstract class ArcgisSliderSizeLegacy extends LitElement {
    * slider.zoomOptions = {
    *   min: 10
    * };
-   *           ```
+   * ```
    * @example
    * ```js
    * // zooms the slider so thumbs can only be moved to positions below
@@ -336,7 +336,7 @@ export abstract class ArcgisSliderSizeLegacy extends LitElement {
    * slider.zoomOptions = {
    *   max: 25
    * };
-   *           ```
+   * ```
    */
   accessor zoomOptions: ZoomOptions | null | undefined;
   /** Permanently destroy the component. */

package/dist/components/arcgis-spinner/customElement.js

@@ -1,22 +1,19 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as i } from "../../chunks/runtime.js";
-import { css as r, html as a } from "lit";
-import { LitElement as n, safeStyleMap as l } from "@arcgis/lumina";
-import { t as c } from "../../chunks/screenLocation.js";
-const p = r`:host{display:contents}.root{position:absolute}`;
-class m extends n {
+import { css as n, html as r } from "lit";
+import { LitElement as c, safeStyleMap as l } from "@arcgis/lumina";
+import { t as a } from "../../chunks/screenLocation.js";
+const p = n`:host{display:contents}.root{position:absolute}`;
+class m extends c {
   constructor() {
-    super(...arguments), this.autoDestroyDisabled = !1, this.trackLocation = !1, this.screenLocation = c(this);
+    super(...arguments), this.trackLocation = !1, this.screenLocation = a(this);
   }
   static {
-    this.properties = { autoDestroyDisabled: 5, trackLocation: 5, screenLocation: 32, label: 1, location: 0, view: 0 };
+    this.properties = { trackLocation: 5, screenLocation: 32, label: 1, location: 0, view: 0 };
   }
   static {
     this.styles = p;
   }
-  async destroy() {
-    await this.manager.destroy();
-  }
   _getPositionStyles() {
     const { screenLocation: t, view: s } = this;
     if (s == null || t == null)
@@ -29,7 +26,7 @@ class m extends n {
     };
   }
   render() {
-    return this.screenLocation ? a`<calcite-loader class="root" .label=${this.label ?? ""} inline style=${l(this._getPositionStyles())}></calcite-loader>` : null;
+    return this.screenLocation ? r`<calcite-loader class="root" .label=${this.label ?? ""} inline style=${l(this._getPositionStyles())}></calcite-loader>` : null;
   }
 }
 i("arcgis-spinner", m);

package/dist/components/arcgis-template-image/customElement.d.ts

@@ -0,0 +1,14 @@
+/// <reference path="../../index.d.ts" />
+import type TemplateListItem from "@arcgis/core/editing/templates/TemplateListItem.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+
+/**
+ * The Template Image component generates a feature swatch representing a
+ * Feature Template.
+ *
+ * @since 5.1
+ * @internal
+ */
+export abstract class ArcgisTemplateImage extends LitElement {
+  accessor template: TemplateListItem | undefined;
+}

package/dist/components/arcgis-template-image/customElement.js

@@ -0,0 +1,122 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { c as h } from "../../chunks/runtime.js";
+import p from "@arcgis/core/Graphic.js";
+import { css as g, html as s } from "lit";
+import { createRef as d, ref as f } from "lit/directives/ref.js";
+import { unsafeHTML as b } from "lit/directives/unsafe-html.js";
+import { LitElement as _, safeStyleMap as y } from "@arcgis/lumina";
+import * as l from "@arcgis/toolkit/log";
+import { isSharedTemplateMetadata as c, isStandardFeatureTemplate as v } from "@arcgis/core/applications/Components/templateUtils.js";
+import "@arcgis/core/editing/sharedTemplates/SharedTemplateMetadata.js";
+import { renderPreviewHTML as w } from "@arcgis/core/symbols/support/symbolUtils.js";
+import { isTable as I } from "@arcgis/core/applications/Components/layerUtils.js";
+const D = g`.esri-thumbnail-preview{width:22px;height:22px;background-position:50% 50%;background-repeat:no-repeat}.template-image-container{width:32px;height:32px;display:flex;align-items:center;justify-content:center}`;
+async function x(e, t, i) {
+  if (c(e) && e.thumbnail) {
+    const u = `data:image/png;base64,${e.thumbnail.imageData}`;
+    return s`<div class="esri-thumbnail-preview" style=${y({ backgroundImage: `url(${u})` })}></div>`;
+  }
+  if (I(t))
+    return s`<calcite-icon icon=table scale=s></calcite-icon>`;
+  const r = await T(t, e);
+  if (r == null)
+    return null;
+  const n = { maxSize: 24, ariaLabel: i?.ariaLabel };
+  v(e) && "renderer" in t && t.renderer?.type === "dictionary" && (n.fieldMap = t.renderer.fieldMap ?? void 0, n.feature = {
+    attributes: e.prototype.attributes ?? {}
+  });
+  const o = await w(r, n);
+  return o ? s`${b(o.outerHTML)}` : null;
+}
+async function T(e, t) {
+  if (c(t))
+    return await m(e);
+  if ("renderer" in e && e.renderer) {
+    const { renderer: i } = e, r = new p({ attributes: t.prototype.attributes });
+    if ("getSymbolAsync" in i) {
+      const a = await i.getSymbolAsync(r);
+      if (a)
+        return a;
+    }
+  }
+  return await m(e);
+}
+async function C(e) {
+  const t = e === "point" || e === "multipoint" ? await import("@arcgis/core/symbols/SimpleMarkerSymbol.js") : e === "polyline" ? await import("@arcgis/core/symbols/SimpleLineSymbol.js") : e === "polygon" || e === "mesh" || e === "multipatch" ? await import("@arcgis/core/symbols/SimpleFillSymbol.js") : null;
+  return t ? new t.default() : null;
+}
+async function m(e) {
+  return "geometryType" in e && e.geometryType ? await C(e.geometryType) : null;
+}
+class L extends _ {
+  constructor() {
+    super(...arguments), this._lastRun = 0, this._attempted = !1, this._isCurrentlyInView = !1, this._intersectionObserver = null, this._imageContainerDiv = d(), this._generatedImageData = null;
+  }
+  static {
+    this.properties = { _generatedImageData: 16, template: 0 };
+  }
+  static {
+    this.styles = D;
+  }
+  get rootLayer() {
+    return this.template?.layer?.type === "subtype-sublayer" ? this.template.layer.parent : this.template?.layer;
+  }
+  willUpdate(t) {
+    t.has("template") && (this.hasUpdated || this.template !== null) && this._resetData();
+  }
+  updated() {
+    !this._attempted && this._isCurrentlyInView && (this._attempted = !0, this._handleImage().catch((t) => {
+      l.log("warn", this, "Failed processing image");
+    }));
+  }
+  loaded() {
+    this.manager.onLifecycle(() => (this._addIntersectionObserver(), () => {
+      this._removeIntersectionObserver();
+    }));
+  }
+  _resetData() {
+    this._generatedImageData = null, this._attempted = !1;
+  }
+  async _generateImage() {
+    return this.template ? await x(this.template.template, this.template.layer) : "";
+  }
+  async _handleImage() {
+    const t = ++this._lastRun;
+    if (!this._generatedImageData || this._generatedImageData === "")
+      try {
+        const i = await this._generateImage();
+        if (this._lastRun !== t || this._generatedImageData === i)
+          return;
+        this._generatedImageData = i;
+      } finally {
+        this._attempted = !0;
+      }
+  }
+  _addIntersectionObserver() {
+    const t = {
+      // If the image gets within 50px in the Y axis, start the download.
+      rootMargin: "50px 0px",
+      threshold: 0.01
+    };
+    this._imageContainerDiv.value && requestAnimationFrame(() => {
+      this.isConnected && (this._intersectionObserver = new IntersectionObserver((i) => {
+        let r = !1;
+        i.forEach((a) => {
+          a.intersectionRatio > 0 && !r ? (r = !0, this._isCurrentlyInView = !0, this._handleImage().catch((n) => {
+            l.log("warn", this, "Failed processing image");
+          })) : this._isCurrentlyInView = !1;
+        });
+      }, t), this._intersectionObserver?.observe(this._imageContainerDiv.value));
+    });
+  }
+  _removeIntersectionObserver() {
+    this._intersectionObserver?.disconnect(), this._intersectionObserver = null;
+  }
+  render() {
+    return s`<div class="template-image-container" ${f(this._imageContainerDiv)}>${this._generatedImageData ?? ""}</div>`;
+  }
+}
+h("arcgis-template-image", L);
+export {
+  L as ArcgisTemplateImage
+};

package/dist/components/arcgis-template-image/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-template-image/index.js

@@ -0,0 +1,2 @@
+import "@esri/calcite-components/components/calcite-icon";
+export * from "./customElement.js";

package/dist/components/arcgis-time-slider/customElement.d.ts

@@ -8,7 +8,7 @@ import type { TimeSliderViewModelTriggerActionEvent } from "@arcgis/core/widgets
 import type { TimeSliderSettings, Action, TimeSliderMode, TimeSliderState, Stops } from "@arcgis/core/widgets/TimeSlider/types.js";
 import type { MapViewOrSceneView } from "@arcgis/core/views/MapViewOrSceneView.js";
 import type { Icon } from "@esri/calcite-components/components/calcite-icon";
-import type { TimeSliderLayout } from "@arcgis/core/widgets/TimeSlider.js";
+import type { DateLabelFormatter, TimeSliderLayout } from "@arcgis/core/widgets/TimeSlider.js";
 import type { TickConfig } from "@arcgis/core/widgets/Slider/types.js";
 
 /**
@@ -19,7 +19,7 @@ import type { TickConfig } from "@arcgis/core/widgets/Slider/types.js";
 export abstract class ArcgisTimeSlider extends LitElement {
   /**
    * Defines actions that will appear in a menu when the user clicks the ellipsis button
-   * ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/ellipsis.png) in the component. The
+   * ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/ellipsis.avif) in the component. The
    * ellipsis button will not display if this property is `null` or if the collection is empty.
    * Each [Action](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/types/#Action) is defined with a unique id, a title,
    * and an icon.
@@ -28,7 +28,7 @@ export abstract class ArcgisTimeSlider extends LitElement {
    * can be used to execute custom code such as setting the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) to a specific date or copying the
    * timeExtent to the browser's clipboard.
    *
-   * [![widgets-timeSlider-actions](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/widgets-timeslider-actions.png)](https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-timeslider-offset)
+   * [![widgets-timeSlider-actions](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/widgets-timeslider-actions.avif)](https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-timeslider-offset)
    *
    * @since 4.21
    * @see [Sample - TimeSlider with offset](https://developers.arcgis.com/javascript/latest/sample-code/widgets-timeslider-offset/)
@@ -151,6 +151,7 @@ export abstract class ArcgisTimeSlider extends LitElement {
    * @since 4.11
    */
   accessor label: string;
+  accessor labelFormatFunction: DateLabelFormatter | null | undefined;
   /**
    * Determines the layout used by the TimeSlider component.
    *
@@ -187,10 +188,10 @@ export abstract class ArcgisTimeSlider extends LitElement {
    *
    * Possible Values       | Description   | Example |
    * ----------------------|-------------- | ------- |
-   * instant               | The slider will show temporal data that falls on a single instance in time. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `end` dates to same date: `{start: sameDate, end: sameDate}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-instance.png"> |
-   * time-window           | The slider will show temporal data that falls within a given time range. This is the default. Set [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `date` properties to desired dates. | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-time-window.png"> |
-   * cumulative-from-start | Similar to `time-window` with the start time is always pinned to the start of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to `null` and set `end` date to a desired date: `{start: null, end: date}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-start.png"> |
-   * cumulative-from-end   | Also, similar to the `time-window` with the end time pinned to the end of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to a desired date and set `end` date to `null`: `{start: date, end: null}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-end.png"> |
+   * instant               | The slider will show temporal data that falls on a single instance in time. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `end` dates to same date: `{start: sameDate, end: sameDate}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-instance.avif"> |
+   * time-window           | The slider will show temporal data that falls within a given time range. This is the default. Set [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `date` properties to desired dates. | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-time-window.avif"> |
+   * cumulative-from-start | Similar to `time-window` with the start time is always pinned to the start of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to `null` and set `end` date to a desired date: `{start: null, end: date}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-start.avif"> |
+   * cumulative-from-end   | Also, similar to the `time-window` with the end time pinned to the end of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to a desired date and set `end` date to `null`: `{start: date, end: null}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-end.avif"> |
    *
    * @default "time-window"
    * @see [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent)