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

package/dist/components/arcgis-scale-bar/customElement.d.ts

@@ -14,29 +14,21 @@ declare const useScaleBarViewModel: (component: import('@arcgis/components-contr
     el: HTMLElement;
     autoDestroyDisabled?: boolean;
     destroy?: () => Promise<void>;
-} & Pick<ScaleBarViewModel, never> & {
-    reactiveUtils?: typeof __esri.reactiveUtils;
-    state?: "ready" | "disabled" | undefined;
-    icon: Nil | string;
-    label: Nil | string;
-    referenceElement: ArcgisReferenceElement | Nil | string;
-    arcgisReady: import('@arcgis/components-controllers').EventEmitter;
-    position: __esri.UIPosition;
-    arcgisPropertyChange: import('@arcgis/components-controllers').EventEmitter<{
-        name: string;
-    }> | undefined;
-    el: HTMLElement & {
-        childElem?: HTMLElement & {
-            ownedBy?: HTMLElement;
-        };
-        view?: __esri.MapView | __esri.SceneView | undefined;
-    };
-    autoDestroyDisabled: boolean;
-    destroy: () => Promise<void>;
-}, options?: {
+} & Pick<ScaleBarViewModel, never> & import('../../controllers/useViewModel').ViewModelControllerUses<ScaleBarViewModel>, options?: {
     editConstructorProperties(props: unknown): unknown;
 } | undefined) => ScaleBarViewModel;
-/** The [ScaleBar](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-ScaleBar.html) displays a scale bar on the map or in a specified HTML node.
+/**
+ * The Scale Bar componenent displays a scale bar representing the scale of the map.
+ * It respects various coordinate systems and displays units in metric or imperial values.
+ * Metric values show either kilometers, meters, centimeters, or millimeters depending on the scale, and likewise, imperial values show miles, feet, or inches depending on the scale.
+ * When working with Web Mercator or geographic coordinate systems the scale bar takes into account projection distortion and dynamically adjusts the scale bar.
+ *
+ * When the scale bar is inside the map, the actual location of the scale bar is used to calculate the scale.
+ * Otherwise, the center of the map is used to calculate the scale.
+ *
+ * **Known Limitations**
+ *
+ * - This component is not currently supported within an `arcgis-scene` component.
  */
 export declare class ArcgisScaleBar extends LitElement {
     private messages;
@@ -53,10 +45,15 @@ export declare class ArcgisScaleBar extends LitElement {
      * When `unit` is set to `dual`, the style will always be `line`.
      */
     barStyle: ScaleBarStyle;
-    /** Icon displayed in the widget's button. */
+    /**
+     * Icon which represents the component.
+     * Typically used when the component is controlled by another component (e.g. by the Expand component).
+     * Search [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/) for possible values.
+     */
     icon: Nil | string;
     /** The component's default label. */
     label: Nil | string;
+    /** Replace localized message strings with your own strings. */
     messageOverrides?: typeof this.messages._overrides;
     position: __esri.UIPosition;
     referenceElement: ArcgisReferenceElement | Nil | string;

package/dist/components/arcgis-scale-bar/customElement.js

@@ -6,14 +6,15 @@ import { getDefaultUnitForView as w } from "@arcgis/core/applications/Components
 import { watch as y } from "@arcgis/core/core/reactiveUtils.js";
 import { formatNumber as S } from "@arcgis/core/intl.js";
 import L from "@arcgis/core/widgets/ScaleBar/ScaleBarViewModel.js";
-import { LitElement as B, createEvent as M, noShadowRoot as R, safeClassMap as a, safeStyleMap as f } from "@arcgis/lumina";
-import { u as x, m as D } from "../../chunks/useViewModel.js";
+import { LitElement as B, createEvent as M, noShadowRoot as R, safeClassMap as a, safeStyleMap as _ } from "@arcgis/lumina";
+import { u as x } from "../../chunks/useView.js";
+import { m as D } from "../../chunks/useViewModel.js";
 import { g as v } from "../../chunks/globalCss.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.32/esri/copyright.txt for details.
-v4.32.0-next.98 */
-function $(_ = 0, e = 0) {
-  return { x: _, y: e };
+v4.32.0 */
+function $(f = 0, e = 0) {
+  return { x: f, y: e };
 }
 const r = "esri-scale-bar", t = {
   base: r,
@@ -87,7 +88,7 @@ class k extends B {
   _handleRootCreateOrUpdate() {
     if (!this.viewModel)
       return;
-    const e = this._scaleComputedFrom, i = this.el.getBoundingClientRect(), o = i.left + window.pageXOffset, l = i.top + window.pageYOffset, n = $(o, l);
+    const e = this._scaleComputedFrom, i = this.el.getBoundingClientRect(), s = i.left + window.pageXOffset, l = i.top + window.pageYOffset, n = $(s, l);
     (n.x !== e.x || n.y !== e.y) && (this._scaleComputedFrom = n);
   }
   _formatDistance(e, i) {
@@ -103,33 +104,33 @@ class k extends B {
     const e = this.viewModel.state === "disabled", i = {
       [v.disabled]: e
     };
-    let o, l;
+    let s, l;
     if (!e) {
-      const { unit: n, barStyle: c } = this, b = n === "imperial" || n === "dual", p = n === "metric" || n === "dual", m = 100, h = n === "dual" ? "line" : c;
-      if (b) {
-        const s = this.viewModel.getScaleBarProperties(m, "imperial");
-        s && (l = h === "ruler" ? this._renderRuler(s) : this._renderLine(s, "bottom"));
-      }
+      const { unit: n, barStyle: c } = this, p = n === "imperial" || n === "dual", b = n === "metric" || n === "dual", m = 100, h = n === "dual" ? "line" : c;
       if (p) {
-        const s = this.viewModel.getScaleBarProperties(m, "metric");
-        s && (o = h === "ruler" ? this._renderRuler(s) : this._renderLine(s, "top"));
+        const o = this.viewModel.getScaleBarProperties(m, "imperial");
+        o && (l = h === "ruler" ? this._renderRuler(o) : this._renderLine(o, "bottom"));
+      }
+      if (b) {
+        const o = this.viewModel.getScaleBarProperties(m, "metric");
+        o && (s = h === "ruler" ? this._renderRuler(o) : this._renderLine(o, "top"));
       }
     }
-    return u`<div class=${a(d(t.base, v.widget, i))} ${g(this._handleContainerRef)}>${o}${l}</div>`;
+    return u`<div class=${a(d(t.base, v.widget, i))} ${g(this._handleContainerRef)}>${s}${l}</div>`;
   }
   _renderRuler(e) {
-    const { length: i, unit: o, value: l } = e, n = Math.round(i), c = this._formatDistance(l, o);
-    return u`<div class=${a(d(t.barContainer, t.rulerBarContainer))}><div class=${a(t.ruler)} style=${f({ width: `${n}px` })}><div class=${a(t.rulerBlock)}></div><div class=${a(t.rulerBlock)}></div><div class=${a(t.rulerBlock)}></div><div class=${a(t.rulerBlock)}></div></div><div class=${a(d(t.labelContainer, t.rulerLabelContainer))}><div class=${a(t.label)}>0</div><div class=${a(t.label)}>${c}</div></div></div>`;
+    const { length: i, unit: s, value: l } = e, n = Math.round(i), c = this._formatDistance(l, s);
+    return u`<div class=${a(d(t.barContainer, t.rulerBarContainer))}><div class=${a(t.ruler)} style=${_({ width: `${n}px` })}><div class=${a(t.rulerBlock)}></div><div class=${a(t.rulerBlock)}></div><div class=${a(t.rulerBlock)}></div><div class=${a(t.rulerBlock)}></div></div><div class=${a(d(t.labelContainer, t.rulerLabelContainer))}><div class=${a(t.label)}>0</div><div class=${a(t.label)}>${c}</div></div></div>`;
   }
   _renderLine(e, i) {
-    const { length: o, unit: l, value: n } = e, c = Math.round(o), b = this._formatDistance(n, l), p = {
+    const { length: s, unit: l, value: n } = e, c = Math.round(s), p = this._formatDistance(n, l), b = {
       [t.topLabelContainer]: i === "top",
       [t.bottomLabelContainer]: i === "bottom"
-    }, m = u`<div class=${a(d(t.labelContainer, t.lineLabelContainer, p))}><div class=${a(t.label)}>${b}</div></div>`, h = {
+    }, m = u`<div class=${a(d(t.labelContainer, t.lineLabelContainer, b))}><div class=${a(t.label)}>${p}</div></div>`, h = {
       [t.topLine]: i === "top",
       [t.bottomLine]: i === "bottom"
-    }, s = u`<div class=${a(d(t.line, h))} style=${f({ width: `${c}px` })}></div>`;
-    return u`<div class=${a(d(t.barContainer, t.lineBarContainer))}>${[s, m]}</div>`;
+    }, o = u`<div class=${a(d(t.line, h))} style=${_({ width: `${c}px` })}></div>`;
+    return u`<div class=${a(d(t.barContainer, t.lineBarContainer))}>${[o, m]}</div>`;
   }
 }
 C("arcgis-scale-bar", k);

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

@@ -34,7 +34,7 @@ declare const useScaleRangeSliderWidget: (component: import('@arcgis/components-
 }, options?: {
     editConstructorProperties(props: __esri.ScaleRangeSliderProperties | undefined): __esri.ScaleRangeSliderProperties | Promise<__esri.ScaleRangeSliderProperties | undefined> | undefined;
 } | undefined) => ScaleRangeSlider;
-/** The [ScaleRangeSlider](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-ScaleRangeSlider.html) allows the user to set a minimum and maximum scale based on named scale ranges.
+/** The ScaleRangeSlider component allows the user to set a minimum and maximum scale based on named scale ranges.
  */
 export declare class ArcgisScaleRangeSlider extends LitElement {
     /**

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

@@ -6,11 +6,11 @@ import { m as o } from "../../chunks/useWidget.js";
 import { css as n } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.32/esri/copyright.txt for details.
-v4.32.0-next.98 */
-const c = n`arcgis-scale-range-slider{display:block}`, r = o(t);
+v4.32.0 */
+const r = n`@layer{arcgis-scale-range-slider{display:block}}`, c = o(t);
 class h extends s {
   constructor() {
-    super(...arguments), this.widget = r(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.disabled = this.widget.disabled, this.hidePreview = this.widget.visibleElements.preview, this.hideScaleMenusMaxScaleMenu = this.widget.visibleElements.scaleMenus.maxScaleMenu, this.hideScaleMenusMinScaleMenu = this.widget.visibleElements.scaleMenus.minScaleMenu, this.icon = this.widget.icon, this.label = this.widget.label, this.layer = this.widget.layer, this.maxScale = this.widget.maxScale, this.maxScaleLimit = this.widget.maxScaleLimit, this.minScale = this.widget.minScale, this.minScaleLimit = this.widget.minScaleLimit, this.mode = this.widget.mode, this.position = "bottom-left", this.region = this.widget.region, this.state = this.viewModel.state, this.arcgisPropertyChange = i()("state", "minScale", "maxScale"), this.arcgisReady = a();
+    super(...arguments), this.widget = c(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.disabled = this.widget.disabled, this.hidePreview = this.widget.visibleElements.preview, this.hideScaleMenusMaxScaleMenu = this.widget.visibleElements.scaleMenus.maxScaleMenu, this.hideScaleMenusMinScaleMenu = this.widget.visibleElements.scaleMenus.minScaleMenu, this.icon = this.widget.icon, this.label = this.widget.label, this.layer = this.widget.layer, this.maxScale = this.widget.maxScale, this.maxScaleLimit = this.widget.maxScaleLimit, this.minScale = this.widget.minScale, this.minScaleLimit = this.widget.minScaleLimit, this.mode = this.widget.mode, this.position = "bottom-left", this.region = this.widget.region, this.state = this.viewModel.state, this.arcgisPropertyChange = i()("state", "minScale", "maxScale"), this.arcgisReady = a();
   }
   static {
     this.properties = { autoDestroyDisabled: 5, disabled: 7, hidePreview: 5, hideScaleMenusMaxScaleMenu: 5, hideScaleMenusMinScaleMenu: 5, icon: 1, label: 1, layer: 0, maxScale: 9, maxScaleLimit: 9, minScale: 9, minScaleLimit: 9, mode: 1, position: 1, referenceElement: 1, region: 0, state: 3 };
@@ -19,7 +19,7 @@ class h extends s {
     this.shadowRootOptions = l;
   }
   static {
-    this.styles = c;
+    this.styles = r;
   }
   // #endregion
   // #region Public Methods