@geoscene/map-components 4.34.9 → 5.0.19

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

@@ -1,20 +1,18 @@
-import { c as p } from "../../chunks/runtime.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 "@geoscene/lumina/controllers";
-import { focusElement as v } from "@arcgis/toolkit/dom";
-import { watch as _ } from "@geoscene/core/core/reactiveUtils.js";
-import f from "@geoscene/core/widgets/DirectionalPad/DirectionalPadViewModel.js";
-import { LitElement as $, createEvent as w, safeClassMap as n, nothing as l, safeStyleMap as C } from "@geoscene/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";
-/*! All material copyright GeoScene, All Rights Reserved, unless otherwise specified.
-See https://js.geoscene.cn/4.34/geoscene/copyright.txt for details.
-v4.34.9 */
-const u = [-45, 0, 45, -90, 90, -135, 180, 135], M = {
+/* COPYRIGHT GeoScene - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as d } from "../../chunks/runtime.js";
+import { css as h, html as o } from "lit";
+import { ref as u } from "lit/directives/ref.js";
+import { keyed as r } from "lit/directives/keyed.js";
+import { usePropertyChange as p } from "@geoscene/lumina/controllers";
+import { focusElement as m } from "@geoscene/toolkit/dom";
+import { watch as b } from "@geoscene/core/core/reactiveUtils.js";
+import g from "@geoscene/core/widgets/DirectionalPad/DirectionalPadViewModel.js";
+import { LitElement as v, createEvent as f, safeClassMap as w, nothing as s, safeStyleMap as _ } from "@geoscene/lumina";
+import { u as $ } from "../../chunks/useT9n.js";
+import { m as R } from "../../chunks/useViewModel.js";
+import { g as x } from "../../chunks/component-utils.js";
+import { g as c } from "../../chunks/globalCss.js";
+const l = [-45, 0, 45, -90, 90, -135, 180, 135], C = {
   0: { label: "north", iconName: "chevron-up" },
   45: { label: "northEast", iconName: "chevron-up-right" },
   90: { label: "east", iconName: "chevron-right" },
@@ -23,33 +21,24 @@ const u = [-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" }
-}, a = "geoscene-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`
-}, S = m`:host{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}}.geoscene-directional-pad{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm)}.geoscene-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)}}}.geoscene-directional-pad__rotation-container{display:block;width:100%;calcite-action{flex:.3}}.geoscene-directional-pad__rotation-slider-container{display:flex;flex:1;align-items:center;calcite-slider{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 };
+}, y = h`:host{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}}.root{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm)}.buttons-container{--calcite-color-background: transparent;--calcite-action-group-gap: 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)}}}.rotation-container{display:block;width:100%;calcite-action{flex:.3}}.rotation-slider-container{display:flex;flex:1;align-items:center;calcite-slider{flex:1;padding-inline:var(--calcite-spacing-xxs)}}`;
+function M(a) {
+  const { x: t, y: e, width: i, height: n } = a.getBoundingClientRect();
+  return { x: t + i / 2, y: e + n / 2 };
 }
-function E(c) {
-  return c?.spatialReference?.isWebMercator || c?.spatialReference?.isGeographic || !1;
+function B(a) {
+  return a?.spatialReference?.isWebMercator || a?.spatialReference?.isGeographic || !1;
 }
-const D = x(f);
-class k extends $ {
+const S = R(g);
+class E extends v {
   constructor() {
-    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.view = this.viewModel.view, 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.geoscenePropertyChange = g()("state"), this.geosceneReady = w();
+    super(...arguments), this.messages = $({}), this._onContextMenu = (t) => t.preventDefault(), this._buttons = {}, this.viewModel = S(this), this.angle = this.viewModel.angle, this.rotation = this.viewModel.rotation, this.view = this.viewModel.view, 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.geoscenePropertyChange = p()("state"), this.geosceneReady = f();
   }
   static {
-    this.properties = { _rotationEnabled: 16, angle: 16, rotation: 16, view: 0, autoDestroyDisabled: 5, disabled: 5, hideDirectionalButtons: 5, icon: 1, label: 1, messageOverrides: 0, position: 3, referenceElement: 1, showRotationResetButton: 5, showRotationSlider: 5, state: 3, visualScale: 1 };
+    this.properties = { _rotationEnabled: 16, angle: 16, rotation: 16, view: 0, autoDestroyDisabled: 5, disabled: 5, hideDirectionalButtons: 5, icon: 1, label: 1, messageOverrides: 0, referenceElement: 1, showRotationResetButton: 5, showRotationSlider: 5, state: 32, visualScale: 1 };
   }
   static {
-    this.styles = S;
+    this.styles = y;
   }
   get _rotationEnabled() {
     return this.view?.ready ? this.view.constraints.rotationEnabled ?? !1 : !0;
@@ -60,8 +49,8 @@ class k extends $ {
   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() : v(this._buttons[this.viewModel.angle]));
+      b(() => this.viewModel.angle, () => {
+        this._buttonsContainer?.contains(document.activeElement) && (this.viewModel.angle == null ? x(this)?.focus() : m(this._buttons[this.viewModel.angle]));
       })
     ]);
   }
@@ -81,8 +70,8 @@ class k extends $ {
   _onButtonPointerDown(t) {
     if (this._buttonsContainer === void 0)
       return;
-    t.composedPath().find((r) => r.hasPointerCapture?.(t.pointerId))?.releasePointerCapture(t.pointerId);
-    const i = B(this._buttonsContainer);
+    t.composedPath().find((n) => n.hasPointerCapture?.(t.pointerId))?.releasePointerCapture(t.pointerId);
+    const i = M(this._buttonsContainer);
     this.viewModel.beginFollowingPointer(t, i);
   }
   _onSliderInput({ currentTarget: t }) {
@@ -96,10 +85,10 @@ class k extends $ {
   }
   render() {
     const { label: t, disabled: e } = this, i = this.view == null || this.view.type === "2d";
-    return o`<div .ariaLabel=${t ?? void 0} class=${n({ [s.base]: !0, [h.widget]: !0, [h.disabled]: e })} tabindex=-1>${i ? this._renderContent() : this._renderUnsupportedMessage()}</div>`;
+    return o`<div .ariaLabel=${t ?? void 0} class=${w({ root: !0, [c.widget]: !0, [c.disabled]: e })} tabindex=-1>${i ? this._renderContent() : this._renderUnsupportedMessage()}</div>`;
   }
   _renderUnsupportedMessage() {
-    return o`<section class=${n(s.error)}><p>${this.messages.unsupported}</p></section>`;
+    return o`<section class="error"><p>${this.messages.unsupported}</p></section>`;
   }
   _renderContent() {
     return [
@@ -108,31 +97,31 @@ class k extends $ {
     ];
   }
   _renderDirectionalButtons() {
-    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=${{
+    return r("directional-buttons-container", o`<calcite-action-bar expand-disabled floating layout=grid .scale=${this.visualScale} overflow-actions-disabled><calcite-action-group class="buttons-container" dir=ltr @contextmenu=${{
       handleEvent: this._onContextMenu,
       capture: !0
-    }} ${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>`);
+    }} ${u(this._setButtonContainerRef)}>${l.slice(0, 4).map(this._renderButton, this)}${this._renderCompass()}${l.slice(4).map(this._renderButton, this)}</calcite-action-group></calcite-action-bar>`);
   }
   _renderButton(t) {
-    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>`;
+    const { label: e, iconName: i } = C[t], n = this.messages[e];
+    return o`<calcite-action .active=${this.angle === t} alignment=center class="button" data-angle=${t ?? s} .disabled=${this.disabled} @click=${this._onClick.bind(this, t)} @pointerdown=${this._onButtonPointerDown} .text=${n ?? ""} title=${n ?? s}><calcite-icon .icon=${i} .scale=${this.visualScale}></calcite-icon></calcite-action>`;
   }
   _renderCompass() {
-    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>`;
+    const t = this.disabled || B(this.view) ? "compass-needle" : "arrow-up", e = this.rotation === 0, i = this.messages.resetHeading;
+    return o`<calcite-action alignment=center class="compass" .disabled=${this.disabled || !this._rotationEnabled || e} @click=${this._onRotationReset} style=${_(this._rotateIcon(this.rotation))} .text=${i ?? ""} title=${i ?? s}>${!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>`);
+    return r("slider-container", o`<calcite-action-bar expand-disabled floating layout=horizontal .scale=${this.visualScale}><calcite-action-group class="rotation-container">${this.showRotationResetButton ? this._renderRotationResetButton() : null}${this._renderRotationSlider()}</calcite-action-group></calcite-action-bar>`);
   }
   _renderRotationResetButton() {
     const t = this.messages.resetHeading;
-    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>`;
+    return o`<calcite-action alignment=center class="rotation-reset-button" .disabled=${this.disabled || !this._rotationEnabled} @click=${this._onRotationReset} .text=${t ?? ""} title=${t ?? s}><calcite-icon flip-rtl icon=rotate .scale=${this.visualScale}></calcite-icon></calcite-action>`;
   }
   _renderRotationSlider() {
-    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>`;
+    return o`<div class="rotation-slider-container"><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("geoscene-directional-pad", k);
+d("geoscene-directional-pad", E);
 export {
-  k as GeosceneDirectionalPad
+  E as GeosceneDirectionalPad
 };

package/dist/components/geoscene-directional-pad/index.d.ts

@@ -1,6 +1 @@
-import "@geoscene/calcite-components/components/calcite-action-bar";
-import "@geoscene/calcite-components/components/calcite-action-group";
-import "@geoscene/calcite-components/components/calcite-action";
-import "@geoscene/calcite-components/components/calcite-icon";
-import "@geoscene/calcite-components/components/calcite-slider";
 export * from "./customElement.js";

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

@@ -1,160 +1,253 @@
-/// <reference types="@geoscene/core/interfaces.d.ts" />
 /// <reference path="../../index.d.ts" />
-import { Use } from '@geoscene/lumina/controllers';
-import { default as RouteLayer } from '@geoscene/core/layers/RouteLayer.js';
-import { default as Directions } from '@geoscene/core/widgets/Directions.js';
-import { PublicLitElement as LitElement, TargetedEvent } from '@geoscene/lumina';
-import { PropertyValues } from 'lit';
-import { GeosceneReferenceElement } from '../../utils/component-utils';
+import type RouteLayer from "@geoscene/core/layers/RouteLayer.js";
+import type PortalItem from "@geoscene/core/portal/PortalItem.js";
+import type PortalFolder from "@geoscene/core/portal/PortalFolder.js";
+import type { PublicLitElement as LitElement } from "@geoscene/lumina";
+import type { GeosceneReferenceElement, IconName } from "../types.js";
+import type { RouteLayerSolveResult } from "@geoscene/core/layers/types.js";
+import type { MapViewOrSceneView } from "@geoscene/core/views/MapViewOrSceneView.js";
+import type { GoToOverride, HeadingLevel } from "@geoscene/core/widgets/support/types.js";
+import type { Icon } from "@geoscene/calcite-components/components/calcite-icon";
+import type { SearchProperties } from "@geoscene/core/widgets/Search.js";
+import type { State } from "@geoscene/core/widgets/Directions/DirectionsViewModel.js";
+import type { SystemOrLengthUnit } from "@geoscene/core/core/units.js";
 
-declare const useDirectionsWidget: (component: LitElement & Pick<Directions, "icon" | "label" | "layer" | "viewModel" | "headingLevel" | "apiKey" | "goToOverride" | "unit" | "maxStops" | "searchProperties"> & {
-    state?: unknown;
-    viewModel?: __geoscene.DirectionsViewModel | undefined;
-    closed?: boolean;
-    icon: import('@arcgis/toolkit/type').nil | string;
-    label: import('@arcgis/toolkit/type').nil | string;
-    referenceElement?: GeosceneReferenceElement | string;
-    position?: __geoscene.UIPosition;
-    geosceneReady: import('@geoscene/lumina').EventEmitter;
-    geoscenePropertyChange: import('@geoscene/lumina').EventEmitter<{
-        name: string;
-    }> | undefined;
-    el: HTMLElement & {
-        childElem?: HTMLElement & {
-            ownedBy?: HTMLElement;
-        };
-        view?: __geoscene.LinkChartView | __geoscene.MapView | __geoscene.SceneView | nullish;
-    };
-    autoDestroyDisabled: boolean;
-    destroy: () => Promise<void>;
-}) => Directions;
 /**
- * The Directions component provides a way to calculate directions, between two or more input locations with a [RouteLayer](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-layers-RouteLayer.html), using GeoScene Online and custom Network Analysis Route services.
+ * The Directions component provides a way to calculate directions, between two or more input locations with a [RouteLayer](https://doc.geoscene.cn/javascript/5.0/references/core/layers/RouteLayer/), using GeoScene Online and custom Network Analysis Route services.
+ * This component generates a route finding a least-cost path between multiple points using the routing service associated with the assigned RouteLayer. The route is calculated based on the stops and barriers added to the RouteLayer. The component provides a user interface for adding, removing, and reordering stops and barriers. Once the route is solved, the component displays the route on the map and provides turn-by-turn directions in a list format.
  *
- * [Read more...](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-directions/)
+ * Directions uses the [Search component](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-search/) to locate each stop, either by selecting a point on the map, or by entering a search term into the textbox.
+ * Search uses settings defined in the `Search properties`. This includes the `locationType`, which defines the type of geocoding result that is returned, and defaults to "street".
+ *
+ * Directions requires a RouteLayer to be associated with the `layer` property or using the `useDefaultRouteLayer` property. A RouteLayer can be programmatically created or derived from an external source like a portal item or webmap.
+ * Please note that in order to view or interact with routing inputs and results, the RouteLayer must be added to the map. Routing service and symbology is configured in the layer, specifically the `url` and `defaultSymbols` properties respectively.
+ *
+ * The GeoScene Online routing service requires authentication. If an API key is specified at the app level (see [Config#apiKey](https://doc.geoscene.cn/javascript/5.0/references/core/config/#Config-apiKey)) or component level (see [apiKey](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-directions/#apiKey))) then this key will accompany requests to both the routing service and geocoder/reverse-geocoder.
+ * Please refer to the Search component for more information on geocoding.
+ *
+ * Locations on the map can be reverse geocoded and used as stops in the route. Click the button with a crosshairs icon to associate a location with a new or existing stop.  After clicking the button, click the map once. To cancel this process, press the `escape` key.
+ * The resulting driving directions are automatically collapsed and can be optionally saved to a new or existing portal item. This can be achieved programically with `save` and `saveAs`. The `Clear` button calls the `reset()` method, which removes all stops, directions, and the solved route.
+ *
+ * Selecting the `Edit route` button allows you to add/move/remove stops, add/move/remove/reshape polyline barriers, and add/move/remove waypoints. To add a new waypoint, first hover the cursor over the route and select the desired point. Then select and drag the point to move and place the waypoint. By default the route will be automatically resolve at the completion of any editing operation. For more complex routes, it may be advantageous to disable auto-solving and solve as and when needed with the dedicated solve button. Currently, this is only supported in 2D MapViews.
+ *
+ * **Note:** Printing in Directions is in beta and considered experimental. The print preview dialog, in some scenarios, may not display as aniticipated.
  *
  * @since 4.28
  */
-export declare class GeosceneDirections extends LitElement {
-    /**
-     * The view associated with the component.
-     *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the Directions component will be associated with a map or scene component rather than using the `view` property.
-     */
-    view?: __geoscene.MapView | __geoscene.SceneView | nullish;
-    /**
-     * An authorization string used to access a resource or service.
-     *
-     * [Read more...](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-widgets-Directions.html#apiKey)
-     */
-    apiKey: string | nullish;
-    /**
-     * If true, the component will not be destroyed automatically when it is
-     * disconnected from the document. This is useful when you want to move the
-     * component to a different place on the page, or temporarily hide it. If this
-     * is set, make sure to call the [destroy](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-directions/#destroy) method when you are done to
-     * prevent memory leaks.
-     *
-     * @default false
-     */
-    autoDestroyDisabled: boolean;
-    /**
-     * This function provides the ability to override either the
-     * [MapView goTo()](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-views-MapView.html#goTo) or
-     * [SceneView goTo()](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-views-SceneView.html#goTo) methods.
-     *
-     * [Read more...](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-widgets-Directions.html#goToOverride)
-     *
-     * @since 4.33
-     */
-    goToOverride: nullish | __geoscene.GoToOverride;
-    /**
-     * Indicates the heading level to use for the origin and destination addresses (i.e.
-     *
-     * @default 2
-     */
-    headingLevel: number;
-    /** @default false */
-    hideLayerDetails: boolean | undefined;
-    /** @default false */
-    hideSaveAsButton: boolean | undefined;
-    /** @default false */
-    hideSaveButton: boolean | undefined;
-    /**
-     * Icon which represents the component.
-     * Typically used when the component is controlled by another component (e.g. by the Expand component).
-     *
-     * @see [Calcite Icons](https://doc.geoscene.cn/calcite-design-system/icons/)
-     * @default "right"
-     */
-    icon: string;
-    /**
-     * The widget's default label.
-     *
-     * [Read more...](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-widgets-Directions.html#label)
-     */
-    label: string;
-    /**
-     * The most recent route result.
-     *
-     * [Read more...](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-widgets-Directions.html#lastRoute)
-     *
-     * @default null
-     */
-    readonly lastRoute: nullish | __geoscene.DirectionsLastRoute;
-    /**
-     * The [RouteLayer](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-layers-RouteLayer.html) associated with the Directions widget.
-     *
-     * [Read more...](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-widgets-Directions.html#layer)
-     */
-    layer: nullish | RouteLayer;
-    /**
-     * The maximum number of stops allowed for routing.
-     *
-     * @default 50
-     */
-    maxStops: number;
-    /** @deprecated since 4.34, use [`slot`](https://doc.geoscene.cn/javascript/4.33/building-your-ui/#slots) instead. */
-    position?: __geoscene.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://doc.geoscene.cn/javascript/4.33/programming-patterns/#associate-components-with-a-map-or-scene-component)
-     */
-    referenceElement?: GeosceneReferenceElement | string;
-    routeLayerItemId?: string;
-    /**
-     * Controls the default properties used when searching.
-     *
-     * @default { popupEnabled: false, resultGraphicEnabled: false }
-     */
-    searchProperties: nullish | __geoscene.DirectionsSearchProperties;
-    /**
-     * The current state of the component.
-     *
-     * @default "disabled"
-     */
-    readonly state: "ready" | "disabled" | "error" | "initializing" | "routing" | "unauthenticated";
-    /**
-     * Unit system (imperial, metric) or specific unit used for displaying the distance values.
-     *
-     * [Read more...](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-widgets-Directions.html#unit)
-     */
-    unit: __geoscene.SystemOrLengthUnit;
-    /** @default false */
-    useDefaultRouteLayer: boolean;
-    /** Permanently destroy the component. */
-    destroy(): Promise<void>;
-    getDirections(): Promise<__geoscene.RouteLayerSolveResult>;
-    save(): Promise<__geoscene.PortalItem>;
-    saveAs(portalItem: __geoscene.PortalItem, options: {
-        folder: __geoscene.PortalFolder;
-    }): Promise<__geoscene.PortalItem>;
-    zoomToRoute(): Promise<void>;
-    /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
-    readonly geoscenePropertyChange: TargetedEvent<this, {
-        name: "state" | "lastRoute";
-    }>;
-    /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
-    readonly geosceneReady: TargetedEvent<this, void>;
-}
-export {};
+export abstract class GeosceneDirections extends LitElement {
+  /**
+   * An authorization string used to access a resource or service.
+   * [API keys](https://doc.geoscene.cn/documentation/security-and-authentication/api-key-authentication/) are generated
+   * and managed in the portal. An API key is tied
+   * explicitly to a GeoScene account; it is also used to monitor service usage.
+   * Setting a fine-grained API key on a specific class overrides the [global API key](https://doc.geoscene.cn/javascript/5.0/references/core/config/#ConfigWithApiKey).
+   *
+   * By default, the following URLs will be used (unless overwritten in the app, or if using different defaults from a portal):
+   *
+   * Geocoding URL: `https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer`
+   *
+   * Routing URL: `https://route-api.geoscene.cn/geoscene/rest/services/World/Route/NAServer/Route_World`
+   *
+   * @since 4.19
+   * @example
+   * // Add the Directions component to the top right corner of the view component
+   * <geoscene-map>
+   *   <geoscene-directions api-key="YOUR_API_KEY" slot="top-right"></geoscene-directions>
+   * </geoscene-map>
+   */
+  accessor apiKey: string | null | undefined;
+  /**
+   * If true, the component will not be destroyed automatically when it is
+   * disconnected from the document. This is useful when you want to move the
+   * component to a different place on the page, or temporarily hide it. If this
+   * is set, make sure to call the [destroy()](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-directions/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   */
+  accessor autoDestroyDisabled: boolean;
+  /**
+   * When `true`, the route will re-solve continuously as an interactive operation is ongoing (e.g., while dragging a stop or waypoint).
+   *
+   * @default false
+   * @since 5.0
+   */
+  accessor autoSolveOnEditActive: boolean;
+  /**
+   * This function provides the ability to override either the [geoscene-map.goTo()](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-map/#goTo) or [geoscene-scene.goTo()](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-scene/#goTo) methods.
+   *
+   * @since 4.33
+   * @example
+   * ```js
+   * component.goToOverride = function(view, goToParams) {
+   *   goToParams.options = {
+   *     duration: updatedDuration
+   *   };
+   *   return view.goTo(goToParams.target, goToParams.options);
+   * };
+   * ```
+   */
+  accessor goToOverride: GoToOverride | null | undefined;
+  /**
+   * Indicates the heading level to use for the origin and destination addresses (i.e. "380 New York Street").
+   * By default, this is rendered
+   * as a level 2 heading (e.g. `<h2>380 New York Street</h2>`). Depending on the component's placement
+   * in your app, you may need to adjust this heading for proper semantics. This is
+   * important for meeting accessibility standards.
+   *
+   * @default 2
+   * @since 4.20
+   * @see [Heading Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)
+   * @example
+   * // address text will render as an <h3>
+   * directions.headingLevel = 3;
+   */
+  accessor headingLevel: HeadingLevel;
+  /**
+   * Indicates whether to a link to the route layer portal-item (if any) will be displayed
+   *
+   * @default false
+   * @since 5.0
+   */
+  accessor hideLayerDetails: boolean;
+  /**
+   * Indicates whether to the Print button will be displayed
+   *
+   * @default false
+   * @since 5.0
+   */
+  accessor hidePrintButton: boolean;
+  /**
+   * Indicates whether to the Save As button will be displayed
+   *
+   * @default false
+   * @since 5.0
+   */
+  accessor hideSaveAsButton: boolean;
+  /**
+   * Indicates whether to the Save button will be displayed
+   *
+   * @default false
+   * @since 5.0
+   */
+  accessor hideSaveButton: boolean;
+  /**
+   * Icon which represents the component.
+   * Typically used when the component is controlled by another component (e.g. by the Expand component).
+   *
+   * @default "right"
+   * @since 4.27
+   * @see [Calcite Icons](https://doc.geoscene.cn/calcite-design-system/icons/)
+   */
+  get icon(): Icon["icon"];
+  set icon(value: IconName);
+  /**
+   * The component's default label.
+   *
+   * @since 4.7
+   */
+  accessor label: string;
+  /**
+   * The most recent route result. Returns a [RouteLayerSolveResult](https://doc.geoscene.cn/javascript/5.0/references/core/layers/types/#RouteLayerSolveResult)
+   * object containing properties for barriers (if any), stops, and directions.
+   *
+   * @see [RouteLayer#solve()](https://doc.geoscene.cn/javascript/5.0/references/core/layers/RouteLayer/#solve)
+   */
+  get lastRoute(): RouteLayerSolveResult | null | undefined;
+  /**
+   * The [RouteLayer](https://doc.geoscene.cn/javascript/5.0/references/core/layers/RouteLayer/) associated with the Directions component.
+   * This property is required.
+   * The RouteLayer contains stops and barriers and will be used to display and solve routes.
+   *
+   * @since 4.24
+   */
+  accessor layer: RouteLayer | null | undefined;
+  /**
+   * The maximum number of stops allowed for routing.
+   *
+   * @default 50
+   */
+  accessor maxStops: number;
+  /**
+   * 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://doc.geoscene.cn/javascript/5.0/programming-patterns/#associate-components-with-a-map-or-scene-component)
+   */
+  accessor referenceElement: GeosceneReferenceElement | string | undefined;
+  accessor routeLayerItemId: string | undefined;
+  /**
+   * Controls the default properties used when searching.
+   * Note that the default `searchProperties` differ slightly from
+   * the [Search component](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-search/).
+   *
+   * @default { popupEnabled: false, resultGraphicEnabled: false }
+   */
+  accessor searchProperties: SearchProperties | null | undefined;
+  /**
+   * The current state of the component.
+   *
+   * @default "disabled"
+   */
+  get state(): State;
+  /**
+   * Unit system (imperial, metric) or specific unit used for displaying the distance values.
+   * If not set, the component will attempt to pick "imperial" or "metric" based on the user's portal settings.
+   *
+   * This property will affect the summary distance as well as distance for each turn-by-turn maneuver.
+   *
+   * @since 4.25
+   * @example
+   * // Display distances in nautical miles.
+   * const directions = new Directions({
+   *   unit: "nautical-miles",
+   *   layer: routeLayer,
+   *   view: view
+   * });
+   */
+  accessor unit: SystemOrLengthUnit;
+  /**
+   * If `true`, a new [RouteLayer](https://doc.geoscene.cn/javascript/5.0/references/core/layers/RouteLayer/) will be created, added to the map and assigned to the `layer` property.
+   *
+   * @default false
+   */
+  accessor useDefaultRouteLayer: boolean;
+  /**
+   * The view associated with the component. 
+   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the geoscene-directions component will be associated with a map or scene component rather than using the `view` property.
+   */
+  accessor view: MapViewOrSceneView | null | undefined;
+  /** Permanently destroy the component. */
+  destroy(): Promise<void>;
+  /** Computes a route and directions. If successfully computed, results will be assigned to the [lastRoute](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-directions/#lastRoute) property. */
+  getDirections(): Promise<RouteLayerSolveResult>;
+  /**
+   * Saves the currently assigned [RouteLayer](https://doc.geoscene.cn/javascript/5.0/references/core/layers/RouteLayer/)
+   * (see [layer](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-directions/#layer)) to an existing portal item.
+   */
+  save(): Promise<PortalItem>;
+  /**
+   * Saves the currently assigned [RouteLayer](https://doc.geoscene.cn/javascript/5.0/references/core/layers/RouteLayer/)
+   * (see [layer](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-directions/#layer)) to a new portal item.
+   *
+   * @param portalItem
+   * @param options
+   */
+  saveAs(portalItem: PortalItem, options: { folder: PortalFolder; }): Promise<PortalItem>;
+  /** Starts an edit session for interactive addition, modification, and deletion of stops, barriers, and waypoints. */
+  startEditing(): Promise<void>;
+  /** Ends an interactive edit session. */
+  stopEditing(): Promise<void>;
+  /** Zoom so that the entire route is displayed within the current map extent. */
+  zoomToRoute(): Promise<void>;
+  "@setterTypes": {
+    icon?: IconName;
+  };
+  /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
+  readonly geoscenePropertyChange: import("@geoscene/lumina").TargetedEvent<this, { name: "lastRoute" | "state"; }>;
+  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  readonly geosceneReady: import("@geoscene/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    geoscenePropertyChange: GeosceneDirections["geoscenePropertyChange"]["detail"];
+    geosceneReady: GeosceneDirections["geosceneReady"]["detail"];
+  };
+}