@arcgis/map-components 5.1.0-next.7 → 5.1.0-next.71

package/dist/components/arcgis-slider-scale-range/customElement.d.ts

@@ -0,0 +1,271 @@
+/// <reference path="../../index.d.ts" />
+import type MapView from "@arcgis/core/views/MapView.js";
+import type SceneView from "@arcgis/core/views/SceneView.js";
+import type Sublayer from "@arcgis/core/layers/support/Sublayer.js";
+import type Layer from "@arcgis/core/layers/Layer.js";
+import type SubtypeSublayer from "@arcgis/core/layers/support/SubtypeSublayer.js";
+import type LinkChartView from "@arcgis/core/views/LinkChartView.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { ArcgisReferenceElement, IconName } from "../types.js";
+import type { SupportedRegion } from "./spriteSheetsUtils.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+/**
+ * The Scale Range Slider component allows the user to set a minimum and maximum scale based on named scale ranges. When a layer is provided, the component's minScale and maxScale properties will be set to the scale range of the layer.
+ *
+ * @since 5.1
+ */
+export abstract class ArcgisSliderScaleRange extends LitElement {
+  /**
+   * If true, the component will not be destroyed automatically when it is
+   * disconnected from the document. This is useful when you want to move the
+   * component to a different place on the page, or temporarily hide it. If this
+   * is set, make sure to call the [destroy()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-scale-range/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   */
+  accessor autoDestroyDisabled: boolean;
+  /**
+   * When true, the component is visually withdrawn and cannot receive user interaction.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * Indicates whether the maximum scale dropdown menu is visible. Default value is `false`.
+   *
+   * @default false
+   */
+  accessor hideMaxScaleMenu: boolean | undefined;
+  /**
+   * Indicates whether the minimum scale dropdown menu is visible. Default value is `false`.
+   *
+   * @default false
+   */
+  accessor hideMinScaleMenu: boolean | undefined;
+  /**
+   * Indicates whether the preview thumbnail of the scale is visible.
+   * Default value is `false`.
+   *
+   * @default false
+   */
+  accessor hidePreview: boolean | undefined;
+  /**
+   * Icon which represents the component.
+   * Typically used when the component is controlled by another component (e.g. by the Expand component).
+   *
+   * @default "actual-size"
+   * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
+   */
+  accessor icon: IconName;
+  /** The component's default label. */
+  accessor label: string | undefined;
+  /**
+   * When provided, the initial [minScale](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-scale-range/#minScale)
+   * and [maxScale](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-scale-range/#maxScale) values will match the scale range
+   * within which the layer will render.
+   *
+   * When a tiled layer is used, The initial [minScaleLimit](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-scale-range/#minScaleLimit)
+   * and [maxScaleLimit](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-scale-range/#maxScaleLimit) will be set to
+   * restrict the slider thumbs from moving past the `lods` of the layer's tiling scheme.
+   * When a [MapImageLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/MapImageLayer/) is used, the same properties will be set
+   * to prevent the slider thumbs from moving past the min/max scale defined on the map service. The unavailable range will be designated with a dashed line.
+   */
+  accessor layer: Layer | Sublayer | SubtypeSublayer | undefined;
+  /**
+   * The maximum scale of the active scale range.
+   *
+   * @default 0
+   */
+  accessor maxScale: number;
+  /**
+   * The lowest possible maximum scale value on the slider, at which [maxScale](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-scale-range/#maxScale) may not be set below.
+   *
+   * @default 100000000
+   */
+  accessor maxScaleLimit: number;
+  /** @internal */
+  protected messages: Partial<{
+      componentLabel: string;
+      noLimit: string;
+      preview: string;
+      currentScaleTooltip: string;
+      customScaleInputTooltip: string;
+      current: string;
+      setTo: string;
+      selectOne: string;
+      setToSelectOne: string;
+      aboveSuffix: string;
+      belowSuffix: string;
+      currentScale: string;
+      scaleRangeLabels: {
+          world: string;
+          continent: string;
+          countriesBig: string;
+          countriesSmall: string;
+          statesProvinces: string;
+          stateProvince: string;
+          counties: string;
+          county: string;
+          metropolitanArea: string;
+          cities: string;
+          city: string;
+          town: string;
+          neighborhood: string;
+          streets: string;
+          street: string;
+          buildings: string;
+          building: string;
+          smallBuilding: string;
+          rooms: string;
+          room: string;
+      };
+      featuredScaleLabels: {
+          custom: string;
+          current: string;
+          world: string;
+          continent: string;
+          countriesBig: string;
+          countriesSmall: string;
+          statesProvinces: string;
+          stateProvince: string;
+          counties: string;
+          county: string;
+          metropolitanArea: string;
+          cities: string;
+          city: string;
+          town: string;
+          neighborhood: string;
+          streets: string;
+          street: string;
+          buildings: string;
+          building: string;
+          smallBuilding: string;
+          rooms: string;
+          room: string;
+      };
+  }> & T9nMeta<{
+      componentLabel: string;
+      noLimit: string;
+      preview: string;
+      currentScaleTooltip: string;
+      customScaleInputTooltip: string;
+      current: string;
+      setTo: string;
+      selectOne: string;
+      setToSelectOne: string;
+      aboveSuffix: string;
+      belowSuffix: string;
+      currentScale: string;
+      scaleRangeLabels: {
+          world: string;
+          continent: string;
+          countriesBig: string;
+          countriesSmall: string;
+          statesProvinces: string;
+          stateProvince: string;
+          counties: string;
+          county: string;
+          metropolitanArea: string;
+          cities: string;
+          city: string;
+          town: string;
+          neighborhood: string;
+          streets: string;
+          street: string;
+          buildings: string;
+          building: string;
+          smallBuilding: string;
+          rooms: string;
+          room: string;
+      };
+      featuredScaleLabels: {
+          custom: string;
+          current: string;
+          world: string;
+          continent: string;
+          countriesBig: string;
+          countriesSmall: string;
+          statesProvinces: string;
+          stateProvince: string;
+          counties: string;
+          county: string;
+          metropolitanArea: string;
+          cities: string;
+          city: string;
+          town: string;
+          neighborhood: string;
+          streets: string;
+          street: string;
+          buildings: string;
+          building: string;
+          smallBuilding: string;
+          rooms: string;
+          room: string;
+      };
+  }>;
+  /**
+   * The minimum scale of the active scale range.
+   *
+   * @default 0
+   */
+  accessor minScale: number;
+  /**
+   * The highest possible minimum scale value on the slider, at which [minScale](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-scale-range/#minScale) may not be set above.
+   *
+   * @default 147914382
+   */
+  accessor minScaleLimit: number;
+  /**
+   * The mode of the component, indicating which slider thumbs can be adjusted.
+   *
+   * @default "range"
+   */
+  accessor mode: "max-scale-only" | "min-scale-only" | "range";
+  /**
+   * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
+   *
+   * @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
+   */
+  accessor referenceElement: ArcgisReferenceElement | string | undefined;
+  /**
+   * The region that the scale thumbnails will focus on.
+   * Each region comes from the [ISO 3166-1 alpha-2 code](https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes).
+   * See [SupportedRegion](https://developers.arcgis.com/javascript/latest/references/core/widgets/ScaleRangeSlider/types/#SupportedRegion) for the list of regions that are currently supported.
+   */
+  accessor region: SupportedRegion | string | undefined;
+  /**
+   * Indicates whether the world scale value is shown in the scale menu.
+   *
+   * @default false
+   */
+  accessor showWorldValue: boolean;
+  /**
+   * The current state of the component.
+   *
+   * @default "disabled"
+   */
+  get state(): "disabled" | "ready";
+  /**
+   * The view associated with the component. 
+   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-slider-scale-range component will be associated with a map or scene component rather than using the `view` property.
+   */
+  accessor view: LinkChartView | MapView | SceneView | undefined;
+  /** Permanently destroy the component. */
+  destroy(): Promise<void>;
+  /** Fires when the thumb or range is released on the component. Use [@arcgisInput](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-scale-range/#event-arcgisInput) for continuous updates during a drag. */
+  readonly arcgisChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires continuously while the thumb or range is being dragged. This event can fire frequently; consider debouncing or throttling expensive work. */
+  readonly arcgisInput: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "state" | "minScale" | "maxScale"; }>;
+  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    arcgisChange: ArcgisSliderScaleRange["arcgisChange"]["detail"];
+    arcgisInput: ArcgisSliderScaleRange["arcgisInput"]["detail"];
+    arcgisPropertyChange: ArcgisSliderScaleRange["arcgisPropertyChange"]["detail"];
+    arcgisReady: ArcgisSliderScaleRange["arcgisReady"]["detail"];
+  };
+}

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

@@ -0,0 +1,313 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { g as f, c as p } from "../../chunks/runtime.js";
+import { keyed as _ } from "lit/directives/keyed.js";
+import { LitElement as g, createEvent as d, safeStyleMap as u, nothing as M } from "@arcgis/lumina";
+import { watch as x } from "@arcgis/core/core/reactiveUtils.js";
+import { u as v } from "../../chunks/useView.js";
+import { u as L } from "../../chunks/useT9n.js";
+import { css as y, 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";
+const h = /* @__PURE__ */ new Set([
+  "ar-iq",
+  "ar-kw",
+  "bg-bg",
+  "cs-cz",
+  "da-dk",
+  "da-gl",
+  "de-at",
+  "de-ch",
+  "de-de",
+  "de-li",
+  "el-gr",
+  "en-ae",
+  "en-au",
+  "en-ca",
+  "en-eg",
+  "en-gb",
+  "en-hk",
+  "en-id",
+  "en-ie",
+  "en-il",
+  "en-in",
+  "en-iq",
+  "en-ke",
+  "en-lu",
+  "en-mo",
+  "en-my",
+  "en-nz",
+  "en-rw",
+  "en-sg",
+  "en-us",
+  "en-vi",
+  "en-wo",
+  "en-za",
+  "es-ar",
+  "es-bo",
+  "es-cl",
+  "es-co",
+  "es-cr",
+  "es-es",
+  "es-gt",
+  "es-mx",
+  "es-ni",
+  "es-pe",
+  "es-pr",
+  "es-sv",
+  "es-ve",
+  "et-ee",
+  "fi-fi",
+  "fr-ci",
+  "fr-fr",
+  "fr-ma",
+  "fr-mg",
+  "fr-ml",
+  "fr-tn",
+  "is-is",
+  "it-it",
+  "ja-jp",
+  "ko-kr",
+  "lt-lt",
+  "lv-lv",
+  "nl-be",
+  "nl-nl",
+  "nl-sr",
+  "nn-no",
+  "pl-pl",
+  "pt-br",
+  "pt-pt",
+  "ro-ro",
+  "ru-ru",
+  "sk-sk",
+  "sv-se",
+  "th-th",
+  "zh-cn",
+  "zh-tw"
+]), R = y`: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 = [
+  { id: "world", scale: 147914382, minScale: 147914382, maxScale: 1e8 },
+  { id: "continent", scale: 5e7, minScale: 99999999, maxScale: 35e6 },
+  { id: "countriesBig", scale: 25e6, minScale: 34999999, maxScale: 15e6 },
+  { id: "countriesSmall", scale: 12e6, minScale: 14999999, maxScale: 7e6 },
+  { id: "statesProvinces", scale: 6e6, minScale: 6999999, maxScale: 4e6 },
+  { id: "stateProvince", scale: 3e6, minScale: 3999999, maxScale: 2e6 },
+  { id: "counties", scale: 15e5, minScale: 1999999, maxScale: 1e6 },
+  { id: "county", scale: 75e4, minScale: 999999, maxScale: 5e5 },
+  { id: "metropolitanArea", scale: 32e4, minScale: 499999, maxScale: 25e4 },
+  { id: "cities", scale: 16e4, minScale: 249999, maxScale: 12e4 },
+  { id: "city", scale: 8e4, minScale: 119999, maxScale: 6e4 },
+  { id: "town", scale: 4e4, minScale: 59999, maxScale: 3e4 },
+  { id: "neighborhood", scale: 2e4, minScale: 29999, maxScale: 15e3 },
+  { id: "streets", scale: 1e4, minScale: 14999, maxScale: 7500 },
+  { id: "street", scale: 5e3, minScale: 7499, maxScale: 4e3 },
+  { id: "buildings", scale: 2500, minScale: 3999, maxScale: 2e3 },
+  { id: "building", scale: 1250, minScale: 1999, maxScale: 801 },
+  { id: "smallBuilding", scale: 800, minScale: 800, maxScale: 401 },
+  { id: "rooms", scale: 400, minScale: 400, maxScale: 101 },
+  { id: "room", scale: 100, minScale: 100, maxScale: 0 }
+];
+class I extends g {
+  constructor() {
+    super(...arguments), this.messages = L(), 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 = v(this), this.arcgisChange = d(), this.arcgisInput = d(), this.arcgisPropertyChange = b()("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 };
+  }
+  static {
+    this.styles = R;
+  }
+  get state() {
+    const { view: e, layer: i } = this;
+    return !e && !i || !e && i?.loadStatus === "loaded" || !i && e?.ready || e?.ready && i?.loadStatus === "loaded" ? "ready" : "disabled";
+  }
+  async destroy() {
+    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))), e.has("maxScale") || e.has("minScale")) {
+      if (this.minScale !== 0) {
+        const i = this._clampScale("min", this.minScale);
+        this.minScale = i === this.minScaleLimit ? 0 : i;
+      }
+      if (this.maxScale !== 0) {
+        const i = this._clampScale("max", this.maxScale);
+        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());
+  }
+  loaded() {
+    T.getDefault().load().then((i) => {
+      const a = i.user?.culture ?? i.culture;
+      a && (this._portalRegion = a.split("-")[1]?.toLowerCase() ?? null);
+    }).catch(() => {
+    }), this.manager.onLifecycle(() => [
+      x(() => this.view?.scale, () => this.requestUpdate(), { initial: !0 }),
+      x(() => ({
+        // Layer type has loaded property, but Sublayer and SubtypeSublayer use loadStatus instead
+        loaded: this.layer?.loadStatus === "loaded",
+        ready: this.view?.ready
+      }), ({ loaded: i, ready: a }) => {
+        if (!i || !a || !this.layer)
+          return;
+        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);
+        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);
+        }
+        this.minScaleLimit = this._layerMinScaleLimit, 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)));
+      }, { initial: !0 })
+    ]);
+  }
+  get _effectiveMinScale() {
+    return this.minScale === 0 ? this.minScaleLimit : this.minScale;
+  }
+  get _effectiveMaxScale() {
+    return this.maxScale === 0 ? this.maxScaleLimit : this.maxScale;
+  }
+  _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);
+  }
+  _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.messages._t9nLocale}-${this.region.toLowerCase()}`;
+      if (h.has(a))
+        return a;
+    }
+    if (this._portalRegion) {
+      const a = `${this.messages._t9nLocale}-${this._portalRegion}`;
+      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;
+    return "en-wo";
+  }
+  _handleCustomScaleInput(e, i) {
+    const a = Number.parseFloat(i);
+    this._setScale(e, a);
+  }
+  _handleSliderThumbDrag() {
+    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;
+      } 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;
+      } 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;
+      }
+      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;
+    return t ? s + (i - t.minScale) * (c - s) / (t.maxScale - t.minScale) : 0;
+  }
+  _mapSliderToScale(e) {
+    const i = Math.min(l.length - 1, Math.max(0, Math.floor(e))), { maxScale: a, minScale: t } = l[i], s = i, c = s + 0.9999;
+    return t + (e - s) * (a - t) / (c - s);
+  }
+  _setScale(e, i) {
+    e === "min" ? this.minScale = i === 0 ? 0 : this._clampScale("min", i) : this.maxScale = i === 0 ? 0 : this._clampScale("max", i), this._syncLayerScale(), this._activeMenu = null;
+  }
+  _syncLayerScale() {
+    this.layer && "minScale" in this.layer && "maxScale" in this.layer && (this.layer.minScale = this.mode === "max-scale-only" ? 0 : this.minScale, this.layer.maxScale = this.mode === "min-scale-only" ? 0 : this.maxScale);
+  }
+  _renderScalePreviewPopover() {
+    const e = this._renderScalePreview();
+    return this.hidePreview || !e ? null : r`<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) => {
+      const i = Math.round(this._mapSliderToScale(e)), a = Math.min(l.length - 1, Math.max(0, Math.floor(e))), t = this.messages.scaleRangeLabels?.[l[a].id];
+      return t ? `${t}, ${i.toString()}` : i.toString();
+    }} title="Scale Slider" .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>`;
+  }
+  _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", r`<div class="scale-indicator-container" slot=content-end><div class="scale-indicator-icon" style=${u({
+      position: "absolute",
+      left: `${c}%`
+    })} .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) => {
+      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) => {
+      t.key === "Enter" && (this._handleCustomScaleInput(e, t.target.value), this._customScaleSelected = e, t.stopPropagation());
+    }}></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 .title=${e === "max" ? "Max Scale Menu" : "Min Scale Menu"} .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=${() => {
+      this._activeMenu === e && (this._activeMenu = null);
+    }}>${this._renderScaleMenu(e)}</calcite-popover>`;
+  }
+  _renderScaleMenu(e) {
+    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,
+      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({
+      scaleValue: this.view.scale,
+      scaleLabel: s.current,
+      isSelected: t === this.view.scale,
+      valueVisible: !0,
+      type: e
+    }) : null}${n}</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=${() => {
+      this._setScale(e.type, i), this._customScaleSelected = null;
+    }}></calcite-list-item>`;
+  }
+  _renderScalePreview() {
+    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=${f(`./assets/slider-scale-range/images/${n}.avif`) ?? M} style=${u({
+      display: "block",
+      height: `${t}px`,
+      width: `${t}px`,
+      objectPosition: m,
+      objectFit: "none"
+    })}></div>`;
+  }
+}
+p("arcgis-slider-scale-range", I);
+export {
+  I as ArcgisSliderScaleRange
+};

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

@@ -0,0 +1,8 @@
+import "@arcgis/common-components/components/arcgis-slider";
+import "@esri/calcite-components/components/calcite-icon";
+import "@esri/calcite-components/components/calcite-list-item";
+import "@esri/calcite-components/components/calcite-input-number";
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-popover";
+import "@esri/calcite-components/components/calcite-list";
+export * from "./customElement.js";

package/dist/components/arcgis-slider-scale-range/spriteSheetsUtils.d.ts

@@ -0,0 +1,5 @@
+export type SupportedRegion = LowerCaseRegion | UpperCaseRegion;
+
+export type LowerCaseRegion = "ae" | "ar" | "at" | "au" | "be" | "bg" | "bo" | "br" | "ca" | "ch" | "ci" | "cl" | "cn" | "co" | "cr" | "cz" | "de" | "dk" | "ee" | "eg" | "es" | "fi" | "fr" | "gb" | "gl" | "gr" | "gt" | "hk" | "id" | "ie" | "il" | "in" | "iq" | "is" | "it" | "jp" | "ke" | "kr" | "kw" | "li" | "lt" | "lu" | "lv" | "ma" | "mg" | "ml" | "mo" | "mx" | "my" | "ni" | "nl" | "no" | "nz" | "pe" | "pl" | "pr" | "pt" | "ro" | "ru" | "rw" | "se" | "sg" | "sk" | "sr" | "sv" | "th" | "tn" | "tw" | "us" | "ve" | "vi" | "za";
+
+export type UpperCaseRegion = Uppercase<LowerCaseRegion>;