@arcgis/map-components 4.32.0-next.85 → 4.32.0-next.87

package/dist/components/arcgis-catalog-layer-list/customElement.js

@@ -1,17 +1,17 @@
 import { c as t } from "../../chunks/runtime.js";
 import { usePropertyChange as e } from "@arcgis/components-controllers";
-import { newWidgetsCatalogLayerList as i } from "@arcgis/core-adapter";
-import { m as s } from "../../chunks/useWidget.js";
+import { reEmitEvent as i } from "@arcgis/components-controllers/accessor";
+import s from "@arcgis/core/widgets/CatalogLayerList.js";
 import { LitElement as o, createEvent as a, noShadowRoot as l } from "@arcgis/lumina";
-import { reEmitEvent as r } from "@arcgis/components-controllers/accessor";
+import { m as r } from "../../chunks/useWidget.js";
 import { css as h } 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.85 */
-const d = h`arcgis-catalog-layer-list{display:block}`, n = s(i);
+v4.32.0-next.87 */
+const d = h`arcgis-catalog-layer-list{display:block}`, n = r(s);
 class c extends o {
   constructor() {
-    super(...arguments), this.widget = n(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.catalogLayer = this.widget.catalogLayer, this.collapsed = this.widget.collapsed, this.filterPlaceholder = this.widget.filterPlaceholder, this.filterPredicate = this.widget.filterPredicate, this.filterText = this.widget.filterText, this.headingLevel = this.widget.headingLevel, this.hideFlow = this.widget.visibleElements.flow, this.hideStatusIndicators = this.widget.visibleElements.statusIndicators, this.icon = this.widget.icon, this.label = this.widget.label, this.listItemCreatedFunction = this.widget.listItemCreatedFunction, this.minFilterItems = this.widget.minFilterItems, this.position = "bottom-left", this.selectedItems = this.widget.selectedItems, this.selectionMode = this.widget.selectionMode, this.showCloseButton = this.widget.visibleElements.closeButton, this.showCollapseButton = this.widget.visibleElements.collapseButton, this.showErrors = this.widget.visibleElements.errors, this.showFilter = this.widget.visibleElements.filter, this.showHeading = this.widget.visibleElements.heading, this.showTemporaryLayerIndicators = this.widget.visibleElements.temporaryLayerIndicators, this.state = this.viewModel.state, this.visibilityAppearance = this.widget.visibilityAppearance, this.arcgisPropertyChange = e()("state"), this.arcgisReady = a(), this.arcgisTriggerAction = r(() => this.widget, "trigger-action");
+    super(...arguments), this.widget = n(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.catalogLayer = this.widget.catalogLayer, this.collapsed = this.widget.collapsed, this.filterPlaceholder = this.widget.filterPlaceholder, this.filterPredicate = this.widget.filterPredicate, this.filterText = this.widget.filterText, this.headingLevel = this.widget.headingLevel, this.hideFlow = this.widget.visibleElements.flow, this.hideStatusIndicators = this.widget.visibleElements.statusIndicators, this.icon = this.widget.icon, this.label = this.widget.label, this.listItemCreatedFunction = this.widget.listItemCreatedFunction, this.minFilterItems = this.widget.minFilterItems, this.position = "bottom-left", this.selectedItems = this.widget.selectedItems, this.selectionMode = this.widget.selectionMode, this.showCloseButton = this.widget.visibleElements.closeButton, this.showCollapseButton = this.widget.visibleElements.collapseButton, this.showErrors = this.widget.visibleElements.errors, this.showFilter = this.widget.visibleElements.filter, this.showHeading = this.widget.visibleElements.heading, this.showTemporaryLayerIndicators = this.widget.visibleElements.temporaryLayerIndicators, this.state = this.viewModel.state, this.visibilityAppearance = this.widget.visibilityAppearance, this.arcgisPropertyChange = e()("state"), this.arcgisReady = a(), this.arcgisTriggerAction = i(() => this.widget, "trigger-action");
   }
   static {
     this.properties = { autoDestroyDisabled: 5, catalogItems: 32, catalogLayer: 0, collapsed: 7, filterPlaceholder: 1, filterPredicate: 0, filterText: 1, headingLevel: 9, hideFlow: 5, hideStatusIndicators: 5, icon: 1, label: 1, listItemCreatedFunction: 0, minFilterItems: 9, position: 1, referenceElement: 1, selectedItems: 0, selectionMode: 1, showCloseButton: 5, showCollapseButton: 5, showErrors: 5, showFilter: 5, showHeading: 5, showTemporaryLayerIndicators: 5, state: 3, visibilityAppearance: 1 };

package/dist/components/arcgis-compass/customElement.d.ts

@@ -2,15 +2,16 @@
 /// <reference types="../../index.d.ts" />
 import { Use } from '@arcgis/components-controllers';
 import { Nil } from '@arcgis/components-utils';
-import { ArcgisReferenceElement } from '../../utils/component-utils';
+import { default as CompassViewModel } from '@arcgis/core/widgets/Compass/CompassViewModel.js';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { ArcgisReferenceElement } from '../../utils/component-utils';
 
 declare const useCompassViewModel: (component: import('@arcgis/components-controllers').StencilLifecycles & {
     manager: import('@arcgis/components-controllers').ControllerManager;
     el: HTMLElement;
     autoDestroyDisabled?: boolean;
     destroy?: () => Promise<void>;
-} & Pick<__esri.CompassViewModel, never> & {
+} & Pick<CompassViewModel, never> & {
     reactiveUtils?: typeof __esri.reactiveUtils;
     state?: "rotation" | "disabled" | "compass" | undefined;
     icon: Nil | string;
@@ -31,7 +32,7 @@ declare const useCompassViewModel: (component: import('@arcgis/components-contro
     destroy: () => Promise<void>;
 }, options?: {
     editConstructorProperties(props: unknown): unknown;
-} | undefined) => __esri.CompassViewModel;
+} | undefined) => CompassViewModel;
 /** The [Compass](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Compass.html) indicates where north is in relation to the current view [rotation](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#rotation) or [camera heading](https://developers.arcgis.com/javascript/latest/api-reference/esri-Camera.html#heading).
  */
 export declare class ArcgisCompass extends LitElement {

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

@@ -2,27 +2,27 @@ import { c } from "../../chunks/runtime.js";
 import { html as l } from "lit-html";
 import { usePropertyChange as m } from "@arcgis/components-controllers";
 import { classes as d } from "@arcgis/components-utils";
-import { newWidgetsCompassCompassViewModel as h } from "@arcgis/core-adapter";
-import { u as p, m as g } from "../../chunks/useViewModel.js";
-import { g as i } from "../../chunks/globalCss.js";
-import { LitElement as u, createEvent as f, noShadowRoot as w, safeClassMap as s, nothing as o, safeStyleMap as y } from "@arcgis/lumina";
+import h from "@arcgis/core/widgets/Compass/CompassViewModel.js";
+import { LitElement as p, createEvent as g, noShadowRoot as u, safeClassMap as s, nothing as i, safeStyleMap as f } from "@arcgis/lumina";
+import { u as w, m as y } from "../../chunks/useViewModel.js";
+import { g as o } from "../../chunks/globalCss.js";
 import { css as $ } 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.85 */
+v4.32.0-next.87 */
 const b = $`arcgis-compass{display:block}`, a = "esri-compass", r = {
   base: a,
   iconContainer: `${a}__icon-container`
-}, v = g(h);
-class C extends u {
+}, v = y(h);
+class C extends p {
   constructor() {
-    super(...arguments), this.messages = p(), this.viewModel = v(this), this.autoDestroyDisabled = !1, this.orientation = this.viewModel.orientation, this.position = "top-left", this.state = this.viewModel.state, this.arcgisPropertyChange = m()("state", "orientation"), this.arcgisReady = f();
+    super(...arguments), this.messages = w(), this.viewModel = v(this), this.autoDestroyDisabled = !1, this.orientation = this.viewModel.orientation, this.position = "top-left", this.state = this.viewModel.state, this.arcgisPropertyChange = m()("state", "orientation"), this.arcgisReady = g();
   }
   static {
     this.properties = { autoDestroyDisabled: 5, icon: 3, label: 1, messageOverrides: 0, orientation: 0, position: 3, referenceElement: 1, state: 3 };
   }
   static {
-    this.shadowRootOptions = w;
+    this.shadowRootOptions = u;
   }
   static {
     this.styles = b;
@@ -50,7 +50,7 @@ class C extends u {
   // #region Rendering
   render() {
     const { messages: t, icon: n } = this;
-    return l`<div class=${s(d(r.base, i.widget))}><calcite-button class=${s(i.widgetButton)} .disabled=${this.state === "disabled"} kind=neutral .label=${t.reset} @click=${this._reset} round scale=s title=${t.reset ?? o}><div aria-hidden=true class=${s(r.iconContainer)} title=${t.reset ?? o}><calcite-icon .icon=${n} style=${y(M(this.orientation))}></calcite-icon></div></calcite-button></div>`;
+    return l`<div class=${s(d(r.base, o.widget))}><calcite-button class=${s(o.widgetButton)} .disabled=${this.state === "disabled"} kind=neutral .label=${t.reset} @click=${this._reset} round scale=s title=${t.reset ?? i}><div aria-hidden=true class=${s(r.iconContainer)} title=${t.reset ?? i}><calcite-icon .icon=${n} style=${f(M(this.orientation))}></calcite-icon></div></calcite-button></div>`;
   }
 }
 const M = (e) => ({

package/dist/components/arcgis-coordinate-conversion/customElement.d.ts

@@ -1,16 +1,17 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
 /// <reference types="../../index.d.ts" />
-import { ArcgisReferenceElement } from '../../utils/component-utils';
 import { Use } from '@arcgis/components-controllers';
 import { Nil } from '@arcgis/components-utils';
+import { default as CoordinateConversion } from '@arcgis/core/widgets/CoordinateConversion.js';
 import { PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { ArcgisReferenceElement } from '../../utils/component-utils';
 
 declare const useCoordinateConversionWidget: (component: import('@arcgis/components-controllers').StencilLifecycles & {
     manager: import('@arcgis/components-controllers').ControllerManager;
     el: HTMLElement;
     autoDestroyDisabled?: boolean;
     destroy?: () => Promise<void>;
-} & Pick<__esri.CoordinateConversion, "orientation" | "label" | "viewModel" | "icon" | "mode" | "headingLevel" | "conversions" | "formats" | "locationSymbol" | "storageType"> & {
+} & Pick<CoordinateConversion, never> & {
     reactiveUtils?: typeof __esri.reactiveUtils;
     state?: unknown;
     viewModel?: __esri.CoordinateConversionViewModel | undefined;
@@ -31,8 +32,8 @@ declare const useCoordinateConversionWidget: (component: import('@arcgis/compone
     autoDestroyDisabled: boolean;
     destroy: () => Promise<void>;
 }, options?: {
-    editConstructorProperties(props: __esri.CoordinateConversionProperties): __esri.CoordinateConversionProperties | Promise<__esri.CoordinateConversionProperties>;
-} | undefined) => __esri.CoordinateConversion;
+    editConstructorProperties(props: __esri.CoordinateConversionProperties | undefined): __esri.CoordinateConversionProperties | Promise<__esri.CoordinateConversionProperties | undefined> | undefined;
+} | undefined) => CoordinateConversion;
 /** [CoordinateConversion](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-CoordinateConversion.html) provides a way to display user cursor position either as map coordinates or as any of several popular coordinate notations. Additionally, the component provides a way to convert user input coordinates into a [Point](https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Point.html).
  */
 export declare class ArcgisCoordinateConversion extends LitElement {
@@ -45,7 +46,7 @@ export declare class ArcgisCoordinateConversion extends LitElement {
      */
     autoDestroyDisabled: boolean;
     conversions: __esri.Collection<__esri.Conversion>;
-    readonly currentLocation: nullish | __esri.Point;
+    readonly currentLocation: __esri.Point | nullish;
     formats: __esri.Collection<__esri.Format>;
     headingLevel: number;
     hideCaptureButton: boolean | undefined;

package/dist/components/arcgis-coordinate-conversion/customElement.js

@@ -1,22 +1,22 @@
 import { c as i } from "../../chunks/runtime.js";
-import { newWidgetsCoordinateConversion as s } from "@arcgis/core-adapter";
-import { usePropertyChange as o } from "@arcgis/components-controllers";
-import { m as n } from "../../chunks/useWidget.js";
-import { LitElement as r, createEvent as a, noShadowRoot as d } from "@arcgis/lumina";
+import { usePropertyChange as s } from "@arcgis/components-controllers";
+import o from "@arcgis/core/widgets/CoordinateConversion.js";
+import { LitElement as n, createEvent as r, noShadowRoot as a } from "@arcgis/lumina";
+import { m as d } from "../../chunks/useWidget.js";
 import { css as h } 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.85 */
-const l = h`arcgis-coordinate-conversion{display:block}`, c = n(s);
-class g extends r {
+v4.32.0-next.87 */
+const l = h`arcgis-coordinate-conversion{display:block}`, c = d(o);
+class g extends n {
   constructor() {
-    super(...arguments), this.widget = c(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.conversions = this.widget.conversions, this.currentLocation = this.widget.currentLocation, this.formats = this.widget.formats, this.headingLevel = this.widget.headingLevel, this.hideCaptureButton = this.widget.visibleElements.captureButton, this.hideEditButton = this.widget.visibleElements.editButton, this.hideExpandButton = this.widget.visibleElements.expandButton, this.hideSettingsButton = this.widget.visibleElements.settingsButton, this.icon = this.widget.icon, this.label = this.widget.label, this.locationSymbol = this.widget.locationSymbol, this.mode = this.widget.mode, this.multipleConversionsDisabled = this.widget.multipleConversions, this.orientation = this.widget.orientation, this.position = "bottom-left", this.state = this.viewModel.state, this.storageDisabled = this.widget.storageEnabled, this.storageType = this.widget.storageType, this.arcgisPropertyChange = o()("currentLocation", "state"), this.arcgisReady = a();
+    super(...arguments), this.widget = c(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.conversions = this.widget.conversions, this.currentLocation = this.widget.currentLocation, this.formats = this.widget.formats, this.headingLevel = this.widget.headingLevel, this.hideCaptureButton = this.widget.visibleElements.captureButton, this.hideEditButton = this.widget.visibleElements.editButton, this.hideExpandButton = this.widget.visibleElements.expandButton, this.hideSettingsButton = this.widget.visibleElements.settingsButton, this.icon = this.widget.icon, this.label = this.widget.label, this.locationSymbol = this.widget.locationSymbol, this.mode = this.widget.mode, this.multipleConversionsDisabled = this.widget.multipleConversions, this.orientation = this.widget.orientation, this.position = "bottom-left", this.state = this.viewModel.state, this.storageDisabled = this.widget.storageEnabled, this.storageType = this.widget.storageType, this.arcgisPropertyChange = s()("currentLocation", "state"), this.arcgisReady = r();
   }
   static {
     this.properties = { autoDestroyDisabled: 5, conversions: 0, currentLocation: 0, formats: 0, headingLevel: 9, hideCaptureButton: 5, hideEditButton: 5, hideExpandButton: 5, hideSettingsButton: 5, icon: 1, label: 1, locationSymbol: 0, mode: 1, multipleConversionsDisabled: 5, orientation: 1, position: 1, referenceElement: 1, state: 3, storageDisabled: 5, storageType: 1 };
   }
   static {
-    this.shadowRootOptions = d;
+    this.shadowRootOptions = a;
   }
   static {
     this.styles = l;

package/dist/components/arcgis-daylight/customElement.d.ts

@@ -1,16 +1,17 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
 /// <reference types="../../index.d.ts" />
-import { ArcgisReferenceElement } from '../../utils/component-utils';
 import { Use } from '@arcgis/components-controllers';
 import { Nil } from '@arcgis/components-utils';
+import { default as Daylight } from '@arcgis/core/widgets/Daylight.js';
 import { PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { ArcgisReferenceElement } from '../../utils/component-utils';
 
 declare const useDaylightWidget: (component: import('@arcgis/components-controllers').StencilLifecycles & {
     manager: import('@arcgis/components-controllers').ControllerManager;
     el: HTMLElement;
     autoDestroyDisabled?: boolean;
     destroy?: () => Promise<void>;
-} & Pick<__esri.Daylight, "label" | "viewModel" | "icon" | "headingLevel" | "dateOrSeason" | "playSpeedMultiplier" | "timeSliderSteps"> & {
+} & Pick<Daylight, never> & {
     reactiveUtils?: typeof __esri.reactiveUtils;
     state?: unknown;
     viewModel?: __esri.DaylightViewModel | undefined;
@@ -31,8 +32,8 @@ declare const useDaylightWidget: (component: import('@arcgis/components-controll
     autoDestroyDisabled: boolean;
     destroy: () => Promise<void>;
 }, options?: {
-    editConstructorProperties(props: __esri.DaylightProperties): __esri.DaylightProperties | Promise<__esri.DaylightProperties>;
-} | undefined) => __esri.Daylight;
+    editConstructorProperties(props: __esri.DaylightProperties | undefined): __esri.DaylightProperties | Promise<__esri.DaylightProperties | undefined> | undefined;
+} | undefined) => Daylight;
 /** [Daylight](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Daylight.html) can be used to manipulate the lighting conditions of a [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html).
  */
 export declare class ArcgisDaylight extends LitElement {

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

@@ -1,21 +1,21 @@
 import { c as e } from "../../chunks/runtime.js";
-import { newWidgetsDaylight as i } from "@arcgis/core-adapter";
-import { m as t } from "../../chunks/useWidget.js";
-import { LitElement as s, createEvent as a, noShadowRoot as l } from "@arcgis/lumina";
+import i from "@arcgis/core/widgets/Daylight.js";
+import { LitElement as t, createEvent as s, noShadowRoot as a } from "@arcgis/lumina";
+import { m as l } from "../../chunks/useWidget.js";
 import { css as h } 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.85 */
-const o = h`arcgis-daylight{display:block}`, d = t(i);
-class n extends s {
+v4.32.0-next.87 */
+const o = h`arcgis-daylight{display:block}`, d = l(i);
+class n extends t {
   constructor() {
-    super(...arguments), this.widget = d(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.currentSeason = this.viewModel.currentSeason, this.dateOrSeason = this.widget.dateOrSeason, this.dayPlaying = this.viewModel.dayPlaying, this.headingLevel = this.widget.headingLevel, this.hideDatePicker = this.widget.visibleElements.datePicker, this.hideHeader = this.widget.visibleElements.header, this.hidePlayButtons = this.widget.visibleElements.playButtons, this.hideShadowsToggle = this.widget.visibleElements.shadowsToggle, this.hideSunLightingToggle = this.widget.visibleElements.sunLightingToggle, this.hideTimezone = this.widget.visibleElements.timezone, this.icon = this.widget.icon, this.label = this.widget.label, this.playSpeedMultiplier = this.widget.playSpeedMultiplier, this.position = "bottom-left", this.timeSliderSteps = this.widget.timeSliderSteps, this.yearPlaying = this.viewModel.yearPlaying, this.arcgisReady = a();
+    super(...arguments), this.widget = d(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.currentSeason = this.viewModel.currentSeason, this.dateOrSeason = this.widget.dateOrSeason, this.dayPlaying = this.viewModel.dayPlaying, this.headingLevel = this.widget.headingLevel, this.hideDatePicker = this.widget.visibleElements.datePicker, this.hideHeader = this.widget.visibleElements.header, this.hidePlayButtons = this.widget.visibleElements.playButtons, this.hideShadowsToggle = this.widget.visibleElements.shadowsToggle, this.hideSunLightingToggle = this.widget.visibleElements.sunLightingToggle, this.hideTimezone = this.widget.visibleElements.timezone, this.icon = this.widget.icon, this.label = this.widget.label, this.playSpeedMultiplier = this.widget.playSpeedMultiplier, this.position = "bottom-left", this.timeSliderSteps = this.widget.timeSliderSteps, this.yearPlaying = this.viewModel.yearPlaying, this.arcgisReady = s();
   }
   static {
     this.properties = { autoDestroyDisabled: 5, currentSeason: 1, dateOrSeason: 1, dayPlaying: 5, headingLevel: 9, hideDatePicker: 5, hideHeader: 5, hidePlayButtons: 5, hideShadowsToggle: 5, hideSunLightingToggle: 5, hideTimezone: 5, icon: 1, label: 1, playSpeedMultiplier: 9, position: 1, referenceElement: 1, timeSliderSteps: 9, yearPlaying: 5 };
   }
   static {
-    this.shadowRootOptions = l;
+    this.shadowRootOptions = a;
   }
   static {
     this.styles = o;

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

@@ -1,16 +1,17 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
 /// <reference types="../../index.d.ts" />
-import { ArcgisReferenceElement } from '../../utils/component-utils';
-import { Nil } from '@arcgis/components-utils';
 import { Use } from '@arcgis/components-controllers';
+import { Nil } from '@arcgis/components-utils';
+import { default as DirectionalPadViewModel } from '@arcgis/core/widgets/DirectionalPad/DirectionalPadViewModel.js';
 import { JsxNode, ToElement, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { ArcgisReferenceElement } from '../../utils/component-utils';
 
 declare const useDirectionalPadViewModel: (component: import('@arcgis/components-controllers').StencilLifecycles & {
     manager: import('@arcgis/components-controllers').ControllerManager;
     el: HTMLElement;
     autoDestroyDisabled?: boolean;
     destroy?: () => Promise<void>;
-} & Pick<__esri.DirectionalPadViewModel, never> & {
+} & Pick<DirectionalPadViewModel, never> & {
     reactiveUtils?: typeof __esri.reactiveUtils;
     state?: "ready" | "disabled" | "moving" | undefined;
     icon: Nil | string;
@@ -25,13 +26,35 @@ declare const useDirectionalPadViewModel: (component: import('@arcgis/components
         childElem?: HTMLElement & {
             ownedBy?: HTMLElement;
         };
-        view?: __esri.MapView | __esri.SceneView | undefined;
+        view
+        /**
+         * A directional pad (D-Pad) component can be used to control the position and
+         * rotation of the map. The D-Pad provides eight directions of movement, a small
+         * compass which indicates the current orientation of the map and a slider for
+         * rotating the map.
+         *
+         * It is also possible to disable the map's rotation controls or change the size
+         * of the component.
+         *
+         * The DirectionalPad component is not supported in 3d.
+         */
+        ? /**
+         * A directional pad (D-Pad) component can be used to control the position and
+         * rotation of the map. The D-Pad provides eight directions of movement, a small
+         * compass which indicates the current orientation of the map and a slider for
+         * rotating the map.
+         *
+         * It is also possible to disable the map's rotation controls or change the size
+         * of the component.
+         *
+         * The DirectionalPad component is not supported in 3d.
+         */: __esri.MapView | __esri.SceneView | undefined;
     };
     autoDestroyDisabled: boolean;
     destroy: () => Promise<void>;
 }, options?: {
     editConstructorProperties(props: unknown): unknown;
-} | undefined) => __esri.DirectionalPadViewModel;
+} | undefined) => DirectionalPadViewModel;
 /**
  * A directional pad (D-Pad) component can be used to control the position and
  * rotation of the map. The D-Pad provides eight directions of movement, a small

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

@@ -1,17 +1,18 @@
 import { c as u } from "../../chunks/runtime.js";
 import { html as o } from "lit-html";
 import { ref as p } from "lit-html/directives/ref.js";
+import { usePropertyChange as m } from "@arcgis/components-controllers";
+import { focusElement as b } from "@arcgis/components-utils";
+import { watch as g } from "@arcgis/core/core/reactiveUtils.js";
+import _ from "@arcgis/core/widgets/DirectionalPad/DirectionalPadViewModel.js";
+import { LitElement as v, createEvent as f, noShadowRoot as $, safeClassMap as n, nothing as l, safeStyleMap as w } from "@arcgis/lumina";
+import { u as R, m as C } from "../../chunks/useViewModel.js";
 import { g as d } from "../../chunks/globalCss.js";
-import { u as m, m as b } from "../../chunks/useViewModel.js";
-import { focusElement as g } from "@arcgis/components-utils";
-import { load as v, usePropertyChange as _ } from "@arcgis/components-controllers";
-import { importCoreReactiveUtils as f, newWidgetsDirectionalPadDirectionalPadViewModel as $ } from "@arcgis/core-adapter";
-import { LitElement as w, createEvent as R, noShadowRoot as C, safeClassMap as a, nothing as l, safeStyleMap as x } from "@arcgis/lumina";
-import { css as y } from "@lit/reactive-element/css-tag.js";
+import { css as x } 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.85 */
-const h = [-45, 0, 45, -90, 90, -135, 180, 135], M = {
+v4.32.0-next.87 */
+const h = [-45, 0, 45, -90, 90, -135, 180, 135], y = {
   0: { label: "north", iconName: "chevron-up" },
   45: { label: "northEast", iconName: "chevron-up-right" },
   90: { label: "east", iconName: "chevron-right" },
@@ -20,16 +21,16 @@ const h = [-45, 0, 45, -90, 90, -135, 180, 135], M = {
   "-135": { label: "southWest", iconName: "chevron-down-left" },
   "-90": { label: "west", iconName: "chevron-left" },
   "-45": { label: "northWest", iconName: "chevron-up-left" }
-}, n = "arcgis-directional-pad", s = {
-  base: n,
-  buttonsContainer: `${n}__buttons-container`,
-  button: `${n}__button`,
-  compassButton: `${n}__compass`,
-  rotationContainer: `${n}__rotation-container`,
-  rotationSliderContainer: `${n}__rotation-slider-container`,
-  rotationReset: `${n}__rotation-reset-button`,
-  error: `${n}__error`
-};
+}, a = "arcgis-directional-pad", s = {
+  base: a,
+  buttonsContainer: `${a}__buttons-container`,
+  button: `${a}__button`,
+  compassButton: `${a}__compass`,
+  rotationContainer: `${a}__rotation-container`,
+  rotationSliderContainer: `${a}__rotation-slider-container`,
+  rotationReset: `${a}__rotation-reset-button`,
+  error: `${a}__error`
+}, M = x`.arcgis-directional-pad{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm);outline:none;box-shadow:none!important;background:transparent;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 S(c) {
   const { x: t, y: e, width: i, height: r } = c.getBoundingClientRect();
   return { x: t + i / 2, y: e + r / 2 };
@@ -37,19 +38,19 @@ function S(c) {
 function B(c) {
   return c?.spatialReference?.isWebMercator || c?.spatialReference?.isGeographic || !1;
 }
-const E = y`.arcgis-directional-pad{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm);outline:none;box-shadow:none!important;background:transparent;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)}}`, D = b($);
-class P extends w {
+const E = C(_);
+class D extends v {
   constructor() {
-    super(...arguments), this.messages = m({}), this._onContextMenu = (t) => t.preventDefault(), this._buttons = {}, this.reactiveUtils = v(f), 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.position = "bottom-left", this.showRotationResetButton = !1, this.showRotationSlider = !1, this.state = this.viewModel.state, this.visualScale = "s", this.arcgisPropertyChange = _()("state"), this.arcgisReady = R();
+    super(...arguments), this.messages = R({}), this._onContextMenu = (t) => t.preventDefault(), this._buttons = {}, this.viewModel = E(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 = m()("state"), this.arcgisReady = f();
   }
   static {
     this.properties = { _rotationEnabled: 16, angle: 16, rotation: 16, autoDestroyDisabled: 5, disabled: 5, hideDirectionalButtons: 5, icon: 3, label: 1, messageOverrides: 0, position: 3, referenceElement: 1, showRotationResetButton: 5, showRotationSlider: 5, state: 3, visualScale: 1 };
   }
   static {
-    this.shadowRootOptions = C;
+    this.shadowRootOptions = $;
   }
   static {
-    this.styles = E;
+    this.styles = M;
   }
   // #endregion
   // #region State Properties
@@ -71,8 +72,8 @@ class P extends w {
   loaded() {
     this.manager.onLifecycle(() => [
       // Move focus when movement angle changed by touch/mouse (not keyboard!)
-      this.reactiveUtils.watch(() => this.viewModel.angle, () => {
-        this._buttonsContainer?.contains(document.activeElement) && (this.viewModel.angle == null ? this.el.childElem?.focus() : g(this._buttons[this.viewModel.angle]));
+      g(() => this.viewModel.angle, () => {
+        this._buttonsContainer?.contains(document.activeElement) && (this.viewModel.angle == null ? this.el.childElem?.focus() : b(this._buttons[this.viewModel.angle]));
       })
     ]);
   }
@@ -120,10 +121,10 @@ class P extends w {
   // #region Rendering
   render() {
     const { label: t, disabled: e } = this, i = this.el.view == null || this.el.view.type === "2d";
-    return o`<div .ariaLabel=${t ?? void 0} class=${a({ [s.base]: !0, [d.widget]: !0, [d.disabled]: e })} tabindex=-1>${i ? this._renderContent() : this._renderUnsupportedMessage()}</div>`;
+    return o`<div .ariaLabel=${t ?? void 0} class=${n({ [s.base]: !0, [d.widget]: !0, [d.disabled]: e })} tabindex=-1>${i ? this._renderContent() : this._renderUnsupportedMessage()}</div>`;
   }
   _renderUnsupportedMessage() {
-    return o`<section class=${a(s.error)}><p>${this.messages.unsupported}</p></section>`;
+    return o`<section class=${n(s.error)}><p>${this.messages.unsupported}</p></section>`;
   }
   _renderContent() {
     return [
@@ -132,31 +133,31 @@ class P extends w {
     ];
   }
   _renderDirectionalButtons() {
-    return o`<calcite-action-pad expand-disabled layout=grid><calcite-action-group class=${a(s.buttonsContainer)} dir=ltr @contextmenu=${{
+    return o`<calcite-action-pad expand-disabled layout=grid><calcite-action-group class=${n(s.buttonsContainer)} dir=ltr @contextmenu=${{
       handleEvent: this._onContextMenu,
       capture: !0
     }} ${p(this._setButtonContainerRef)}>${h.slice(0, 4).map(this._renderButton, this)}${this._renderCompass()}${h.slice(4).map(this._renderButton, this)}</calcite-action-group></calcite-action-pad>`;
   }
   _renderButton(t) {
-    const { label: e, iconName: i } = M[t], r = this.messages[e];
-    return o`<calcite-action .active=${this.angle === t} alignment=center class=${a(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>`;
+    const { label: e, iconName: i } = y[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 || B(this.el.view) ? "compass-needle" : "arrow-up", e = this.rotation === 0, i = this.messages.resetHeading;
-    return o`<calcite-action alignment=center class=${a(s.compassButton)} .disabled=${this.disabled || !this._rotationEnabled || e} @click=${this._onRotationReset} .scale=${this.visualScale} style=${x(this._rotateIcon(this.rotation))} .text=${i ?? ""} title=${i ?? l}>${!e && o`<calcite-icon .icon=${t} .scale=${this.visualScale}></calcite-icon>` || ""}</calcite-action>`;
+    return o`<calcite-action alignment=center class=${n(s.compassButton)} .disabled=${this.disabled || !this._rotationEnabled || e} @click=${this._onRotationReset} .scale=${this.visualScale} style=${w(this._rotateIcon(this.rotation))} .text=${i ?? ""} title=${i ?? l}>${!e && o`<calcite-icon .icon=${t} .scale=${this.visualScale}></calcite-icon>` || ""}</calcite-action>`;
   }
   _renderRotation() {
-    return o`<calcite-action-pad expand-disabled layout=horizontal><calcite-action-group class=${a(s.rotationContainer)}>${this.showRotationResetButton ? this._renderRotationResetButton() : null}${this._renderRotationSlider()}</calcite-action-group></calcite-action-pad>`;
+    return o`<calcite-action-pad expand-disabled layout=horizontal><calcite-action-group class=${n(s.rotationContainer)}>${this.showRotationResetButton ? this._renderRotationResetButton() : null}${this._renderRotationSlider()}</calcite-action-group></calcite-action-pad>`;
   }
   _renderRotationResetButton() {
     const t = this.messages.resetHeading;
-    return o`<calcite-action alignment=center class=${a(s.rotationReset)} .disabled=${this.disabled || !this._rotationEnabled} @click=${this._onRotationReset} .scale=${this.visualScale} .text=${t ?? ""} title=${t ?? l}><calcite-icon flip-rtl icon=rotate .scale=${this.visualScale}></calcite-icon></calcite-action>`;
+    return o`<calcite-action alignment=center class=${n(s.rotationReset)} .disabled=${this.disabled || !this._rotationEnabled} @click=${this._onRotationReset} .scale=${this.visualScale} .text=${t ?? ""} title=${t ?? l}><calcite-icon flip-rtl icon=rotate .scale=${this.visualScale}></calcite-icon></calcite-action>`;
   }
   _renderRotationSlider() {
-    return o`<div class=${a(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>`;
+    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>`;
   }
 }
-u("arcgis-directional-pad", P);
+u("arcgis-directional-pad", D);
 export {
-  P as ArcgisDirectionalPad
+  D as ArcgisDirectionalPad
 };

package/dist/components/arcgis-directions/customElement.d.ts

@@ -1,17 +1,19 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
 /// <reference types="../../index.d.ts" />
-import { ArcgisReferenceElement } from '../../utils/component-utils';
 import { Use } from '@arcgis/components-controllers';
 import { Nil } from '@arcgis/components-utils';
+import { default as RouteLayer } from '@arcgis/core/layers/RouteLayer.js';
+import { default as Directions } from '@arcgis/core/widgets/Directions.js';
 import { PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 import { PropertyValues } from 'lit';
+import { ArcgisReferenceElement } from '../../utils/component-utils';
 
 declare const useDirectionsWidget: (component: import('@arcgis/components-controllers').StencilLifecycles & {
     manager: import('@arcgis/components-controllers').ControllerManager;
     el: HTMLElement;
     autoDestroyDisabled?: boolean;
     destroy?: () => Promise<void>;
-} & Pick<__esri.Directions, "label" | "viewModel" | "icon" | "headingLevel" | "layer" | "unit" | "apiKey" | "maxStops" | "searchProperties"> & {
+} & Pick<Directions, never> & {
     reactiveUtils?: typeof __esri.reactiveUtils;
     state?: unknown;
     viewModel?: __esri.DirectionsViewModel | undefined;
@@ -32,8 +34,8 @@ declare const useDirectionsWidget: (component: import('@arcgis/components-contro
     autoDestroyDisabled: boolean;
     destroy: () => Promise<void>;
 }, options?: {
-    editConstructorProperties(props: __esri.DirectionsProperties): __esri.DirectionsProperties | Promise<__esri.DirectionsProperties>;
-} | undefined) => __esri.Directions;
+    editConstructorProperties(props: __esri.DirectionsProperties | undefined): __esri.DirectionsProperties | Promise<__esri.DirectionsProperties | undefined> | undefined;
+} | undefined) => Directions;
 /** [Directions](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Directions.html) provides a way to calculate directions, between two or more input locations with a [RouteLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-RouteLayer.html), using ArcGIS Online and custom Network Analysis Route services.
  */
 export declare class ArcgisDirections extends LitElement {
@@ -59,7 +61,7 @@ export declare class ArcgisDirections extends LitElement {
     /** The component's default label. */
     label: string;
     readonly lastRoute: nullish | __esri.DirectionsLastRoute;
-    layer: nullish | __esri.RouteLayer;
+    layer: nullish | RouteLayer;
     maxStops: number;
     position: __esri.UIPosition;
     referenceElement: ArcgisReferenceElement | Nil | string;

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

@@ -1,23 +1,24 @@
 import { c as a } from "../../chunks/runtime.js";
-import { newLayersRouteLayer as o, newWidgetsDirections as r } from "@arcgis/core-adapter";
-import { f as h } from "../../chunks/component-utils.js";
-import { usePropertyChange as n } from "@arcgis/components-controllers";
-import { m as d } from "../../chunks/useWidget.js";
-import { LitElement as l, createEvent as c, noShadowRoot as w } from "@arcgis/lumina";
+import { usePropertyChange as r } from "@arcgis/components-controllers";
+import o from "@arcgis/core/layers/RouteLayer.js";
+import h from "@arcgis/core/widgets/Directions.js";
+import { LitElement as n, createEvent as d, noShadowRoot as l } from "@arcgis/lumina";
+import { m as w } from "../../chunks/useWidget.js";
+import { f as m } from "../../chunks/component-utils.js";
 import { css as u } 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.85 */
-const y = u`arcgis-directions{display:block}`, m = d(r), s = "map-components:arcgis-directions";
-class g extends l {
+v4.32.0-next.87 */
+const y = u`arcgis-directions{display:block}`, c = w(h), i = "map-components:arcgis-directions";
+class g extends n {
   constructor() {
-    super(...arguments), this.widget = m(this), this.viewModel = this.widget.viewModel, this.apiKey = this.widget.apiKey, this.autoDestroyDisabled = !1, this.headingLevel = this.widget.headingLevel, this.hideLayerDetails = this.widget.visibleElements.layerDetails, this.hideSaveAsButton = this.widget.visibleElements.saveAsButton, this.hideSaveButton = this.widget.visibleElements.saveButton, this.icon = this.widget.icon, this.label = this.widget.label, this.lastRoute = this.widget.lastRoute, this.layer = this.widget.layer, this.maxStops = this.widget.maxStops, this.position = "bottom-left", this.searchProperties = this.widget.searchProperties, this.state = this.viewModel.state, this.unit = this.widget.unit, this.useDefaultRouteLayer = !1, this.arcgisPropertyChange = n()("lastRoute", "state"), this.arcgisReady = c();
+    super(...arguments), this.widget = c(this), this.viewModel = this.widget.viewModel, this.apiKey = this.widget.apiKey, this.autoDestroyDisabled = !1, this.headingLevel = this.widget.headingLevel, this.hideLayerDetails = this.widget.visibleElements.layerDetails, this.hideSaveAsButton = this.widget.visibleElements.saveAsButton, this.hideSaveButton = this.widget.visibleElements.saveButton, this.icon = this.widget.icon, this.label = this.widget.label, this.lastRoute = this.widget.lastRoute, this.layer = this.widget.layer, this.maxStops = this.widget.maxStops, this.position = "bottom-left", this.searchProperties = this.widget.searchProperties, this.state = this.viewModel.state, this.unit = this.widget.unit, this.useDefaultRouteLayer = !1, this.arcgisPropertyChange = r()("lastRoute", "state"), this.arcgisReady = d();
   }
   static {
     this.properties = { apiKey: 1, autoDestroyDisabled: 5, headingLevel: 9, hideLayerDetails: 5, hideSaveAsButton: 5, hideSaveButton: 5, icon: 1, label: 1, lastRoute: 0, layer: 0, maxStops: 9, position: 1, referenceElement: 1, routeLayerItemId: 1, searchProperties: 0, state: 0, unit: 1, useDefaultRouteLayer: 5 };
   }
   static {
-    this.shadowRootOptions = w;
+    this.shadowRootOptions = l;
   }
   static {
     this.styles = y;
@@ -30,49 +31,45 @@ class g extends l {
   }
   async getDirections() {
     if (this.widget?.viewModel?.state !== "ready")
-      throw new Error(`${s} - component not ready to get directions`);
+      throw new Error(`${i} - component not ready to get directions`);
     return await this.widget?.getDirections();
   }
   async save() {
     if (this.widget?.viewModel?.state !== "ready")
-      throw new Error(`${s} - component not ready to save directions`);
+      throw new Error(`${i} - component not ready to save directions`);
     return await this.widget?.save();
   }
-  async saveAs(t, e) {
+  async saveAs(e, t) {
     if (this.widget?.viewModel?.state !== "ready")
-      throw new Error(`${s} - component not ready to save directions as a Portal Item`);
-    return await this.widget?.saveAs(t, e);
+      throw new Error(`${i} - component not ready to save directions as a Portal Item`);
+    return await this.widget?.saveAs(e, t);
   }
   async zoomToRoute() {
     if (this.widget?.viewModel?.state !== "ready")
-      throw new Error(`${s} - component not ready to zoom to route`);
+      throw new Error(`${i} - component not ready to zoom to route`);
     this.widget?.zoomToRoute();
   }
   // #endregion
   // #region Lifecycle
-  willUpdate(t) {
-    if (t.has("routeLayerItemId")) {
-      const e = this.routeLayerItemId;
-      if (h(e) && !this.useDefaultRouteLayer) {
-        const { layer: i } = this;
-        i && this.widget.view?.map.remove(i), this._setDefaultLayer();
-      } else e && this.widget && o({
+  willUpdate(e) {
+    if (e.has("routeLayerItemId")) {
+      const t = this.routeLayerItemId;
+      if (m(t) && !this.useDefaultRouteLayer) {
+        const { layer: s } = this;
+        s && this.widget.view?.map.remove(s), this._setDefaultLayer();
+      } else t && this.widget && (this.layer = new o({
         portalItem: {
-          id: e
+          id: t
         }
-      }).then((i) => {
-        this.layer = i, this.widget.view?.map.add(this.layer);
-      }).catch(console.error);
+      }), this.widget.view?.map.add(this.layer));
     }
-    t.has("useDefaultRouteLayer") && this._setDefaultLayer();
+    e.has("useDefaultRouteLayer") && this._setDefaultLayer();
   }
   // #endregion
   // #region Private Methods
   /** Maintain a default route layer */
   _setDefaultLayer() {
-    this.useDefaultRouteLayer && !this.routeLayerItemId && o({}).then((t) => {
-      this.layer = t, this.widget.view?.map.add(this.layer);
-    }).catch(console.error);
+    this.useDefaultRouteLayer && !this.routeLayerItemId && (this.layer = new o(), this.widget.view?.map.add(this.layer));
   }
 }
 a("arcgis-directions", g);