@arcgis/map-components/dist/components/arcgis-slider-scale-range/customElement.js

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
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 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",
  "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"
]), 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 },
  { 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 = 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 };
  }
  static {
    this.styles = P;
  }
  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 = 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;
      }
      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(() => {
    }) : (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() {
    R.getDefault().load().then((i) => {
      const a = i.user?.culture ?? i.culture;
      a && (this._portalRegion = a.split("-")[1]?.toLowerCase() ?? null);
    }).catch(() => {
    }), this.manager.onLifecycle(() => [
      f(() => this.view?.scale, () => this.requestUpdate(), { initial: !0 }),
      f(() => ({
        // 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;
        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)
          !("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 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);
        }
        const c = this.layer;
        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._interactiveMinScale : this.minScale;
  }
  get _effectiveMaxScale() {
    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._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._portalRegion) {
      const a = `${this.messages._t9nLocale}-${this._portalRegion}`;
      if (h.has(a))
        return a;
    }
    const i = T[this.messages._t9nLocale];
    if (i) {
      const a = `${this.messages._t9nLocale}-${i}`;
      if (h.has(a))
        return a;
    }
    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._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._interactiveMinScale);
        this.minScale = i === this._interactiveMinScale ? 0 : i;
      } else {
        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((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) {
    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._effectiveMinScale, this.layer.maxScale = this.mode === "min-scale-only" ? 0 : this._effectiveMaxScale);
  }
  _renderScalePreviewPopover() {
    const e = this._renderScalePreview();
    return this.hidePreview || !e ? null : o`<div slot=popover>${e}</div>`;
  }
  render() {
    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._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: `${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 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) => {
      t.key === "Enter" && (this._handleCustomScaleInput(e, t.target.value), this._customScaleSelected = e, t.stopPropagation());
    }}></calcite-input-number></calcite-list-item>`;
  }
  _renderScaleMenuButtons(e) {
    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 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>`;
  }
  _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._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 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}${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 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>`;
  }
  _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), 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: n,
      objectFit: "none"
    })}></div>`;
  }
}
_("arcgis-slider-scale-range", I);
export {
  I as ArcgisSliderScaleRange
};