npm - @arcgis/map-components - Versions diffs - 4.34.0-next.12 → 4.34.0-next.120 - Mend

@arcgis/map-components 4.34.0-next.12 → 4.34.0-next.120

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1531) hide show

package/dist/components/arcgis-direct-line-measurement-3d/customElement.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
-/// <reference types="../../index.d.ts" />
-import { default as DirectLineMeasurementAnalysis } from '@arcgis/core/analysis/DirectLineMeasurementAnalysis';
+/// <reference path="../../index.d.ts" />
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
 import { Use } from '@arcgis/lumina/controllers';
 import { ArcgisReferenceElement } from '../../utils/component-utils';
@@ -8,14 +7,96 @@ import { default as DirectLineMeasurement3DViewModel } from './DirectLineMeasure
 declare const useViewModel: (component: LitElement & Pick<DirectLineMeasurement3DViewModel, never> & import('../../controllers/useViewModel').ViewModelControllerUses<DirectLineMeasurement3DViewModel>) => DirectLineMeasurement3DViewModel;
 /**
- * The Direct Line Measurement 3D component calculates and displays the 3D distance between two points. This component
- * can be used in a [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html)
- * to measure the vertical, horizontal, and direct distance between two points.
+ * The Direct Line Measurement 3D component can be added to a [Scene](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/)
+ * component to calculate and display vertical, horizontal, and direct distances between two points.
+ *
+ * [![measurement-line-3d](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/3D_DirectLineMeasurement_widget.png)](https://developers.arcgis.com/javascript/latest/sample-code/measurement-3d/)
+ *
+ * How distances are computed depends on the scene's spatial reference.
+ *
+ * In **geographic coordinate systems** (GCS) and in **Web Mercator**:
+ * - Direct distance is computed in a Euclidean manner, in an [ECEF](https://en.wikipedia.org/wiki/ECEF) coordinate system (or equivalent on other planets);
+ * - Horizontal distance is computed geodetically, taking into consideration the curvature of the planet;
+ * - Vertical distance is computed as an elevation difference.
+ *
+ * In **projected coordinate systems** (PCS), apart from Web Mercator, all three distances (direct, horizontal, and vertical)
+ *  are computed in a Euclidean manner (in their respective PCS).
+ *
+ * Direct Line Measurement 3D component visualizes and labels the direct, horizontal, and vertical distances and displays the same values
+ * in the UI panel. When the distance between the points is greater than 100 kilometers,
+ * the measurement visualization is simplified, and only the horizontal and vertical distances are calculated.
+ * The direct distance option becomes unavailable.
+ *
+ * ![measurement-line-3d](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/direct-line-measurement-3d.png)
+ *
+ * When the component is active, a horizontal "laser" line is drawn which indicates the height at the current mouse position.
+ * This line can help in analyzing the heights of objects relative to each other and the terrain.
+ * A second laser line shows the intersection of the scene with the vertical plane that passes through the checkered line.
+ *
+ * **Things to consider**
+ *
+ * * Direct Line Measurement 3D is designed to work in the Scene component. For measurements in the [Map](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/)
+ * component, use [Distance Measurement 2D](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-distance-measurement-2d/).
+ * * Snapping is enabled by default. This can be temporarily disabled by holding the `CTRL` key.
+ * * Layer types currently supported for snapping are:
+ * [FeatureLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html),
+ * [GraphicsLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GraphicsLayer.html) (except Mesh geometries),
+ * [GeoJSONLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GeoJSONLayer.html),
+ * [WFSLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-WFSLayer.html),
+ * [CSVLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-CSVLayer.html),
+ * [3D Object SceneLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-SceneLayer.html),
+ * and [BuildingSceneLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-BuildingSceneLayer.html).
+ *
+ * **See also**
+ *
+ * - [DirectLineMeasurementAnalysis](https://developers.arcgis.com/javascript/latest/api-reference/esri-analysis-DirectLineMeasurementAnalysis.html)
+ * - [Sample - Measurement in 3D](https://developers.arcgis.com/javascript/latest/sample-code/measurement-3d/)
+ * - [Sample - Analysis objects](https://developers.arcgis.com/javascript/latest/sample-code/analysis-objects/)
+ * - [Sample - Color theming for interactive tools](https://developers.arcgis.com/javascript/latest/sample-code/view-theme/)
  *
  * [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-direct-line-measurement-3d/)
  */
 export declare class ArcgisDirectLineMeasurement3d extends LitElement {
-    get analysis(): DirectLineMeasurementAnalysis;
+    /**
+     * The [DirectLineMeasurementAnalysis](https://developers.arcgis.com/javascript/latest/api-reference/esri-analysis-DirectLineMeasurementAnalysis.html)
+     * created or modified by the component.
+     *
+     * When connecting the Direct Line Measurement 3D component to the [Scene](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/)
+     * component, it automatically creates an empty analysis and adds it to the Scene's
+     * [analyses](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/#analyses) collection.
+     * Whenever the component is destroyed, the analysis is automatically removed from the collection.
+     *
+     * Alternatively, a programmatically created analysis can be provided to the component.
+     * Then, the application itself needs to add it to and later remove it from the Scene's analyses collection.
+     *
+     * ```js
+     * // Create the analysis.
+     * const directLineAnalysis = new DirectLineMeasurementAnalysis({
+     *    startPoint: new Point({
+     *      spatialReference: { latestWkid: 3857, wkid: 102100 },
+     *      x: -13624995.61798748,
+     *      y: 4550334.030096778,
+     *      z: 63.378210234455764
+     *    }),
+     *    endPoint: new Point({
+     *      spatialReference: { latestWkid: 3857, wkid: 102100 },
+     *      x: -13624921.53589075,
+     *      y: 4550407.42357004,
+     *      z: 63.3783810287714
+     *    }),
+     * });
+     * // Get the Scene and measurement component and wait until they are ready.
+     * const viewElement = document.querySelector("arcgis-scene");
+     * await viewElement.viewOnReady();
+     * const directLineMeasurement3d = document.querySelector("arcgis-direct-line-measurement-3d");
+     * await directLineMeasurement3d.componentOnReady();
+     * // Add the analysis to the Scene component.
+     * viewElement.analyses.add(directLineAnalysis);
+     * // Connect the analysis to the measurement component:
+     * directLineMeasurement3d.analysis = directLineAnalysis;
+     * ```
+     */
+    analysis: __esri.DirectLineMeasurementAnalysis;
     /**
      * 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
@@ -36,27 +117,49 @@ export declare class ArcgisDirectLineMeasurement3d extends LitElement {
     icon?: HTMLCalciteIconElement["icon"];
     /** The component's default label. */
     label?: string;
-    /** @default "bottom-left" */
-    position: __esri.UIPosition;
+    /** @deprecated since 4.34, use [`slot`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/slot) instead. */
+    position?: __esri.UIPosition;
+    /**
+     * 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)
+     */
     referenceElement?: ArcgisReferenceElement | string;
-    state: "ready" | "disabled" | "measuring" | "measured";
-    /** Unit system (imperial, metric) or specific unit used for displaying the distance values. */
+    /**
+     * The component's state. The values mean the following:
+     *
+     * * `disabled` -  not ready yet
+     * * `ready` - ready for measuring
+     * * `measuring` - currently measuring
+     * * `measured` - measuring has finished
+     */
+    readonly state: "ready" | "disabled" | "measured" | "measuring";
+    /**
+     * Unit system (imperial, metric) or specific unit used for displaying the distance values. Possible values are listed in
+     * [unitOptions](#unitOptions).
+     */
     unit: __esri.SystemOrLengthUnit;
-    /** List of unit systems (imperial, metric) and specific units for displaying the distance values. */
+    /**
+     * List of available units and unit systems (imperial, metric) that are shown in the component's dropdown.
+     * By default, the following units are included: `metric`, `imperial`, `inches`, `feet`, `us-feet`, `yards`, `miles`, `nautical-miles`, `meters`, `kilometers`.
+     * Possible [unit](#unit) values can only be a subset of this list.
+     */
     unitOptions: __esri.SystemOrLengthUnit[];
+    /** Clears the current measurement. */
     clear(): Promise<void>;
     /** Permanently destroy the component. */
     destroy(): Promise<void>;
+    /** Starts a new measurement. */
     start(): Promise<void>;
     /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
     readonly arcgisPropertyChange: TargetedEvent<this, {
         name: "state" | "analysis";
     }>;
-    /** Emitted when the component associated with a map or scene view is is ready to be interacted with. */
+    /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
     readonly arcgisReady: TargetedEvent<this, void>;
 }
 /**
- * The Direct Line Measurement 3D component calculates and displays the 3D distance between two points. This component can be used in a [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html) to measure the vertical, horizontal, and direct distance between two points.
+ * The Directline Measurement 3D component calculates and displays the 3D distance between two points. It can be used in a [Scene](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/) component to measure the vertical, horizontal, and direct distance between two points.
  *
  * [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-directline-measurement-3d/)
  *

package/dist/components/arcgis-direct-line-measurement-3d/customElement.js CHANGED Viewed

@@ -1,35 +1,34 @@
 import { c as p } from "../../chunks/runtime.js";
-import { html as g } from "lit-html";
-import { LitElement as v, createEvent as f, noShadowRoot as w, nothing as D, safeClassMap as b } from "@arcgis/lumina";
-import { usePropertyChange as M } from "@arcgis/lumina/controllers";
-import { u as O } from "../../chunks/useT9n.js";
-import { m as U } from "../../chunks/useViewModel.js";
-import { g as d } from "../../chunks/globalCss.js";
-import { css as $ } from "@lit/reactive-element/css-tag.js";
-import L from "@arcgis/core/analysis/DirectLineMeasurementAnalysis.js";
-import { isAboveGeodesicDistanceThreshold as _ } from "@arcgis/core/applications/Components/analysisUtils.js";
-import { getDefaultUnitForView as V } from "@arcgis/core/applications/Components/getDefaultUnits.js";
-import { property as o, subclass as P } from "@arcgis/core/core/accessorSupport/decorators.js";
-import { watch as A } from "@arcgis/core/core/reactiveUtils.js";
-import { A as C } from "../../chunks/AnalysisViewModel.js";
-import { g as c, m } from "../../chunks/measurementUtils.js";
+import { css as _, html as w } from "lit";
+import { LitElement as f, createEvent as v, nothing as b, safeClassMap as x } from "@arcgis/lumina";
+import { usePropertyChange as y } from "@arcgis/lumina/controllers";
+import { u as D } from "../../chunks/useT9n.js";
+import { m as z } from "../../chunks/useViewModel.js";
+import { g } from "../../chunks/globalCss.js";
+import k from "@arcgis/core/analysis/DirectLineMeasurementAnalysis.js";
+import { isAboveGeodesicDistanceThreshold as M } from "@arcgis/core/applications/Components/analysisUtils.js";
+import { getDefaultUnitForView as O } from "@arcgis/core/applications/Components/getDefaultUnits.js";
+import { property as a, subclass as U } from "@arcgis/core/core/accessorSupport/decorators.js";
+import { watch as $ } from "@arcgis/core/core/reactiveUtils.js";
+import { A as L } from "../../chunks/AnalysisViewModel.js";
+import { g as c, m as u } from "../../chunks/measurementUtils.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.12 */
-const z = $`@layer{arcgis-directline-measurement-3d,arcgis-direct-line-measurement-3d{display:block}.arcgis-direct-line-measurement-3d{position:relative;padding:var(--esri-widget-padding);overflow-y:auto}}`;
-var S = Object.defineProperty, E = Object.getOwnPropertyDescriptor, r = (e, t, s, a) => {
-  for (var n = a > 1 ? void 0 : a ? E(t, s) : t, l = e.length - 1, u; l >= 0; l--)
-    (u = e[l]) && (n = (a ? u(t, s, n) : u(n)) || n);
-  return a && n && S(t, s, n), n;
+v4.34.0-next.120 */
+const V = _`.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}.esri-widget{--esri-widget-padding-x: 15px;--esri-widget-padding-y: var(--calcite-spacing-md);--esri-widget-padding: var(--esri-widget-padding-y) var(--esri-widget-padding-x);box-sizing:border-box;color:var(--calcite-color-text-2);background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);line-height:1.3em}.esri-widget *,.esri-widget :before,.esri-widget :after{box-sizing:inherit}.esri-widget.esri-widget--disabled>*{opacity:.4;pointer-events:none}.esri-widget.esri-widget--compact{--esri-widget-padding-y: 0;--esri-widget-padding-x: 0}.esri-widget__anchor{color:var(--calcite-color-text-2)}.esri-widget__anchor:hover{color:var(--calcite-color-text-3)}.esri-widget__anchor:hover,.esri-widget__anchor:focus{text-decoration:underline}.esri-widget__anchor--disabled{opacity:.4;pointer-events:none}.esri-widget__header{background-color:var(--calcite-color-foreground-1);flex:1 0 100%;justify-content:space-between;align-items:center;width:100%;min-height:48px;padding:12px 0 12px 15px;display:flex}.esri-widget__header .esri-widget__heading{width:calc(100% - 48px);text-align:initial;color:var(--calcite-color-text-1);align-items:center;margin:0;padding:0;display:flex}.esri-widget__header-button{appearance:none;cursor:pointer;color:var(--calcite-color-text-2);background-color:var(--calcite-color-foreground-1);border:none;flex:0 0 48px;justify-content:center;align-self:stretch;align-items:center;width:48px;padding:0;display:flex}.esri-widget__footer{background-color:var(--calcite-color-foreground-1);justify-content:center;align-items:center;width:100%;min-height:48px;display:flex}.esri-widget__footer-pagination{color:var(--calcite-color-text-2);justify-content:space-between;align-items:center;display:flex}.esri-widget__footer-pagination-previous-button,.esri-widget__footer-pagination-next-button{cursor:pointer;background-color:var(--calcite-color-foreground-1);border:0;margin:0 7px;padding:12px 15px;transition:background-color .125s ease-in-out}.esri-widget__footer-pagination-previous-button:hover,.esri-widget__footer-pagination-previous-button:focus,.esri-widget__footer-pagination-next-button:hover,.esri-widget__footer-pagination-next-button:focus{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1)}.esri-menu{visibility:hidden;z-index:1;background-clip:padding;background-color:var(--calcite-color-foreground-1);background-clip:padding-box;width:100%;max-height:0;margin:2px 0 0;padding:0;font-size:var(--calcite-font-size);line-height:var(--calcite-spacing-xl);position:absolute;top:100%;left:0;overflow:hidden;box-shadow:0 1px 2px #0000004d}.esri-menu .esri-menu__header{color:var(--calcite-color-text-inverse);background-color:var(--calcite-color-inverse);padding:6px 12px}.esri-menu__list{margin:0;padding:0;list-style:none}.esri-menu__list-item{cursor:pointer;border-top:1px solid #adadad4d;border-left:3px solid #0000;padding:.8em 1em}.esri-menu__list-item [class^=esri-icon-],.esri-menu__list-item [class*=" esri-icon-"]{padding-right:2.8px}.esri-menu__list-item:first-child{border-top:none}.esri-menu__list-item--focus,.esri-menu__list-item:hover,.esri-menu__list-item:focus{background-color:#303030}.esri-menu__list-item:active{background-color:#000}.esri-menu__list-item--active,.esri-menu__list-item--active:hover,.esri-menu__list-item--active:focus{background-color:var(--calcite-color-foreground-1);border-left-color:#2493f2}.esri-widget__table{border-collapse:collapse;color:var(--calcite-color-text-1);border:none;width:100%;line-height:1.3em}.esri-widget__table tr:nth-child(odd){background-color:var(--calcite-color-transparent)}.esri-widget__table tr:nth-child(2n){background-color:var(--calcite-color-transparent-press)}.esri-widget__table tr a{color:var(--calcite-color-text-2)}.esri-widget__table tr a:hover,.esri-widget__table tr a:focus{color:var(--calcite-color-text-1)}.esri-widget__table tr td,.esri-widget__table tr th{vertical-align:top;word-break:break-word;padding:.5em .7em;font-size:var(--calcite-font-size-sm);font-weight:var(--calcite-font-weight-regular)}.esri-widget__table tr th{text-align:left;border-right:3px solid #0000000d;width:50%}.esri-widget__table tr td{width:50%}.esri-input{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1);border:1px solid #959595;font-size:var(--calcite-font-size)}.esri-input::-ms-clear{display:none}.esri-input::placeholder{opacity:1;color:var(--calcite-color-text-2)}.esri-input:placeholder-shown{text-overflow:ellipsis}.esri-input[type=text],.esri-input[type=password],.esri-input[type=number]{height:32px;padding:0 .5em}calcite-combobox.esri-input{border:none}.esri-widget__content--empty{text-align:center;color:var(--calcite-color-border-input);flex-flow:column wrap;align-items:center;padding:18px 22px;display:flex}.esri-widget__content--empty h1.esri-widget__heading,.esri-widget__content--empty h2.esri-widget__heading,.esri-widget__content--empty h3.esri-widget__heading,.esri-widget__content--empty h4.esri-widget__heading,.esri-widget__content--empty h5.esri-widget__heading{font-weight:var(--calcite-font-weight-regular)}.esri-widget__content-illustration--empty{width:128px;padding:1rem 0}.esri-widget__content-icon--empty{width:32px;padding:.5rem 0}.esri-select{appearance:none;cursor:pointer;color:var(--calcite-color-text-2);background:var(--calcite-color-foreground-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 32 32' width='32' height='32'%3E%3Cpath d='M8 11.207l-4-4V5.793l4 4 4-4v1.414z' fill='%23adadad' fillrule='nonzero'/%3E%3C/svg%3E") 100% no-repeat;border:1px solid #959595;border-radius:0;width:100%;height:32px;margin:0;padding:0 .5em;font-family:inherit;font-size:.85em;display:block}.esri-select[disabled]{cursor:auto}.esri-select::-ms-expand{display:none}.esri-disabled a,.esri-disabled [role=menu],.esri-disabled [role=checkbox],.esri-disabled [class^=esri-icon-],.esri-disabled [class*=" esri-icon-"]{color:var(--calcite-color-text-3)}.keynav-mode .esri-widget:focus,.keynav-mode .esri-widget :focus{z-index:1;outline-offset:2px;outline:2px solid #adadad}.esri-widget__loader-animation{border:.15em solid #adadad4d;border-top-color:var(--calcite-color-border-input);border-radius:100%;width:1em;height:1em;font-size:var(--calcite-font-size-md);animation:1.25s linear infinite esri-rotate;display:block;transform:translateZ(0)}:dir(rtl) .esri-widget__table th{text-align:right;border-left:3px solid #0000000d;border-right:none}:dir(rtl) .esri-select{background-position:0}:dir(rtl) .esri-menu__list-item{border-left:none;border-right:3px solid #0000}:dir(rtl) .esri-menu__list-item [class^=esri-icon-],:dir(rtl) .esri-menu__list-item [class*=" esri-icon-"]{padding-left:2px;padding-right:0}:dir(rtl) .esri-menu__list-item--active{border-right-color:var(--calcite-color-brand)}.esri-icon-font-fallback-text{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.esri-rotating{animation:1.25s linear infinite esri-rotate;transform:translateZ(0)}.esri-clearfix:before,.esri-clearfix:after{content:" ";display:table}.esri-clearfix:after{clear:both}.esri-interactive{cursor:pointer}.esri-hidden{display:none!important}.esri-invisible{visibility:hidden!important}.esri-offscreen{position:absolute;top:-999em;left:-999em}.esri-match-height{flex-direction:column;flex:auto;display:flex;overflow:hidden}.esri-widget--panel{min-width:300px;min-height:32px;padding:var(--esri-widget-padding);transition:max-height .25s ease-in-out;overflow-y:auto}.esri-unit-select{width:100%}.esri-unit-select__label{--calcite-label-margin-bottom: 0;width:100%}:host{display:block}.esri-measurement-widget-content{padding:var(--esri-widget-padding);flex-direction:column;gap:var(--calcite-spacing-xxl);display:flex;position:relative;overflow-y:auto}.esri-measurement-widget-content__error{color:var(--calcite-color-status-danger)}.esri-measurement-widget-content__error,.esri-measurement-widget-content__hint{overflow:hidden}.esri-measurement-widget-content__error p,.esri-measurement-widget-content__hint p{margin:0;padding:0}.esri-measurement-widget-content__hint,.esri-measurement-widget-content__error,.esri-measurement-widget-content__measurement,.esri-measurement-widget-content__measurement-item{flex-direction:column;gap:var(--calcite-spacing-md);animation:.25s ease-in-out esri-fade-in;display:flex}.esri-measurement-widget-content__measurement-item--disabled{color:var(--calcite-color-border-ghost)}.esri-measurement-widget-content__measurement-item__value{font-weight:var(--calcite-font-weight-semibold)}.esri-measurement-widget-content__actions{flex-direction:column;justify-content:center;gap:var(--calcite-spacing-xs);display:flex}`;
+var C = Object.defineProperty, P = Object.getOwnPropertyDescriptor, n = (e, t, i, o) => {
+  for (var s = o > 1 ? void 0 : o ? P(t, i) : t, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (s = (o ? d(t, i, s) : d(s)) || s);
+  return o && s && C(t, i, s), s;
 };
-let i = class extends C {
+let r = class extends L {
   constructor() {
     super(...arguments), this.supportedViewType = "3d", this.unsupportedErrorMessage = "The Direct Line Measurement 3D component is only supported in 3D views.";
   }
   initialize() {
     this.addHandles(
       // Make sure the analysis and view model units are in sync.
-      A(
+      $(
         () => ({
           analysis: this.analysis,
           unit: this.unit
@@ -66,17 +65,17 @@ let i = class extends C {
         horizontalDistance: c(void 0),
         verticalDistance: c(void 0)
       };
-    const s = e?.directDistance, a = s != null && _(s);
+    const i = e?.directDistance, o = i != null && M(i);
     return {
       mode: t ?? "euclidean",
-      directDistance: c(a ? void 0 : s),
+      directDistance: c(o ? void 0 : i),
       horizontalDistance: c(e?.horizontalDistance),
       verticalDistance: c(e?.verticalDistance)
     };
   }
   get unitOptions() {
-    const e = this._userUnitOptions?.filter((t) => m.includes(t));
-    return e && e.length > 0 ? e : m.slice();
+    const e = this._userUnitOptions?.filter((t) => u.includes(t));
+    return e && e.length > 0 ? e : u.slice();
   }
   set unitOptions(e) {
     this._userUnitOptions = e;
@@ -85,14 +84,14 @@ let i = class extends C {
     const e = this._userUnit, t = this.unitOptions;
     if (e && t.includes(e))
       return e;
-    const s = this.defaultUnit;
-    return s && t.includes(s) ? s : t[0];
+    const i = this.defaultUnit;
+    return i && t.includes(i) ? i : t[0];
   }
   set unit(e) {
     this._userUnit = e;
   }
   get defaultUnit() {
-    return this.view ? V(this.view) : void 0;
+    return this.view ? O(this.view) : void 0;
   }
   async place(e) {
     await this.analysisView?.place(e);
@@ -101,52 +100,46 @@ let i = class extends C {
     this.analysis.startPoint = null, this.analysis.endPoint = null;
   }
   constructAnalysis() {
-    return new L();
+    return new k();
   }
 };
-r([
-  o({ readOnly: !0 })
-], i.prototype, "state", 1);
-r([
-  o({ readOnly: !0 })
-], i.prototype, "displayState", 1);
-r([
-  o({ readOnly: !0 })
-], i.prototype, "measurement", 1);
-r([
-  o()
-], i.prototype, "unitOptions", 1);
-r([
-  o()
-], i.prototype, "_userUnitOptions", 2);
-r([
-  o()
-], i.prototype, "unit", 1);
-r([
-  o()
-], i.prototype, "_userUnit", 2);
-r([
-  o({ readOnly: !0 })
-], i.prototype, "defaultUnit", 1);
-i = r([
-  P("components.direct-line-measurement-3d.DirectLineMeasurement3dViewModel")
-], i);
-const x = "arcgis-direct-line-measurement-3d", T = { base: x }, R = U(i);
-class h extends v {
+n([
+  a({ readOnly: !0 })
+], r.prototype, "state", 1);
+n([
+  a({ readOnly: !0 })
+], r.prototype, "displayState", 1);
+n([
+  a({ readOnly: !0 })
+], r.prototype, "measurement", 1);
+n([
+  a()
+], r.prototype, "unitOptions", 1);
+n([
+  a()
+], r.prototype, "_userUnitOptions", 2);
+n([
+  a()
+], r.prototype, "unit", 1);
+n([
+  a()
+], r.prototype, "_userUnit", 2);
+n([
+  a({ readOnly: !0 })
+], r.prototype, "defaultUnit", 1);
+r = n([
+  U("components.direct-line-measurement-3d.DirectLineMeasurement3dViewModel")
+], r);
+const A = "arcgis-direct-line-measurement-3d", E = { base: A }, j = z(r);
+class m extends f {
   constructor() {
-    super(...arguments), this.viewModel = R(this), this.messages = O({ name: "directline-measurement-3d", blocking: !0 }), this.autoDestroyDisabled = !1, this.icon = "measure-line", this.position = "bottom-left", this.state = this.viewModel.state, this.unit = this.viewModel.unit, this.unitOptions = this.viewModel.unitOptions, this.arcgisPropertyChange = M()("analysis", "state"), this.arcgisReady = f();
+    super(...arguments), this.viewModel = j(this), this.messages = D({ name: "directline-measurement-3d", blocking: !0 }), this.analysis = this.viewModel.analysis, this.autoDestroyDisabled = !1, this.icon = "measure-line", this.state = this.viewModel.state, this.unit = this.viewModel.unit, this.unitOptions = this.viewModel.unitOptions, this.arcgisPropertyChange = y()("analysis", "state"), this.arcgisReady = v();
   }
   static {
-    this.properties = { analysis: 32, autoDestroyDisabled: 5, icon: 3, label: 1, position: 1, referenceElement: 1, state: 1, unit: 1, unitOptions: 0 };
+    this.properties = { analysis: 0, autoDestroyDisabled: 5, icon: 3, label: 1, position: 1, referenceElement: 1, state: 35, unit: 1, unitOptions: 0 };
   }
   static {
-    this.shadowRootOptions = w;
-  }
-  static {
-    this.styles = z;
-  }
-  get analysis() {
-    return this.viewModel.analysis;
+    this.styles = V;
   }
   async clear() {
     this.viewModel.clear();
@@ -158,12 +151,12 @@ class h extends v {
     await this.viewModel.start();
   }
   render() {
-    const { messages: t, unit: s, unitOptions: a, viewModel: n } = this, { measurement: l, state: u } = n;
-    return g`<div aria-label=${t.componentLabel ?? D} class=${b({
-      [T.base]: !0,
-      [d.widget]: !0,
-      [d.panel]: !0
-    })} role=presentation><arcgis-measurement-content .state=${n.displayState} .hintLabel=${t.hint} .unsupportedLabel=${t.unsupported} .items=${[
+    const { messages: t, unit: i, unitOptions: o, viewModel: s } = this, { measurement: l, state: d } = s;
+    return w`<div aria-label=${t.componentLabel ?? b} class=${x({
+      [E.base]: !0,
+      [g.widget]: !0,
+      [g.panel]: !0
+    })} role=presentation><arcgis-measurement-content .state=${s.displayState} .hintLabel=${t.hint} .unsupportedLabel=${t.unsupported} .items=${[
       {
         title: t.direct,
         measurement: l.directDistance
@@ -176,21 +169,21 @@ class h extends v {
         title: t.vertical,
         measurement: l.verticalDistance
       }
-    ]}><arcgis-unit-select slot=settings .options=${a} .selectLabel=${t.unit} .value=${s} @arcgisUnitSelectChange=${(y) => {
-      this.unit = y.detail;
-    }}></arcgis-unit-select><calcite-button slot=actions .disabled=${u === "disabled"} @click=${() => {
-      this.viewModel.clear(), this.viewModel.start();
+    ]}><arcgis-unit-select slot=settings .options=${o} .selectLabel=${t.unit} .value=${i} @arcgisUnitSelectChange=${(h) => {
+      this.unit = h.detail;
+    }}></arcgis-unit-select><calcite-button slot=actions .disabled=${d === "disabled"} @click=${() => {
+      this.viewModel.start({ clear: !0 });
     }}>${t.newMeasurement}</calcite-button></arcgis-measurement-content></div>`;
   }
 }
-class j extends h {
+class S extends m {
   constructor() {
     super(), console.warn('arcgis-directline-measurement-3d - this component is deprecated. Use the "arcgis-direct-line-measurement-3d" component instead.');
   }
 }
-p("arcgis-direct-line-measurement-3d", h);
-p("arcgis-directline-measurement-3d", j);
+p("arcgis-direct-line-measurement-3d", m);
+p("arcgis-directline-measurement-3d", S);
 export {
-  h as ArcgisDirectLineMeasurement3d,
-  j as DeprecatedArcgisDirectLineMeasurement3d
+  m as ArcgisDirectLineMeasurement3d,
+  S as DeprecatedArcgisDirectLineMeasurement3d
 };

package/dist/components/arcgis-directional-pad/customElement.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
-/// <reference types="../../index.d.ts" />
+/// <reference path="../../index.d.ts" />
 import { Use } from '@arcgis/lumina/controllers';
 import { default as DirectionalPadViewModel } from '@arcgis/core/widgets/DirectionalPad/DirectionalPadViewModel.js';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
@@ -54,10 +54,19 @@ export declare class ArcgisDirectionalPad extends LitElement {
     icon?: string;
     /** The component's default label. */
     label?: string;
-    /** Replace localized message strings with your own strings. **Warning**: individual message keys may change between releases. */
+    /**
+     * Replace localized message strings with your own strings.
+     *
+     * _**Note**: Individual message keys may change between releases._
+     */
     messageOverrides?: typeof this.messages._overrides;
-    /** @default "bottom-left" */
-    position: __esri.UIPosition;
+    /** @deprecated since 4.34, use [`slot`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/slot) instead. */
+    position?: __esri.UIPosition;
+    /**
+     * 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)
+     */
     referenceElement?: ArcgisReferenceElement | string;
     /**
      * Whether to display the button to reset the rotation angle. This only takes
@@ -93,7 +102,7 @@ export declare class ArcgisDirectionalPad extends LitElement {
     readonly arcgisPropertyChange: TargetedEvent<this, {
         name: "state";
     }>;
-    /** Emitted when the component associated with a map or scene view is is ready to be interacted with. */
+    /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
     readonly arcgisReady: TargetedEvent<this, void>;
     private messages: Partial<{
         componentLabel: string;

package/dist/components/arcgis-directional-pad/customElement.js CHANGED Viewed

@@ -1,21 +1,20 @@
 import { c as p } from "../../chunks/runtime.js";
-import { html as o } from "lit-html";
-import { ref as m } from "lit-html/directives/ref.js";
-import { keyed as d } from "lit-html/directives/keyed.js";
-import { usePropertyChange as b } from "@arcgis/lumina/controllers";
-import { focusElement as g } from "@arcgis/components-utils";
-import { watch as _ } from "@arcgis/core/core/reactiveUtils.js";
+import { css as m, html as o } from "lit";
+import { ref as b } from "lit/directives/ref.js";
+import { keyed as d } from "lit/directives/keyed.js";
+import { usePropertyChange as g } from "@arcgis/lumina/controllers";
+import { focusElement as _ } from "@arcgis/toolkit/dom";
+import { watch as v } from "@arcgis/core/core/reactiveUtils.js";
 import f from "@arcgis/core/widgets/DirectionalPad/DirectionalPadViewModel.js";
-import { LitElement as v, createEvent as $, noShadowRoot as w, safeClassMap as n, nothing as l, safeStyleMap as R } from "@arcgis/lumina";
-import { u as C } from "../../chunks/useT9n.js";
+import { LitElement as $, createEvent as w, safeClassMap as n, nothing as l, safeStyleMap as C } from "@arcgis/lumina";
+import { u as R } from "../../chunks/useT9n.js";
 import { m as x } from "../../chunks/useViewModel.js";
 import { g as y } from "../../chunks/component-utils.js";
 import { g as h } from "../../chunks/globalCss.js";
-import { css as M } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.12 */
-const u = [-45, 0, 45, -90, 90, -135, 180, 135], S = {
+v4.34.0-next.120 */
+const u = [-45, 0, 45, -90, 90, -135, 180, 135], M = {
   0: { label: "north", iconName: "chevron-up" },
   45: { label: "northEast", iconName: "chevron-up-right" },
   90: { label: "east", iconName: "chevron-right" },
@@ -33,27 +32,24 @@ const u = [-45, 0, 45, -90, 90, -135, 180, 135], S = {
   rotationSliderContainer: `${a}__rotation-slider-container`,
   rotationReset: `${a}__rotation-reset-button`,
   error: `${a}__error`
-}, B = M`@layer{.arcgis-directional-pad{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm);outline:none;box-shadow:none!important;background-color:transparent!important;user-select:none;calcite-action-pad{display:contents}calcite-action-group{touch-action:none}calcite-action{aspect-ratio:1}}.arcgis-directional-pad__buttons-container{--calcite-color-background: transparent;--calcite-action-group-gap: 0;--calcite-action-group-padding: 0;calcite-action{--calcite-color-focus: var(--calcite-color-foreground-3)}calcite-action:not([active]){--calcite-action-background-color-press: var(--calcite-color-foreground-1)}calcite-action[active]{--calcite-action-background-color: var(--calcite-color-foreground-3)}calcite-icon{transform:var(--rotation, unset)}@media (hover: none){calcite-action{--calcite-action-background-color-hover: var(--calcite-color-foreground-1);--calcite-action-text-color-press: var(--calcite-color-text-3)}}}.arcgis-directional-pad__rotation-container{display:block;width:100%;calcite-action{flex:.3}}.arcgis-directional-pad__rotation-slider-container{display:flex;flex:1;align-items:center;calcite-slider{flex:1;padding-inline:var(--calcite-spacing-xxs)}}}`;
-function E(c) {
+}, S = m`:host{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm);outline:none;box-shadow:none!important;background-color:transparent!important;user-select:none;calcite-action-pad{display:contents}calcite-action-group{touch-action:none}calcite-action{aspect-ratio:1}}.arcgis-directional-pad__buttons-container{--calcite-color-background: transparent;--calcite-action-group-gap: 0;--calcite-action-group-padding: 0;calcite-action{--calcite-color-focus: var(--calcite-color-foreground-3)}calcite-action:not([active]){--calcite-action-background-color-press: var(--calcite-color-foreground-1)}calcite-action[active]{--calcite-action-background-color: var(--calcite-color-foreground-3)}calcite-icon{transform:var(--rotation, unset)}@media (hover: none){calcite-action{--calcite-action-background-color-hover: var(--calcite-color-foreground-1);--calcite-action-text-color-press: var(--calcite-color-text-3)}}}.arcgis-directional-pad__rotation-container{display:block;width:100%;calcite-action{flex:.3}}.arcgis-directional-pad__rotation-slider-container{display:flex;flex:1;align-items:center;calcite-slider{display:none;flex:1;padding-inline:var(--calcite-spacing-xxs)}}`;
+function B(c) {
   const { x: t, y: e, width: i, height: r } = c.getBoundingClientRect();
   return { x: t + i / 2, y: e + r / 2 };
 }
-function D(c) {
+function E(c) {
   return c?.spatialReference?.isWebMercator || c?.spatialReference?.isGeographic || !1;
 }
-const k = x(f);
-class P extends v {
+const D = x(f);
+class k extends $ {
   constructor() {
-    super(...arguments), this.messages = C({}), this._onContextMenu = (t) => t.preventDefault(), this._buttons = {}, this.viewModel = k(this), this.angle = this.viewModel.angle, this.rotation = this.viewModel.rotation, this.autoDestroyDisabled = !1, this.disabled = this.viewModel.disabled, this.hideDirectionalButtons = !1, this.icon = "move", this.position = "bottom-left", this.showRotationResetButton = !1, this.showRotationSlider = !1, this.state = this.viewModel.state, this.visualScale = "s", this.arcgisPropertyChange = b()("state"), this.arcgisReady = $();
+    super(...arguments), this.messages = R({}), this._onContextMenu = (t) => t.preventDefault(), this._buttons = {}, this.viewModel = D(this), this.angle = this.viewModel.angle, this.rotation = this.viewModel.rotation, this.autoDestroyDisabled = !1, this.disabled = this.viewModel.disabled, this.hideDirectionalButtons = !1, this.icon = "move", this.showRotationResetButton = !1, this.showRotationSlider = !1, this.state = this.viewModel.state, this.visualScale = "s", this.arcgisPropertyChange = g()("state"), this.arcgisReady = w();
   }
   static {
     this.properties = { _rotationEnabled: 16, angle: 16, rotation: 16, autoDestroyDisabled: 5, disabled: 5, hideDirectionalButtons: 5, icon: 1, label: 1, messageOverrides: 0, position: 3, referenceElement: 1, showRotationResetButton: 5, showRotationSlider: 5, state: 3, visualScale: 1 };
   }
   static {
-    this.shadowRootOptions = w;
-  }
-  static {
-    this.styles = B;
+    this.styles = S;
   }
   get _rotationEnabled() {
     return this.view?.ready ? this.view.constraints.rotationEnabled ?? !1 : !0;
@@ -64,8 +60,8 @@ class P extends v {
   loaded() {
     this.manager.onLifecycle(() => [
       // Move focus when movement angle changed by touch/mouse (not keyboard!)
-      _(() => this.viewModel.angle, () => {
-        this._buttonsContainer?.contains(document.activeElement) && (this.viewModel.angle == null ? y(this)?.focus() : g(this._buttons[this.viewModel.angle]));
+      v(() => this.viewModel.angle, () => {
+        this._buttonsContainer?.contains(document.activeElement) && (this.viewModel.angle == null ? y(this)?.focus() : _(this._buttons[this.viewModel.angle]));
       })
     ]);
   }
@@ -86,7 +82,7 @@ class P extends v {
     if (this._buttonsContainer === void 0)
       return;
     t.composedPath().find((r) => r.hasPointerCapture?.(t.pointerId))?.releasePointerCapture(t.pointerId);
-    const i = E(this._buttonsContainer);
+    const i = B(this._buttonsContainer);
     this.viewModel.beginFollowingPointer(t, i);
   }
   _onSliderInput({ currentTarget: t }) {
@@ -115,15 +111,15 @@ class P extends v {
     return d("directional-buttons-container", o`<calcite-action-bar expand-disabled floating layout=grid overflow-actions-disabled><calcite-action-group class=${n(s.buttonsContainer)} dir=ltr @contextmenu=${{
       handleEvent: this._onContextMenu,
       capture: !0
-    }} ${m(this._setButtonContainerRef)}>${u.slice(0, 4).map(this._renderButton, this)}${this._renderCompass()}${u.slice(4).map(this._renderButton, this)}</calcite-action-group></calcite-action-bar>`);
+    }} ${b(this._setButtonContainerRef)}>${u.slice(0, 4).map(this._renderButton, this)}${this._renderCompass()}${u.slice(4).map(this._renderButton, this)}</calcite-action-group></calcite-action-bar>`);
   }
   _renderButton(t) {
-    const { label: e, iconName: i } = S[t], r = this.messages[e];
+    const { label: e, iconName: i } = M[t], r = this.messages[e];
     return o`<calcite-action .active=${this.angle === t} alignment=center class=${n(s.button)} data-angle=${t ?? l} .disabled=${this.disabled} @click=${this._onClick.bind(this, t)} @pointerdown=${this._onButtonPointerDown} .scale=${this.visualScale} .text=${r ?? ""} title=${r ?? l}><calcite-icon .icon=${i} .scale=${this.visualScale}></calcite-icon></calcite-action>`;
   }
   _renderCompass() {
-    const t = this.disabled || D(this.view) ? "compass-needle" : "arrow-up", e = this.rotation === 0, i = this.messages.resetHeading;
-    return o`<calcite-action alignment=center class=${n(s.compassButton)} .disabled=${this.disabled || !this._rotationEnabled || e} @click=${this._onRotationReset} .scale=${this.visualScale} style=${R(this._rotateIcon(this.rotation))} .text=${i ?? ""} title=${i ?? l}>${!e && o`<calcite-icon .icon=${t} .scale=${this.visualScale}></calcite-icon>` || ""}</calcite-action>`;
+    const t = this.disabled || E(this.view) ? "compass-needle" : "arrow-up", e = this.rotation === 0, i = this.messages.resetHeading;
+    return o`<calcite-action alignment=center class=${n(s.compassButton)} .disabled=${this.disabled || !this._rotationEnabled || e} @click=${this._onRotationReset} .scale=${this.visualScale} style=${C(this._rotateIcon(this.rotation))} .text=${i ?? ""} title=${i ?? l}>${!e && o`<calcite-icon .icon=${t} .scale=${this.visualScale}></calcite-icon>` || ""}</calcite-action>`;
   }
   _renderRotation() {
     return d("slider-container", o`<calcite-action-bar expand-disabled floating layout=horizontal><calcite-action-group class=${n(s.rotationContainer)}>${this.showRotationResetButton ? this._renderRotationResetButton() : null}${this._renderRotationSlider()}</calcite-action-group></calcite-action-bar>`);
@@ -136,7 +132,7 @@ class P extends v {
     return o`<div class=${n(s.rotationSliderContainer)}><calcite-slider .ariaLabel=${this.messages.heading} .disabled=${this.disabled || !this._rotationEnabled} label-handles max=360 min=0 required .scale=${this.visualScale} .value=${Math.round(this.rotation)} @calciteSliderInput=${this._onSliderInput}></calcite-slider></div>`;
   }
 }
-p("arcgis-directional-pad", P);
+p("arcgis-directional-pad", k);
 export {
-  P as ArcgisDirectionalPad
+  k as ArcgisDirectionalPad
 };

package/dist/components/arcgis-directional-pad/utils.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
-import { Nil } from '@arcgis/components-utils';
+import { nil } from '@arcgis/toolkit/type';
 import { DirectionalPadAngle } from './constants';
 export interface Vector {
     readonly x: number;
@@ -22,4 +22,4 @@ export declare function toUnitVector(first: Vector, second: Vector): Vector;
  * @private
  */
 export declare function findElementCenter(element: Element): Vector;
-export declare function canShowNorth(view: __esri.MapView | __esri.SceneView | Nil): boolean;
+export declare function canShowNorth(view: __esri.MapView | __esri.SceneView | nil): boolean;