@arcgis/map-components 5.2.0-next.1 → 5.2.0-next.100

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

@@ -0,0 +1,261 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as O } from "../../chunks/runtime.js";
+import { html as n } from "lit";
+import { repeat as A } from "lit/directives/repeat.js";
+import { keyed as I } from "lit/directives/keyed.js";
+import { createReactiveMap as C } from "@arcgis/core/applications/Components/featureUtils.js";
+import u from "@arcgis/core/core/Collection.js";
+import { on as L, watch as R } from "@arcgis/core/core/reactiveUtils.js";
+import N from "@arcgis/core/layers/list/CatalogItemCollection.js";
+import x from "@arcgis/core/layers/list/Item.js";
+import { LitElement as D, createEvent as d, renderElement as M, safeClassMap as b, nothing as _ } from "@arcgis/lumina";
+import { usePropertyChange as k } from "@arcgis/lumina/controllers";
+import { reEmitEvent as B } from "@arcgis/lumina/controllers/accessor";
+import { classes as S } from "@arcgis/toolkit/dom";
+import { generateGuid as G } from "@arcgis/toolkit/string";
+import { createRef as H, ref as g } from "lit/directives/ref.js";
+import { u as U } from "../../chunks/useT9n.js";
+import { m as V } from "../../chunks/useViewModel.js";
+import { s as v } from "../../chunks/component-utils.js";
+import { g as f } from "../../chunks/globalCss.js";
+import { g as T, b as j, r as q, s as z, e as J } from "../../chunks/layer-list-utils.js";
+import { ArcgisLayerListItem as K } from "../arcgis-layer-list-next/layer-list-item/customElement.js";
+import { s as Q, a as W } from "../../chunks/layer-list-next.js";
+import { c as X } from "../../chunks/css.js";
+const m = X, Y = (p) => {
+  const e = p?.type;
+  return e === "knowledge-graph" || e === "map-image" || e === "tile";
+}, Z = (p) => p?.type === "catalog", P = "nested", ee = u.ofType(x), te = V(N);
+class se extends D {
+  constructor() {
+    super(...arguments), this.#l = `operational-${G()}`, this.#e = null, this.#o = H(), this.#i = !1, this.#t = !1, this.messages = U(), this.#r = () => {
+      this._activeItem = null;
+    }, this.#n = (e) => {
+      if (this.visibilityAppearance !== "default")
+        return;
+      const t = Array.from(e.composedPath()).find((s) => s.classList?.contains(m.item));
+      this._activeItem = T(t);
+    }, this.#a = C(), this.#s = C(), this.#c = (e) => {
+      e && this.#b(e);
+    }, this.#h = (e) => {
+      e && this.#L(e);
+    }, this.#d = (e) => {
+      e && this.#v(e);
+    }, this.viewModel = te(this), this._activeItem = null, this._focusRootFlowItem = !1, this._focusPanelFlowItem = !1, this._focusLayerFlowItem = null, this.layerTablesEnabled = new u(["knowledge-graph"]), this.mapImageOptions = null, this.tileOptions = null, this.autoDestroyDisabled = !1, this.closed = !1, this.collapsed = !1, this.filterPlaceholder = "", this.filterText = "", this.headingLevel = 2, this.hideCatalogLayerList = !1, this.hideNoFilterResultsNotice = !1, this.hideNoItemsNotice = !1, this.hideStatusIndicators = !1, this.listItemCreatedFunction = this.viewModel.listItemCreatedFunction, this.listModeDisabled = this.viewModel.listModeDisabled, this.minFilterItems = j, this.openedLayerLists = new u(), this.openedLayers = new u(), this.selectedItems = new ee(), this.selectionMode = "none", this.showCloseButton = !1, this.showCollapseButton = !1, this.showErrors = !1, this.showFilter = !1, this.showHeading = !1, this.showTemporaryLayerIndicators = !1, this.state = this.viewModel.state, this.topLayerDisabled = !1, this.view = this.viewModel.view, this.visibilityAppearance = "default", this.arcgisCatalogItemsChange = d(), this.arcgisFilterChange = d(), this.arcgisOpenedLayersChange = d(), this.arcgisPropertyChange = k()("state"), this.arcgisReady = d(), this.arcgisSelectedItemsChange = d(), this.arcgisTriggerAction = B(() => this.viewModel, "trigger-action");
+  }
+  static {
+    this.properties = { _catalogLayerList: 16, _activeItem: 16, _focusRootFlowItem: 16, _focusPanelFlowItem: 16, _focusLayerFlowItem: 16, _totalItems: 16, _filterEnabled: 16, _visibleItems: 16, _openedPanelItems: 16, _renderedOpenLayerFlowItems: 16, layerTablesEnabled: 16, mapImageOptions: 16, tileOptions: 16, autoDestroyDisabled: 5, catalogItems: 0, catalogLayer: 0, catalogOptions: 0, closed: 5, collapsed: 5, filterPlaceholder: 1, filterPredicate: 0, filterText: 1, headingLevel: 9, hideCatalogLayerList: 5, hideNoFilterResultsNotice: 5, hideNoItemsNotice: 5, hideStatusIndicators: 5, knowledgeGraphOptions: 0, label: 1, listItemCreatedFunction: 0, listModeDisabled: 5, messageOverrides: 0, minFilterItems: 9, onCatalogOpen: 0, onTablesOpen: 0, openedLayerLists: 32, openedLayers: 32, referenceElement: 1, selectedItems: 0, selectionMode: 1, showCloseButton: 5, showCollapseButton: 5, showErrors: 5, showFilter: 5, showHeading: 5, showTemporaryLayerIndicators: 5, state: 32, topLayerDisabled: 5, view: 0, visibilityAppearance: 1 };
+  }
+  static {
+    this.styles = [Q, W];
+  }
+  #l;
+  #e;
+  #o;
+  #i;
+  #t;
+  #r;
+  #n;
+  #a;
+  #s;
+  #c;
+  #h;
+  #d;
+  get _totalItems() {
+    return this.catalogItems?.flatten((e) => e.children.filter((t) => t.layer?.type !== "catalog-dynamic-group")).length ?? 0;
+  }
+  get _filterEnabled() {
+    return this._totalItems >= this.minFilterItems && this.showFilter;
+  }
+  get _visibleItems() {
+    return this.catalogItems?.filter((e) => !e.hidden && (this.showErrors || !e.error));
+  }
+  get _openedPanelItems() {
+    return this._visibleItems.flatten((e) => e.children).filter(({ hidden: e, panel: t }) => !e && t?.open && !t.disabled && t.flowEnabled);
+  }
+  get _renderedOpenLayerFlowItems() {
+    const { openedLayers: e } = this;
+    return e.toArray().map((t, s) => this.#N(t, s === e.length - 1));
+  }
+  get catalogItems() {
+    return this.viewModel.catalogItems;
+  }
+  set catalogItems(e) {
+    this.viewModel.catalogItems = e;
+  }
+  get catalogLayer() {
+    return this.viewModel.catalogLayer;
+  }
+  set catalogLayer(e) {
+    this.viewModel.catalogLayer = e;
+  }
+  async destroy() {
+    this.#i || this.#t || (this.#i = !0, this.#e?.abort(), this.#e = null, await this.manager.destroy(), this.openedLayerLists.removeAll(), this.openedLayers.removeAll(), this.#s.clear(), this.#a.clear(), this.#t = !0, this.#i = !1);
+  }
+  loaded() {
+    this.manager.onLifecycle(() => [
+      L(() => this.openedLayers, "change", () => {
+        this.#w();
+      }),
+      L(() => this.viewModel.catalogItems, "change", () => {
+        q(this.selectedItems), this.arcgisCatalogItemsChange.emit();
+      }),
+      L(() => this.selectedItems, "change", () => this.arcgisSelectedItemsChange.emit()),
+      R(() => [this.filterPredicate, this.#o.value], () => z(this.#o.value, this.filterPredicate))
+    ]);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.#e?.abort(), this.#e = null, !this.autoDestroyDisabled && !this.#t && !this.#i && this.destroy();
+  }
+  #u(e, t) {
+    return this.viewModel.triggerAction(e, t);
+  }
+  async #y(e, t) {
+    const s = this.#s.get(e);
+    if (s)
+      return s;
+    const a = e.type === "catalog" ? await this.#$(e) : await this.#C(e);
+    return t.aborted || !this.isConnected || this.#t ? (a?.destroy?.(), a) : (t.aborted || this.#s.set(e, a), a);
+  }
+  async #w() {
+    if (!this.isConnected || this.#t)
+      return;
+    const { openedLayers: e, openedLayerLists: t } = this;
+    this.#e?.abort();
+    const s = new AbortController(), { signal: a } = s;
+    this.#e = s, this.#s.forEach((r, c) => {
+      e.includes(c) || (r?.destroy?.(), this.#s.delete(c));
+    });
+    const o = await Promise.all(e.map((r) => this.#y(r, a)));
+    if (a.aborted || !this.isConnected || this.#t)
+      return;
+    t.removeAll(), t.addMany(o);
+    const i = t.at(-1), l = i && "catalogLayer" in i ? i : void 0;
+    this._catalogLayerList !== l && (this._catalogLayerList = l), this.arcgisOpenedLayersChange.emit();
+  }
+  #I(e) {
+    e.open = !1, this._focusRootFlowItem = !0;
+  }
+  #L(e) {
+    this._focusRootFlowItem && (this._focusRootFlowItem = !1, v(e));
+  }
+  #b(e) {
+    this._focusPanelFlowItem && (this._focusPanelFlowItem = !1, v(e));
+  }
+  #v(e) {
+    this._focusLayerFlowItem === e.dataset.layerUid && (this._focusLayerFlowItem = null, v(e));
+  }
+  async #$(e) {
+    const { headingLevel: t, catalogOptions: s, view: a, referenceElement: o, filterPlaceholder: i, listItemCreatedFunction: l, minFilterItems: r, selectionMode: c, visibilityAppearance: h } = this;
+    return M(n`<arcgis-catalog-layer-list-next .headingLevel=${t} .filterPlaceholder=${s?.filterPlaceholder ?? i} .listItemCreatedFunction=${s?.listItemCreatedFunction ?? l} .minFilterItems=${s?.minFilterItems ?? r} .selectionMode=${s?.selectionMode ?? c} .visibilityAppearance=${s?.visibilityAppearance ?? h} .showErrors=${s?.showErrors ?? this.showErrors} .showFilter=${s?.showFilter ?? this.showFilter} .hideStatusIndicators=${s?.hideStatusIndicators ?? this.hideStatusIndicators} .showTemporaryLayerIndicators=${s?.showTemporaryLayerIndicators ?? this.showTemporaryLayerIndicators} .messageOverrides=${this.messageOverrides} @arcgisReady=${(y) => y.stopPropagation()} .catalogLayer=${e} .view=${a} .referenceElement=${o} @catalogOpen=${this.#p} @tablesOpen=${this.#m}></arcgis-catalog-layer-list-next>`);
+  }
+  #F(e) {
+    switch (e.type) {
+      case "knowledge-graph":
+        return { ...this.knowledgeGraphOptions, tables: e.tables };
+      case "map-image":
+        return {
+          ...this.mapImageOptions,
+          tables: e.subtables
+        };
+      case "tile":
+        return {
+          ...this.tileOptions,
+          tables: e.subtables
+        };
+      default:
+        return null;
+    }
+  }
+  async #C(e) {
+    const { headingLevel: t, selectionMode: s, referenceElement: a, view: o } = this, i = this.#F(e);
+    return M(n`<arcgis-table-list-next .headingLevel=${i?.headingLevel ?? t} .selectionMode=${i?.selectionMode ?? s} .collapsed=${i?.collapsed} .filterPlaceholder=${i?.filterPlaceholder} .filterText=${i?.filterText} .label=${i?.label} .tables=${i?.tables} .view=${o} .referenceElement=${a} @arcgisReady=${(l) => l.stopPropagation()}></arcgis-table-list-next>`);
+  }
+  #m(e) {
+    if (this.onTablesOpen) {
+      this.onTablesOpen(e);
+      return;
+    }
+    const t = e.layer;
+    Y(t) && (this.openedLayers.push(t), this._focusLayerFlowItem = t.uid);
+  }
+  #p(e) {
+    if (this.onCatalogOpen) {
+      this.onCatalogOpen(e);
+      return;
+    }
+    const t = e.layer?.parent;
+    Z(t) && (this.openedLayers.push(t), this._focusLayerFlowItem = e.layer?.uid);
+  }
+  #M(e, t) {
+    t ? this.#a.set(e, t) : this.#a.delete(e);
+  }
+  #_(e, t) {
+    this.#u(e, t);
+  }
+  #T(e) {
+    const { selectionMode: t, selectedItems: s } = this;
+    if (t === "none")
+      return;
+    const a = e.target.selectedItems.map((o) => T(o)).filter(Boolean);
+    s.removeAll(), s.addMany(a);
+  }
+  render() {
+    const { state: e } = this, t = {
+      [f.hidden]: e === "loading",
+      [f.disabled]: e === "disabled"
+    };
+    return n`<div class=${b(S(f.widget, f.panel, t))}>${this._visibleItems?.length ? this.#E() : null}${this.#R()}</div>`;
+  }
+  #P(e) {
+    const t = this.#a, s = this.messages;
+    return e?.layer ? n`<calcite-tooltip overlay-positioning=fixed .referenceElement=${t.get(e.layer.uid)} .topLayerDisabled=${this.topLayerDisabled}>${s.layerIncompatibleTooltip}</calcite-tooltip>` : null;
+  }
+  #g(e) {
+    return e.incompatible ? this.#P(e) : e.children?.filter((t) => !t.hidden).toArray().map((t) => this.#g(t));
+  }
+  #E() {
+    return this._visibleItems?.toArray().map((e) => this.#g(e));
+  }
+  #f() {
+    return n`<div slot=message>${this.messages.noItemsToDisplay}</div>`;
+  }
+  #O() {
+    return this.hideNoItemsNotice ? null : n`<div class=${b(m.itemMessage)}><calcite-notice icon=information kind=info open width=full>${this.#f()}</calcite-notice></div>`;
+  }
+  #A() {
+    const { _openedPanelItems: e, openedLayers: t } = this;
+    return A(e.toArray(), ({ uid: s }) => s, (s, a) => {
+      const { uid: o, title: i, panel: l } = s, r = () => this.#I(l);
+      return n`<calcite-flow-item .description=${i} .heading=${l.title} .headingLevel=${this.headingLevel} .selected=${!t.length && a === e.length - 1} @calciteFlowItemBack=${(c) => {
+        c.preventDefault(), r();
+      }} ${g(this.#c)}><arcgis-layer-list-item-panel .item=${s} .view=${this.view}></arcgis-layer-list-item-panel><calcite-button appearance=transparent slot=footer-actions width=full @click=${r}>Back</calcite-button></calcite-flow-item>`;
+    });
+  }
+  #R() {
+    const { collapsed: e, _visibleItems: t, _filterEnabled: s, showCloseButton: a, showCollapseButton: o, showHeading: i, selectionMode: l, filterText: r, filterPlaceholder: c, openedLayers: h, _openedPanelItems: y } = this, $ = this.#l, F = this.label ?? this.messages.componentLabel ?? "", E = [
+      n`<calcite-flow-item .closable=${a} .closed=${this.closed} .collapsed=${e} .collapsible=${o} .heading=${i ? F : void 0} .headingLevel=${this.headingLevel} .selected=${!h.length && !y.length} @calciteFlowItemClose=${() => this.closed = !0} ${g(this.#h)}>${t?.length ? n`<calcite-list data-layer-type=${$ ?? _} .displayMode=${P} .filterEnabled=${s} .filterPlaceholder=${c} .filterProps=${J} .filterText=${s ? r : ""} .group=${$} .label=${F} @focusin=${this.#n} @focusout=${this.#r} selection-appearance=border .selectionMode=${l} @calciteListChange=${this.#T} @calciteListFilter=${(w) => {
+        this.filterText = w.currentTarget?.filterText ?? "", this.arcgisFilterChange.emit();
+      }} @mouseleave=${this.#r} @mouseover=${this.#n} ${g(this.#o)}>${t.toArray().map((w) => this.#x(w))}${s && !this.hideNoFilterResultsNotice ? n`<div class=${b(m.filterNoResults)} slot=filter-no-results><calcite-notice kind=info open width=full>${this.#f()}</calcite-notice></div>` : null}</calcite-list>` : this.#O()}</calcite-flow-item>`,
+      this.#A(),
+      this._renderedOpenLayerFlowItems
+    ];
+    return this.closed ? null : I("root-flow", n`<calcite-flow>${E}</calcite-flow>`);
+  }
+  #N(e, t) {
+    const { openedLayers: s } = this, a = e.title || this.messages.untitledLayer;
+    return I(e.uid, n`<calcite-flow-item data-layer-uid=${e.uid ?? _} .description=${a} .heading=${this.messages[e.type === "catalog" ? "catalogLayers" : "tables"]} .headingLevel=${this.headingLevel} .selected=${t} @calciteFlowItemBack=${(o) => {
+      o.preventDefault(), s.pop();
+      const i = s.at(-1);
+      i ? this._focusLayerFlowItem = i.uid : this._focusRootFlowItem = !0;
+    }} ${g(this.#d)}>${this.#s.get(e)}</calcite-flow-item>`);
+  }
+  #x(e, t, s) {
+    const { hideStatusIndicators: a, showCloseButton: o, showCollapseButton: i, showErrors: l, showFilter: r, showHeading: c, showTemporaryLayerIndicators: h } = this;
+    return I(e.uid, K({ activeItem: this._activeItem ?? void 0, css: { ...m, itemCatalogIcon: m.itemActionIcon }, displayMode: P, dragEnabled: !1, item: e, layerTablesEnabled: this.layerTablesEnabled, listModeDisabled: this.viewModel.listModeDisabled, messages: this.messages, parent: t, parentTitles: s, rootGroupUid: this.#l, selectedItems: this.selectedItems, selectionMode: this.selectionMode, visibilityAppearance: this.visibilityAppearance, hideStatusIndicators: a, showCloseButton: o, showCollapseButton: i, showErrors: l, showFilter: r, showHeading: c, showTemporaryLayerIndicators: h, handleAction: this.#_.bind(this), handleCatalogOpen: this.#p.bind(this), handleTablesOpen: this.#m.bind(this), handleTooltipReferenceChange: this.#M.bind(this), view: this.view }));
+  }
+}
+O("arcgis-catalog-layer-list-next", se);
+export {
+  se as ArcgisCatalogLayerListNext
+};

package/dist/components/arcgis-catalog-layer-list-next/index.js

@@ -0,0 +1,10 @@
+import ".//index.js";
+import "../arcgis-table-list-next/index.js";
+import "@esri/calcite-components/components/calcite-tooltip";
+import "@esri/calcite-components/components/calcite-notice";
+import "@esri/calcite-components/components/calcite-flow-item";
+import "../arcgis-layer-list-item-panel/index.js";
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-list";
+import "@esri/calcite-components/components/calcite-flow";
+export * from "./customElement.js";

package/dist/components/arcgis-catalog-layer-list-next/types.d.ts

@@ -0,0 +1,41 @@
+import type CatalogLayer from "@arcgis/core/layers/CatalogLayer.js";
+import type KnowledgeGraphLayer from "@arcgis/core/layers/KnowledgeGraphLayer.js";
+import type MapImageLayer from "@arcgis/core/layers/MapImageLayer.js";
+import type TileLayer from "@arcgis/core/layers/TileLayer.js";
+import type CatalogItemCollection from "@arcgis/core/layers/list/CatalogItemCollection.js";
+import type { useT9n } from "../../controllers/useT9n.js";
+import type { ArcgisTableList } from "../arcgis-table-list/customElement.js";
+import type { ArcgisCatalogLayerListNext } from "./customElement.js";
+
+/** The type used to override the default messages in the Catalog Layer List (next). */
+export type CatalogLayerListMessageOverrides = ReturnType<typeof useT9n<{
+    componentLabel: string;
+    noItemsToDisplay: string;
+    layerInvisibleAtScale: string;
+    layerInvisibleAtTime: string;
+    layerError: string;
+    untitledLayer: string;
+    layerVisibility: string;
+    showLayer: string;
+    hideLayer: string;
+    layerIncompatible: string;
+    layerIncompatibleTooltip: string;
+    temporary: string;
+    tables: string;
+    catalogLayers: string;
+}>>["_overrides"];
+
+/** The properties used to configure the Catalog Layer List (next). */
+export type CatalogLayerListOptions = Partial<Pick<ArcgisCatalogLayerListNext, "filterPlaceholder" | "hideStatusIndicators" | "minFilterItems" | "selectionMode" | "showErrors" | "showFilter" | "showTemporaryLayerIndicators" | "visibilityAppearance">>
+  & {
+  listItemCreatedFunction?: CatalogItemCollection["listItemCreatedFunction"];
+};
+
+/** Represents a layer that can be part of a flow in the Catalog Layer List (next). */
+export type FlowLayer = CatalogLayer | SubtablesLayer;
+
+/** @internal */
+export type FlowList = ArcgisCatalogLayerListNext | ArcgisTableList;
+
+/** @internal */
+export type SubtablesLayer = KnowledgeGraphLayer | MapImageLayer | TileLayer;

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

@@ -44,8 +44,8 @@ export abstract class ArcgisClipboard extends LitElement {
    */
   accessor referenceElement: ArcgisReferenceElement | string | undefined;
   /**
-   * 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 arcgis-clipboard component will be associated with a map or scene component rather than using the `view` property.
+   * 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 arcgis-clipboard component will be associated with a map or scene component rather than using the `view` property.
    */
   accessor view: MapView | SceneView | undefined;
   /** Emitted when the component associated with a map or scene view is ready to be interacted with. */

package/dist/components/arcgis-color-select/customElement.js

@@ -22,12 +22,6 @@ class v extends g {
   }
   #t;
   #e;
-  #i(e) {
-    (e.key === " " || e.key === "Enter") && this.#o(e);
-  }
-  #o(e) {
-    e.preventDefault(), e.stopPropagation(), this._open = !this._open;
-  }
   get color() {
     return this._color;
   }
@@ -35,6 +29,12 @@ class v extends g {
     const o = e instanceof i ? e : new i(e);
     o.equals(this._color) || (this._color = o);
   }
+  #i(e) {
+    (e.key === " " || e.key === "Enter") && this.#o(e);
+  }
+  #o(e) {
+    e.preventDefault(), e.stopPropagation(), this._open = !this._open;
+  }
   render() {
     const e = this._color.toCss(!0), [o, a, n, p] = this._color.toRgba(), r = d(this._messages?.ariaDescription ?? "", {
       label: this.label ?? this._messages?.label ?? "",

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

@@ -20,6 +20,15 @@ export abstract class ArcgisCompass extends LitElement {
    * prevent memory leaks.
    *
    * @default false
+   * @example
+   * ```html
+   * <arcgis-compass auto-destroy-disabled></arcgis-compass>
+   * ```
+   *
+   * ```js
+   * compassElement.autoDestroyDisabled = true;
+   * ```
+   * 
    */
   accessor autoDestroyDisabled: boolean;
   /**
@@ -81,8 +90,8 @@ export abstract class ArcgisCompass extends LitElement {
    */
   get state(): CompassState;
   /**
-   * 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 arcgis-compass component will be associated with a map or scene component rather than using the `view` property.
+   * 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 arcgis-compass component will be associated with a map or scene component rather than using the `view` property.
    */
   accessor view: MapView | SceneView | undefined;
   /**