@arcgis/map-components 4.34.0-next.8 → 4.34.0-next.81

package/dist/components/arcgis-layer-list/customElement.d.ts

@@ -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 LayerList } from '@arcgis/core/widgets/LayerList.js';
 import { PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
@@ -9,8 +9,8 @@ declare const useLayerListWidget: (component: LitElement & Pick<LayerList, "icon
     state?: unknown;
     viewModel?: __esri.LayerListViewModel | undefined;
     closed?: boolean;
-    icon: import('@arcgis/components-utils').Nil | string;
-    label: import('@arcgis/components-utils').Nil | string;
+    icon: import('@arcgis/toolkit/type').nil | string;
+    label: import('@arcgis/toolkit/type').nil | string;
     referenceElement?: ArcgisReferenceElement | string;
     position: __esri.UIPosition;
     arcgisReady: import('@arcgis/lumina').EventEmitter;
@@ -21,7 +21,10 @@ declare const useLayerListWidget: (component: LitElement & Pick<LayerList, "icon
         childElem?: HTMLElement & {
             ownedBy?: HTMLElement;
         };
-        view?: __esri.LinkChartView | __esri.MapView | __esri.SceneView;
+        view? /**
+         * @copyDoc
+         * @since 4.33
+         */: __esri.LinkChartView | __esri.MapView | __esri.SceneView;
     };
     autoDestroyDisabled: boolean;
     destroy: () => Promise<void>;
@@ -155,6 +158,11 @@ export declare class ArcgisLayerList extends LitElement {
     get operationalItems(): __esri.Collection<__esri.ListItem>;
     /** @default "bottom-left" */
     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;
     /**
      * A collection of selected [ListItem](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList-ListItem.html)s representing operational layers
@@ -168,7 +176,7 @@ export declare class ArcgisLayerList extends LitElement {
      *
      * @default "none"
      */
-    selectionMode: "single" | "multiple" | "none" | "single-persist";
+    selectionMode: "single" | "none" | "multiple" | "single-persist";
     /** @default false */
     showCloseButton: boolean;
     /** @default false */
@@ -204,7 +212,7 @@ export declare class ArcgisLayerList 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>;
     /** Emitted when an action is triggered on the component. */
     readonly arcgisTriggerAction: TargetedEvent<this, __esri.LayerListTriggerActionEvent>;

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

@@ -8,7 +8,7 @@ import { s as n } from "../../chunks/layer-list.js";
 import { c as g } from "../../chunks/createCloseEvent.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.8 */
+v4.34.0-next.81 */
 const c = d(a);
 class m extends r {
   constructor() {

package/dist/components/arcgis-layer-list-item/customElement.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
-/// <reference types="../../index.d.ts" />
+/// <reference path="../../index.d.ts" />
 import { Action, VisibilityAppearance } from '../../utils/action-utils';
 import { TableSupportedLayers } from '../../utils/layer-list-utils';
 import { css as LayerListCSS } from '../arcgis-layer-list/css';

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

@@ -1,6 +1,6 @@
 import { c as T } from "../../chunks/runtime.js";
-import { html as r } from "lit-html";
-import { classes as y } from "@arcgis/components-utils";
+import { html as r } from "lit";
+import { classes as y } from "@arcgis/toolkit/dom";
 import { isLayerFromCatalog as S } from "@arcgis/core/layers/catalog/catalogUtils.js";
 import { LitElement as A, noShadowRoot as M, safeClassMap as h, nothing as o, safeStyleMap as w } from "@arcgis/lumina";
 import { createRef as _, ref as v } from "lit-html/directives/ref.js";
@@ -10,7 +10,7 @@ import { s as E } from "../../chunks/layer-list.js";
 import { u as x } from "../../chunks/useT9n.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.8 */
+v4.34.0-next.81 */
 const D = {
   hideChildren: "hide-children"
 };

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

@@ -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 Legend } from '@arcgis/core/widgets/Legend.js';
 import { PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
@@ -9,8 +9,8 @@ declare const useLegendWidget: (component: LitElement & Pick<Legend, "icon" | "l
     state?: unknown;
     viewModel?: __esri.LegendViewModel | undefined;
     closed?: boolean;
-    icon: import('@arcgis/components-utils').Nil | string;
-    label: import('@arcgis/components-utils').Nil | string;
+    icon: import('@arcgis/toolkit/type').nil | string;
+    label: import('@arcgis/toolkit/type').nil | string;
     referenceElement?: ArcgisReferenceElement | string;
     position: __esri.UIPosition;
     arcgisReady: import('@arcgis/lumina').EventEmitter;
@@ -97,6 +97,11 @@ export declare class ArcgisLegend extends LitElement {
     legendStyle: string | __esri.LegendStyle;
     /** @default "bottom-left" */
     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;
     /**
      * If a layer uses a unique value render, only features that satisfy the layer's
@@ -129,7 +134,7 @@ export declare class ArcgisLegend 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>;
 }
 export {};

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

@@ -3,10 +3,10 @@ import { usePropertyChange as t } from "@arcgis/lumina/controllers";
 import i from "@arcgis/core/widgets/Legend.js";
 import { LitElement as s, createEvent as r, noShadowRoot as a } from "@arcgis/lumina";
 import { m as o } from "../../chunks/useWidget.js";
-import { css as n } from "@lit/reactive-element/css-tag.js";
+import { css as n } from "lit";
 /*! 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.8 */
+v4.34.0-next.81 */
 const l = n`@layer{arcgis-legend{display:block}}`, d = o(i);
 class h extends s {
   constructor() {

package/dist/components/arcgis-line-of-sight/customElement.d.ts

@@ -1,7 +1,6 @@
 /// <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 LineOfSightAnalysis } from '@arcgis/core/analysis/LineOfSightAnalysis.js';
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
 import { ArcgisReferenceElement } from '../../utils/component-utils';
 import { default as LineOfSightViewModel } from './LineOfSightViewModel';
@@ -10,28 +9,79 @@ declare const useViewModel: (component: LitElement & Pick<LineOfSightViewModel,
 /**
  * The Line Of Sight component is a 3D analysis tool that allows you to perform
  * [line of sight visibility analysis](https://developers.arcgis.com/javascript/latest/api-reference/esri-analysis-LineOfSightAnalysis.html)
- * in a 3D view. Visibility between a given observer and multiple target points is calculated against the currently
- * displayed content in the view, including ground, integrated meshes, and 3D objects such as buildings or trees.
+ * in a [Scene](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/). Visibility between a given observer and multiple target points is calculated against the currently
+ * displayed content in the view, including the ground, integrated meshes, and 3D objects such as buildings or trees.
  *
- * The results from the analysis are displayed as lines, where the visible part, indicating what the observer can see,
- * is colored green. Visible targets are displayed with a green sphere and a fully green line of sight.
- * The spheres marking occluded targets are displayed red, as are the occluded parts of the lines of sight.
+ * ![line-of-sight](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/line-of-sight.png)
+ *
+ * The analysis results are displayed as colored lines, where areas visible to the observer are
+ * shown green and occluded parts are marked in red. Also, the color of the target points indicates their visibility.
  * When the line of sight cannot be calculated, it will be displayed with a gray color. This may happen if either
  * the target or the observer is not in the view.
  *
- * When creating a new line of sight analysis with the component, the first click in the scene creates the
+ * When creating a new line of sight analysis, the first click in the Scene creates the
  * [observer](https://developers.arcgis.com/javascript/latest/api-reference/esri-analysis-LineOfSightAnalysisObserver.html)
- * and any further clicks place the [targets](https://developers.arcgis.com/javascript/latest/api-reference/esri-analysis-LineOfSightAnalysisTarget.html).
- * Both, observer and target points, can be moved by dragging them. Additionally, the target points can be removed with a right click.
+ * and subsequent clicks place the [targets](https://developers.arcgis.com/javascript/latest/api-reference/esri-analysis-LineOfSightAnalysisTarget.html).
+ * Both the observer and target points can be moved by dragging. Additionally, the target points can be removed with a right click.
+ *
+ * **Known limitation**
+ *
+ * Line Of Sight is only supported in a 3D [Scene](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/) component.
+ *
+ * **See also**
+ *
+ * - [LineOfSightAnalysis](https://developers.arcgis.com/javascript/latest/api-reference/esri-analysis-LineOfSightAnalysis.html)
+ * - [Sample - Line of sight component](https://developers.arcgis.com/javascript/latest/sample-code/line-of-sight/)
+ * - [Sample - Analysis objects](https://developers.arcgis.com/javascript/latest/sample-code/analysis-objects/)
  *
  * [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-line-of-sight/)
  */
 export declare class ArcgisLineOfSight extends LitElement {
     /**
-     * The [line of sight analysis](https://developers.arcgis.com/javascript/latest/api-reference/esri-analysis-LineOfSightAnalysis.html)
-     * object being created by the component.
+     * The [LineOfSightAnalysis](https://developers.arcgis.com/javascript/latest/api-reference/esri-analysis-LineOfSightAnalysis.html)
+     * created or modified by the component.
+     *
+     * When connecting the Line Of Sight 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 lineOfSightAnalysis = new LineOfSightAnalysis({
+     *   observer: new LineOfSightAnalysisObserver({
+     *         position: new Point({
+     *         spatialReference: { latestWkid: 3857, wkid: 102100 },
+     *         x: -13624828.3377593,
+     *         y: 4550305.319405007,
+     *         z: 105.55410975124687
+     *         }),
+     *   }),
+     *   targets: [ new LineOfSightAnalysisTarget({
+     *         position: new Point({
+     *         spatialReference: { latestWkid: 3857, wkid: 102100 },
+     *         x: -13624944.17687458,
+     *         y: 4550420.577689567,
+     *         z: 0
+     *         }),
+     *   })
+     * ]
+     * });
+     * // Get the Scene and Line Of Sight component and wait until they are ready.
+     * const viewElement = document.querySelector("arcgis-scene");
+     * await viewElement.viewOnReady();
+     * const lineOfSight = document.querySelector("arcgis-line-of-sight");
+     * await lineOfSight.componentOnReady();
+     * // Add the analysis to the Scene component.
+     * viewElement.analyses.add(lineOfSightAnalysis);
+     * // Connect the analysis to the component:
+     * lineOfSight.analysis = lineOfSightAnalysis;
+     * ```
      */
-    get analysis(): LineOfSightAnalysis;
+    analysis: __esri.LineOfSightAnalysis;
     /**
      * 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
@@ -52,10 +102,19 @@ export declare class ArcgisLineOfSight extends LitElement {
     icon?: HTMLCalciteIconElement["icon"];
     /** 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;
+    /**
+     * 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;
     /**
      * The component's state. The values mean the following:
@@ -68,25 +127,22 @@ export declare class ArcgisLineOfSight extends LitElement {
     get state(): "created" | "creating" | "disabled" | "ready";
     /** Clear the current analysis results. After calling this method, the user can set a new observer and targets. */
     clear(): Promise<void>;
-    /**
-     * After [stop()](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-line-of-sight/#stop)
-     * was called, this method allows to continue the line of sight analysis and add more targets.
-     */
+    /** After [stop()](#stop) was called, this method allows to continue the line of sight analysis and add more targets. */
     continue(): Promise<void>;
     /** Permanently destroy the component. */
     destroy(): Promise<void>;
     /** Start a new line of sight analysis. */
     start(): Promise<void>;
     /**
-     * Stop the current line of sight analysis, keeping the results in the view.
-     * Users can still interact with existing targets and the observer but they cannot place new target points.
+     * Stop the current placing of line of sight analysis. Any lines added this far are kept  in the view.
+     * Users can still interact with existing targets and the observer, but they cannot place new target points.
      */
     stop(): 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>;
     private _messages;
 }

package/dist/components/arcgis-line-of-sight/customElement.js

@@ -1,8 +1,7 @@
 import { c as f } from "../../chunks/runtime.js";
-import { html as l } from "lit-html";
+import { css as y, html as l } from "lit";
 import { usePropertyChange as m } from "@arcgis/lumina/controllers";
-import { LitElement as y, createEvent as v, noShadowRoot as _, safeClassMap as n } from "@arcgis/lumina";
-import { css as w } from "@lit/reactive-element/css-tag.js";
+import { LitElement as v, createEvent as _, noShadowRoot as w, safeClassMap as r } from "@arcgis/lumina";
 import { g } from "../../chunks/globalCss.js";
 import { u as $ } from "../../chunks/useT9n.js";
 import { m as b } from "../../chunks/useViewModel.js";
@@ -11,8 +10,8 @@ import x from "@arcgis/core/analysis/LineOfSightAnalysis.js";
 import { property as O, subclass as A } from "@arcgis/core/core/accessorSupport/decorators.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.8 */
-const C = w`@layer{arcgis-line-of-sight{display:block}.arcgis-line-of-sight__container{display:flex;position:relative;flex-flow:column;gap:var(--calcite-spacing-md);padding:var(--esri-widget-padding);overflow-y:auto}.arcgis-line-of-sight__error{color:var(--calcite-color-status-danger)}.arcgis-line-of-sight__hint{display:flex;flex-direction:column;gap:var(--calcite-spacing-md)}.arcgis-line-of-sight__error,.arcgis-line-of-sight__hint{overflow:hidden;animation:arcgis-line-of-sight-fade-in .25s ease-in-out;p{margin:0;padding:0}}.arcgis-line-of-sight__actions{display:flex;flex-flow:column;gap:var(--calcite-spacing-xxs);justify-content:center}@keyframes arcgis-line-of-sight-fade-in{0%{opacity:0}25%{opacity:0}to{opacity:1}}}`, a = "arcgis-line-of-sight", r = {
+v4.34.0-next.81 */
+const C = y`@layer{arcgis-line-of-sight{display:block}.arcgis-line-of-sight__container{display:flex;position:relative;flex-flow:column;gap:var(--calcite-spacing-md);padding:var(--esri-widget-padding);overflow-y:auto}.arcgis-line-of-sight__error{color:var(--calcite-color-status-danger)}.arcgis-line-of-sight__hint{display:flex;flex-direction:column;gap:var(--calcite-spacing-md)}.arcgis-line-of-sight__error,.arcgis-line-of-sight__hint{overflow:hidden;animation:arcgis-line-of-sight-fade-in .25s ease-in-out;p{margin:0;padding:0}}.arcgis-line-of-sight__actions{display:flex;flex-flow:column;gap:var(--calcite-spacing-xxs);justify-content:center}@keyframes arcgis-line-of-sight-fade-in{0%{opacity:0}25%{opacity:0}to{opacity:1}}}`, a = "arcgis-line-of-sight", n = {
   base: a,
   actions: `${a}__actions`,
   container: `${a}__container`,
@@ -22,8 +21,8 @@ const C = w`@layer{arcgis-line-of-sight{display:block}.arcgis-line-of-sight__con
   newAnalysisButton: `${a}__new-analysis-button`
 };
 var S = Object.defineProperty, D = Object.getOwnPropertyDescriptor, u = (t, e, i, o) => {
-  for (var s = o > 1 ? void 0 : o ? D(e, i) : e, d = t.length - 1, p; d >= 0; d--)
-    (p = t[d]) && (s = (o ? p(e, i, s) : p(s)) || s);
+  for (var s = o > 1 ? void 0 : o ? D(e, i) : e, d = t.length - 1, h; d >= 0; d--)
+    (h = t[d]) && (s = (o ? h(e, i, s) : h(s)) || s);
   return o && s && S(e, i, s), s;
 };
 let c = class extends M {
@@ -40,7 +39,7 @@ let c = class extends M {
     this.analysis.observer = null, this.analysis.targets.removeAll();
   }
   async place(t) {
-    return await this.analysisView?.place(t);
+    await this.analysisView?.place(t);
   }
 };
 u([
@@ -50,22 +49,19 @@ c = u([
   A("esri.components.LineOfSight.LineOfSightViewModel")
 ], c);
 const L = b(c);
-class V extends y {
+class V extends v {
   constructor() {
-    super(...arguments), this.viewModel = L(this), this._messages = $({ blocking: !0 }), this.view = this.viewModel.view, this.autoDestroyDisabled = !1, this.icon = "line-of-sight", this.position = "bottom-left", this.arcgisPropertyChange = m()("analysis", "state"), this.arcgisReady = v();
+    super(...arguments), this.viewModel = L(this), this._messages = $({ blocking: !0 }), this.view = this.viewModel.view, this.analysis = this.viewModel.analysis, this.autoDestroyDisabled = !1, this.icon = "line-of-sight", this.position = "bottom-left", this.arcgisPropertyChange = m()("analysis", "state"), this.arcgisReady = _();
   }
   static {
-    this.properties = { analysis: 32, autoDestroyDisabled: 5, icon: 3, label: 1, messageOverrides: 0, position: 1, referenceElement: 1, state: 32, _supported: 16 };
+    this.properties = { analysis: 0, autoDestroyDisabled: 5, icon: 3, label: 1, messageOverrides: 0, position: 1, referenceElement: 1, state: 35, _supported: 16 };
   }
   static {
-    this.shadowRootOptions = _;
+    this.shadowRootOptions = w;
   }
   static {
     this.styles = C;
   }
-  get analysis() {
-    return this.viewModel.analysis;
-  }
   get state() {
     return this.viewModel.state;
   }
@@ -88,27 +84,27 @@ class V extends y {
     this.viewModel.stop();
   }
   render() {
-    return l`<div class=${n({
-      [r.base]: !0,
+    return l`<div class=${r({
+      [n.base]: !0,
       [g.widget]: !0,
       [g.panel]: !0
     })} role=presentation>${this._renderContainerNode()}</div>`;
   }
   _renderContainerNode() {
     if (!this._supported)
-      return l`<div class=${n(r.error)}><p>${this._messages.unsupported}</p></div>`;
+      return l`<div class=${r(n.error)}><p>${this._messages.unsupported}</p></div>`;
     const e = this.viewModel.state, i = e === "creating";
-    return l`<div class=${n(r.container)}>${i ? l`<div class=${n(r.hint)}><p class=${n(r.hintText)}>${this._messages.hint}</p></div>` : null}<div class=${n(r.actions)}>${e === "creating" ? h({ onClick: () => {
+    return l`<div class=${r(n.container)}>${i ? l`<div class=${r(n.hint)}><p class=${r(n.hintText)}>${this._messages.hint}</p></div>` : null}<div class=${r(n.actions)}>${e === "creating" ? p({ onClick: () => {
       this.stop();
-    }, children: this._messages.done }) : null}${e === "created" ? h({ onClick: () => {
+    }, children: this._messages.done }) : null}${e === "created" ? p({ onClick: () => {
       this.continue();
-    }, children: this._messages.continueAnalysis }) : null}${h({ className: r.newAnalysisButton, onClick: () => {
+    }, children: this._messages.continueAnalysis }) : null}${p({ className: n.newAnalysisButton, onClick: () => {
       this.start();
     }, primary: !0, disabled: e === "disabled", children: this._messages.newAnalysis })}</div></div>`;
   }
 }
-function h({ className: t, onClick: e, primary: i, disabled: o, children: s }) {
-  return l`<calcite-button .appearance=${i ? "solid" : "outline-fill"} class=${n(t)} .disabled=${o} @click=${e}>${s}</calcite-button>`;
+function p({ className: t, onClick: e, primary: i, disabled: o, children: s }) {
+  return l`<calcite-button .appearance=${i ? "solid" : "outline-fill"} class=${r(t)} .disabled=${o} @click=${e}>${s}</calcite-button>`;
 }
 f("arcgis-line-of-sight", V);
 export {

package/dist/components/arcgis-link-chart/customElement.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
-/// <reference types="../../index.d.ts" />
+/// <reference path="../../index.d.ts" />
 import { Use } from '@arcgis/lumina/controllers';
-import { Nil } from '@arcgis/components-utils';
+import { nil } from '@arcgis/toolkit/type';
 import { default as LinkChartView } from '@arcgis/core/views/LinkChartView.js';
 import { default as WebLinkChart } from '@arcgis/core/WebLinkChart.js';
 import { PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 
-declare const useWebLinkChart: (component: LitElement & Omit<Pick<WebLinkChart, "basemap" | "ground" | "layers" | "bookmarks" | "tables" | "widgets" | "applicationProperties" | "authoringApp" | "authoringAppVersion" | "floorInfo" | "initialViewProperties" | "linkChartProperties" | "mapType" | "portalItem" | "thumbnailUrl">, "basemap" | "ground" | ("destroyed" | "initialized" | "declaredClass" | "set" | "watch" | "addHandles" | "removeHandles" | "hasHandles") | "layers" | "bookmarks" | "tables" | "presentation" | "knowledgeGraph" | "widgets" | "applicationProperties" | "authoringApp" | "authoringAppVersion" | "entityCount" | "floorInfo" | "geotriggersInfo" | "initialViewProperties" | "linkChartProperties" | "mapType" | "portalItem" | "relationshipCount" | "thumbnailUrl"> & {
+declare const useWebLinkChart: (component: LitElement & Omit<Pick<WebLinkChart, "basemap" | "focusAreas" | "ground" | "layers" | "bookmarks" | "applicationProperties" | "authoringApp" | "authoringAppVersion" | "floorInfo" | "initialViewProperties" | "linkChartProperties" | "mapType" | "portalItem" | "tables" | "thumbnailUrl" | "widgets">, "basemap" | "ground" | ("destroyed" | "initialized" | "declaredClass" | "set" | "watch" | "addHandles" | "removeHandles" | "hasHandles") | "layers" | "bookmarks" | "applicationProperties" | "authoringApp" | "authoringAppVersion" | "entityCount" | "floorInfo" | "geotriggersInfo" | "initialViewProperties" | "knowledgeGraph" | "linkChartProperties" | "mapType" | "portalItem" | "presentation" | "relationshipCount" | "tables" | "thumbnailUrl" | "widgets"> & {
     autoDestroyDisabled: boolean;
     destroy: () => Promise<void>;
 }) => WebLinkChart;
@@ -66,7 +66,7 @@ export declare class ArcgisLinkChart extends LitElement {
      * For animating the view, see this component's goTo() method.
      */
     get center(): __esri.LinkChartView["center"];
-    set center(newValue: __esri.LinkChartView["center"] | Nil | number[] | string);
+    set center(newValue: __esri.LinkChartView["center"] | nil | number[] | string);
     /** Specifies constraints to scale, zoom, and rotation that may be applied to the LinkChartView. */
     constraints: __esri.View2DConstraints;
     /**
@@ -89,13 +89,14 @@ export declare class ArcgisLinkChart extends LitElement {
     fatalError: nullish | __esri.Error;
     /**
      * Allows for adding graphics directly to the default graphics in the View.
-     * Example:
-     * ```
+     *
+     * @example
+     * ```js
      * // Adds a graphic to the View
      * graphics.add(pointGraphic);
      * ```
-     * Example:
-     * ```
+     * @example
+     * ```js
      * // Removes a graphic from the View
      * graphics.remove(pointGraphic);
      * ```
@@ -117,8 +118,8 @@ export declare class ArcgisLinkChart extends LitElement {
      *
      * To configure the portal url you must set the [`portalUrl` property on `config`](https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html#portalUrl) before the Link Chart component loads.
      */
-    get itemId(): Nil | string;
-    set itemId(newValue: Nil | string);
+    get itemId(): nil | string;
+    set itemId(newValue: nil | string);
     /**
      * A collection containing a hierarchical list of all the created
      * [LayerViews](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-layers-LayerView.html) of the
@@ -131,7 +132,7 @@ export declare class ArcgisLinkChart extends LitElement {
      * An instance of a [WebLinkChart](https://developers.arcgis.com/javascript/latest/api-reference/esri-WebLinkChart.html)
      * object to display in the view.
      */
-    map: WebLinkChart;
+    map: WebLinkChart | nullish;
     /**
      * Indication whether the view is being navigated (for example when panning).
      *
@@ -270,14 +271,14 @@ export declare class ArcgisLinkChart extends LitElement {
     set zoom(newValue: number);
     /**
      * @deprecated
-     * since 4.33. Use `element.map.add(layer)` instead.
+     * since 4.33, use `element.map.add(layer)` instead.
      *
      * Adds a layer to the map layers collection.
      */
     addLayer(layer: __esri.Layer | Promise<any>, index?: number): Promise<void>;
     /**
      * @deprecated
-     * since 4.33. Use `element.map.addMany([layer])` instead.
+     * since 4.33, use `element.map.addMany([layer])` instead.
      *
      * Adds a layer or array of layers to the map layers collection.
      */
@@ -300,8 +301,17 @@ export declare class ArcgisLinkChart extends LitElement {
     /** Gets the LayerView created on the view for the given layer. */
     whenLayerView(layer: __esri.Layer): Promise<__esri.LayerView>;
     /**
-     * `viewOnReady()` may be leveraged once an instance of the component is created and ready.
-     * This method takes two input parameters: a `callback` function and an `errback` function.
+     * `viewOnReady()` may be leveraged once an instance of the component and its underlying [view](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-link-chart/#view) is created and ready.
+     * This method takes two input parameters, a `callback` function and an `errback` function, and returns a promise. The `callback` executes when the promise resolves, and the `errback` executes if the promise is rejected.
+     *
+     * @since 4.33
+     * @see [Watch for changes - waiting for components or views to be ready](https://developers.arcgis.com/javascript/latest/watch-for-changes/#waiting-for-components-or-views-to-be-ready)
+     * @example
+     * ```js
+     * const viewElement = document.querySelector("arcgis-link-chart");
+     * await viewElement.viewOnReady();
+     * // The view is now ready to be used.
+     * ```
      */
     viewOnReady(callback?: () => void, errback?: (error: Error) => void): Promise<void>;
     /**
@@ -349,7 +359,7 @@ export declare class ArcgisLinkChart extends LitElement {
      */
     readonly arcgisViewReadyChange: TargetedEvent<this, void>;
     readonly _setterTypes: {
-        center?: __esri.LinkChartView["center"] | Nil | number[] | string;
+        center?: __esri.LinkChartView["center"] | nil | number[] | string;
     };
 }
 export {};

package/dist/components/arcgis-link-chart/customElement.js

@@ -5,11 +5,11 @@ import o from "@arcgis/core/views/LinkChartView.js";
 import w from "@arcgis/core/WebLinkChart.js";
 import { LitElement as c, createEvent as a, noShadowRoot as p } from "@arcgis/lumina";
 import { c as v, i as l } from "../../chunks/component-utils.js";
-import { css as m } from "@lit/reactive-element/css-tag.js";
+import { css as m } from "lit";
 /*! 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.8 */
-const d = m`@layer{arcgis-link-chart{display:block;height:100%;.esri-view{height:100%;width:100%}}}`, g = r(
+v4.34.0-next.81 */
+const g = m`@layer{arcgis-link-chart{display:block;height:100%;.esri-view{height:100%;width:100%}}}`, d = r(
   w,
   /**
    * Since omitProps is only needed for typing, not runtime, `{} as { ... }` is
@@ -23,18 +23,18 @@ const d = m`@layer{arcgis-link-chart{display:block;height:100%;.esri-view{height
 ), y = r(o, {});
 class u extends c {
   constructor() {
-    super(), this._map = g(this), this.view = y(this), this.allLayerViews = this.view.allLayerViews, this.autoDestroyDisabled = !1, this.background = this.view.background, this.basemap = this._map.basemap, this.basemapView = this.view.basemapView, this.constraints = this.view.constraints, this.displayFilterDisabled = this.view.displayFilterEnabled, this.fatalError = this.view.fatalError, this.graphics = this.view.graphics, this.highlights = this.view.highlights, this.layerViews = this.view.layerViews, this.magnifier = this.view.magnifier, this.map = this.view.map, this.navigation = this.view.navigation, this.padding = this.view.padding, this.popup = this.view.popup, this.popupDisabled = this.view.popupEnabled, this.ready = this.view.ready, this.resizeAlign = this.view.resizeAlign, this.resolution = this.view.resolution, this.rotation = this.view.rotation, this.spatialReference = this.view.spatialReference, this.suspended = this.view.suspended, this.theme = this.view.theme, this.timeExtent = this.view.timeExtent, this.timeZone = this.view.timeZone, this.updating = this.view.updating, this.arcgisViewChange = a(), this.arcgisViewClick = e(() => this.view, "click"), this.arcgisViewDoubleClick = e(() => this.view, "double-click"), this.arcgisViewDrag = e(() => this.view, "drag"), this.arcgisViewHold = e(() => this.view, "hold"), this.arcgisViewImmediateClick = e(() => this.view, "immediate-click"), this.arcgisViewImmediateDoubleClick = e(() => this.view, "immediate-double-click"), this.arcgisViewKeyDown = e(() => this.view, "key-down"), this.arcgisViewKeyUp = e(() => this.view, "key-up"), this.arcgisViewLayerviewCreate = e(() => this.view, "layerview-create"), this.arcgisViewLayerviewCreateError = e(() => this.view, "layerview-create-error"), this.arcgisViewLayerviewDestroy = e(() => this.view, "layerview-destroy"), this.arcgisViewMouseWheel = e(() => this.view, "mouse-wheel"), this.arcgisViewPointerDown = e(() => this.view, "pointer-down"), this.arcgisViewPointerEnter = e(() => this.view, "pointer-enter"), this.arcgisViewPointerLeave = e(() => this.view, "pointer-leave"), this.arcgisViewPointerMove = e(() => this.view, "pointer-move"), this.arcgisViewPointerUp = e(() => this.view, "pointer-up"), this.arcgisViewReadyChange = a(), this.view.ui = {
+    super(), this._map = d(this), this.view = y(this), this.allLayerViews = this.view.allLayerViews, this.autoDestroyDisabled = !1, this.background = this.view.background, this.basemap = this._map.basemap, this.basemapView = this.view.basemapView, this.constraints = this.view.constraints, this.displayFilterDisabled = this.view.displayFilterEnabled, this.fatalError = this.view.fatalError, this.graphics = this.view.graphics, this.highlights = this.view.highlights, this.layerViews = this.view.layerViews, this.magnifier = this.view.magnifier, this.map = this.view.map, this.navigation = this.view.navigation, this.padding = this.view.padding, this.popup = this.view.popup, this.popupDisabled = this.view.popupEnabled, this.ready = this.view.ready, this.resizeAlign = this.view.resizeAlign, this.resolution = this.view.resolution, this.rotation = this.view.rotation, this.spatialReference = this.view.spatialReference, this.suspended = this.view.suspended, this.theme = this.view.theme, this.timeExtent = this.view.timeExtent, this.timeZone = this.view.timeZone, this.updating = this.view.updating, this.arcgisViewChange = a(), this.arcgisViewClick = e(() => this.view, "click"), this.arcgisViewDoubleClick = e(() => this.view, "double-click"), this.arcgisViewDrag = e(() => this.view, "drag"), this.arcgisViewHold = e(() => this.view, "hold"), this.arcgisViewImmediateClick = e(() => this.view, "immediate-click"), this.arcgisViewImmediateDoubleClick = e(() => this.view, "immediate-double-click"), this.arcgisViewKeyDown = e(() => this.view, "key-down"), this.arcgisViewKeyUp = e(() => this.view, "key-up"), this.arcgisViewLayerviewCreate = e(() => this.view, "layerview-create"), this.arcgisViewLayerviewCreateError = e(() => this.view, "layerview-create-error"), this.arcgisViewLayerviewDestroy = e(() => this.view, "layerview-destroy"), this.arcgisViewMouseWheel = e(() => this.view, "mouse-wheel"), this.arcgisViewPointerDown = e(() => this.view, "pointer-down"), this.arcgisViewPointerEnter = e(() => this.view, "pointer-enter"), this.arcgisViewPointerLeave = e(() => this.view, "pointer-leave"), this.arcgisViewPointerMove = e(() => this.view, "pointer-move"), this.arcgisViewPointerUp = e(() => this.view, "pointer-up"), this.arcgisViewReadyChange = a(), this.view.ui = {
       components: ["attribution"]
     };
   }
   static {
-    this.properties = { _map: 16, view: 32, allLayerViews: 0, autoDestroyDisabled: 5, background: 0, basemap: 1, basemapView: 0, center: 1, constraints: 0, displayFilterDisabled: 5, extent: 0, fatalError: 0, graphics: 0, highlights: 0, interacting: 32, itemId: 3, layerViews: 0, magnifier: 0, map: 0, navigating: 32, navigation: 0, padding: 0, popup: 0, popupDisabled: 5, ready: 4, resizeAlign: 1, resolution: 8, rotation: 9, scale: 9, spatialReference: 0, stationary: 32, suspended: 7, theme: 0, timeExtent: 0, timeZone: 1, updating: 4, viewpoint: 0, zoom: 9 };
+    this.properties = { _map: 16, view: 32, allLayerViews: 0, autoDestroyDisabled: 5, background: 0, basemap: 1, basemapView: 0, center: 1, constraints: 0, displayFilterDisabled: 5, extent: 0, fatalError: 0, focusAreas: 0, graphics: 0, highlights: 0, interacting: 32, itemId: 3, layerViews: 0, magnifier: 0, map: 0, navigating: 32, navigation: 0, padding: 0, popup: 0, popupDisabled: 5, ready: 4, resizeAlign: 1, resolution: 8, rotation: 9, scale: 9, spatialReference: 0, stationary: 32, suspended: 7, theme: 0, timeExtent: 0, timeZone: 1, updating: 4, viewpoint: 0, zoom: 9 };
   }
   static {
     this.shadowRootOptions = p;
   }
   static {
-    this.styles = d;
+    this.styles = g;
   }
   get center() {
     return this.view.center;
@@ -49,6 +49,15 @@ class u extends c {
   set extent(i) {
     this.extent?.equals(i) || (this.view.extent = i);
   }
+  get focusAreas() {
+    return this.map ? this.map?.focusAreas : {
+      areas: [],
+      style: "bright"
+    };
+  }
+  set focusAreas(i) {
+    this.map && (this.map.focusAreas = i);
+  }
   get interacting() {
     return this.view.interacting;
   }
@@ -83,10 +92,10 @@ class u extends c {
     this.view.zoom = i;
   }
   async addLayer(i, t) {
-    this.map.add(i, t);
+    this.map?.add(i, t);
   }
   async addLayers(i, t) {
-    this.map.addMany(i, t);
+    this.map?.addMany(i, t);
   }
   async closePopup() {
     this.view.closePopup();
@@ -121,7 +130,9 @@ class u extends c {
   }
   loaded() {
     this.map ||= this._map, this.manager.onLifecycle(() => [
-      s(() => this.map, () => this._map = this.map, { initial: !0, sync: !0 }),
+      s(() => this.map, (i) => {
+        i && (this._map = i);
+      }, { initial: !0, sync: !0 }),
       s(() => this.view.stationary, () => this.arcgisViewChange.emit(), { initial: !0 }),
       s(() => this.view.ready, () => this.arcgisViewReadyChange.emit(), { initial: this.view.ready })
     ]);