@arcgis/map-components 5.1.0-next.94 → 5.1.0-next.96

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

@@ -1,13 +1,21 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { html as c } from "lit";
 import { keyed as W } from "lit/directives/keyed.js";
-import { isLayerFromCatalog as he } from "@arcgis/core/layers/catalog/catalogUtils.js";
-import { safeClassMap as d, safeStyleMap as Ie, nothing as r, renderElement as Ae } from "@arcgis/lumina";
+import { isLayerFromCatalog as Ae } from "@arcgis/core/layers/catalog/catalogUtils.js";
+import { safeClassMap as d, safeStyleMap as Ce, nothing as r, renderElement as Se } from "@arcgis/lumina";
 import { classes as P } from "@arcgis/toolkit/dom";
 import { createRef as X, ref as Y } from "lit/directives/ref.js";
-import { g as Ce, a as ie } from "../../../chunks/action-utils.js";
-import { g as Te, i as Z, l as Se, a as Me, c as xe, b as Le, d as Ee } from "../../../chunks/layer-list-utils.js";
-import { s as ke } from "../../../chunks/component-utils.js";
+import { g as Te, a as ie } from "../../../chunks/action-utils.js";
+import { h as Me, j as Z, l as xe, k as Le, n as Ee, o as ke, g as we } from "../../../chunks/layer-list-utils.js";
+import { s as Pe } from "../../../chunks/component-utils.js";
+const le = /* @__PURE__ */ new Map();
+function ae(i) {
+  return i ? le.get(i) ?? !1 : !1;
+}
+function De(i, e) {
+  const l = !(i.aria?.pressed ?? ae(e));
+  return i.aria = { ...i.aria, pressed: l }, e && le.set(e, l), l;
+}
 function D(i) {
   return i && "visibilityMode" in i ? i.visibilityMode : null;
 }
@@ -16,124 +24,126 @@ function ee(i, e) {
     return;
   D(e) === "exclusive" && i.visible || (i.visible = !i.visible);
 }
-function we(i, e) {
+function Fe(i, e) {
   i.panel.open = !i.panel.open, i.panel.open && e();
 }
-function Pe(i, e, a, u) {
-  i && a === e.layer?.uid && (ke(i), u?.(null));
+function Oe(i, e, l, u) {
+  i && l === e.layer?.uid && (Pe(i), u?.(null));
 }
-function De(i, e, a) {
-  a.type === "toggle" && (a.value = !a.value), i(a, e);
+function Re(i, e, l) {
+  l.type === "toggle" && (l.value = !l.value), i(l, e);
 }
-function Fe(i) {
-  return i.actionsSections.map((e) => e.filter((a) => a.visible));
+function Ve(i) {
+  return i.actionsSections.map((e) => e.filter((l) => l.visible));
 }
-function le(i, e) {
-  const { icon: a } = e;
-  if (a)
+function ne(i, e) {
+  const { icon: l } = e;
+  if (l)
     return null;
   const u = "image" in e ? e.image : void 0;
-  return u ? c`<span aria-hidden=true class=${d(P(i.itemActionIcon, { [i.itemActionImage]: !!u }))} style=${Ie(Ce(u))}></span>` : null;
+  return u ? c`<span aria-hidden=true class=${d(P(i.itemActionIcon, { [i.itemActionImage]: !!u }))} style=${Ce(Te(u))}></span>` : null;
 }
-function te(i, e, a) {
-  const { item: u, css: l, handleAction: y } = i, { active: A, disabled: f, title: g, type: C, indicator: v } = e, T = ie(e);
-  return c`<calcite-action .active=${C === "toggle" ? e.value : !1} data-action-id=${e.id ?? r} .disabled=${f} .icon=${T} .indicator=${v} .loading=${A} @click=${() => De(y, u, e)} scale=s slot=${(a ? void 0 : "actions-end") ?? r} .text=${g ?? ""} .textEnabled=${a} title=${g ?? void 0 ?? r}>${le(l, e)}</calcite-action>`;
+function te(i, e, l) {
+  const { item: u, css: a, handleAction: f } = i, { active: C, disabled: I, title: p, type: S, indicator: h } = e, T = ie(e);
+  return c`<calcite-action .active=${S === "toggle" ? e.value : !1} data-action-id=${e.id ?? r} .disabled=${I} .icon=${T} .indicator=${h} .loading=${C} @click=${() => Re(f, u, e)} scale=s slot=${(l ? void 0 : "actions-end") ?? r} .text=${p ?? ""} .textEnabled=${l} title=${p ?? void 0 ?? r}>${ne(a, e)}</calcite-action>`;
 }
-function Oe(i) {
-  const { item: e, parent: a, hideStatusIndicators: u, css: l, visibilityAppearance: y, hideCatalogLayerList: A, dragEnabled: f = !1, rootGroupUid: g, listModeDisabled: C = !1, selectionMode: v, displayMode: T, layerTablesEnabled: S, showErrors: ne, parentTitles: F, selectedItems: ae, activeItem: ce, handleCatalogOpen: oe, handleTablesOpen: se, selectedDragItemLayerUid: re, handleSelectedDragItemLayerUidChange: de, handlePanelOpen: ue, messages: n, setCurrentActiveItem: O, clearActiveItem: R } = i, b = X(), M = X(), p = e.title || ("untitledTable" in n ? n.untitledTable : n.untitledLayer ?? "");
+function Ge(i) {
+  const { item: e, parent: l, hideStatusIndicators: u, css: a, visibilityAppearance: f, hideCatalogLayerList: C, dragEnabled: I = !1, rootGroupUid: p, listModeDisabled: S = !1, selectionMode: h, displayMode: T, layerTablesEnabled: M, showErrors: ce, parentTitles: F, selectedItems: se, activeItem: oe, handleCatalogOpen: re, handleTablesOpen: de, selectedDragItemLayerUid: ue, handleSelectedDragItemLayerUidChange: me, handlePanelOpen: $e, messages: n, setCurrentActiveItem: O, clearActiveItem: R } = i, g = X(), x = X(), b = e.title || ("untitledTable" in n ? n.untitledTable : n.untitledLayer ?? "");
   let V = null;
-  u || (V = Ae(c`<arcgis-layer-list-item-indicator .messages=${n} .item=${e} .parent=${a} slot=content-end></arcgis-layer-list-item-indicator>`));
+  u || (V = Se(c`<arcgis-layer-list-item-indicator .messages=${n} .item=${e} .parent=${l} slot=content-end></arcgis-layer-list-item-indicator>`));
   let G = null;
   {
-    const { layer: t } = e, o = t && "persistenceEnabled" in t && (he(t) || !t.persistenceEnabled);
-    (i.showTemporaryLayerIndicators || i.showTemporaryTableIndicators) && o && (G = c`<calcite-icon class=${d(l.itemTemporaryIcon)} icon=temporary scale=s slot=content-start title=${n.temporary ?? r}></calcite-icon>`);
+    const { layer: t } = e, s = t && "persistenceEnabled" in t && (Ae(t) || !t.persistenceEnabled);
+    (i.showTemporaryLayerIndicators || i.showTemporaryTableIndicators) && s && (G = c`<calcite-icon class=${d(a.itemTemporaryIcon)} icon=temporary scale=s slot=content-start title=${n.temporary ?? r}></calcite-icon>`);
   }
   let H = null;
-  if ("visible" in e && "visibleToggle" in l && y) {
-    const t = D(a);
+  if ("visible" in e && "visibleToggle" in a && f) {
+    const t = D(l);
     if (t !== "inherited") {
-      const o = Te({
+      const s = Me({
         visible: e.visible,
         exclusive: t === "exclusive",
-        visibilityAppearance: y
-      }), s = y === "checkbox", m = n.layerVisibility;
-      H = c`<calcite-action class=${d(l.visibleToggle)} .icon=${s ? o : void 0} @click=${() => ee(e, a)} .slot=${s ? "actions-start" : "actions-end"} .text=${m ?? ""} title=${m ?? r}>${s ? null : c`<calcite-icon class=${d(P({
-        [l.visibleIcon]: t !== "exclusive" && e.visible
-      }))} .icon=${o} scale=s></calcite-icon>`}</calcite-action>`;
+        visibilityAppearance: f
+      }), o = f === "checkbox", m = n.layerVisibility, v = ae(e.layer?.id);
+      H = c`<calcite-action .aria=${{ pressed: v }} .active=${v} class=${d(a.visibleToggle)} .icon=${o ? s : void 0} @click=${(y) => {
+        De(y.currentTarget, e.layer?.id), ee(e, l);
+      }} .slot=${o ? "actions-start" : "actions-end"} .text=${m ?? ""} title=${m ?? r}>${o ? null : c`<calcite-icon class=${d(P({
+        [a.visibleIcon]: t !== "exclusive" && e.visible
+      }))} .icon=${s} scale=s></calcite-icon>`}</calcite-action>`;
     }
   }
   let U = null;
   {
     const t = e.panel;
-    t?.open && !t.disabled && !t.flowEnabled && (U = c`<div class=${d(l.itemContentBottom)} slot=content-bottom><arcgis-layer-list-item-panel .item=${e} .view=${i.view}></arcgis-layer-list-item-panel></div>`);
+    t?.open && !t.disabled && !t.flowEnabled && (U = c`<div class=${d(a.itemContentBottom)} slot=content-bottom><arcgis-layer-list-item-panel .item=${e} .view=${i.view}></arcgis-layer-list-item-panel></div>`);
   }
   let q = null;
   {
     const t = e.panel;
     if (t?.visible) {
-      const { open: o, title: s, disabled: m } = t, w = { icon: t.icon, image: t.image, indicator: !1 }, I = ie(w);
-      q = c`<calcite-action .active=${o} .disabled=${m} .icon=${I} @click=${() => we(e, ue)} slot=actions-end .text=${s ?? ""} title=${s ?? void 0 ?? r}>${le(l, t)}</calcite-action>`;
+      const { open: s, title: o, disabled: m } = t, v = { icon: t.icon, image: t.image, indicator: !1 }, y = ie(v);
+      q = c`<calcite-action .active=${s} .disabled=${m} .icon=${y} @click=${() => Fe(e, $e)} slot=actions-end .text=${o ?? ""} title=${o ?? void 0 ?? r}>${ne(a, t)}</calcite-action>`;
     }
   }
-  let B = null;
+  let j = null;
   {
-    const t = e.layer, o = t?.type === "catalog-footprint", s = t?.type === "sublayer" && Z(t, "footprints");
-    "itemCatalogIcon" in l && (o || s) && (B = c`<calcite-icon class=${d(l.itemCatalogIcon)} icon=footprint scale=s slot=content-start></calcite-icon>`);
+    const t = e.layer, s = t?.type === "catalog-footprint", o = t?.type === "sublayer" && Z(t, "footprints");
+    "itemCatalogIcon" in a && (s || o) && (j = c`<calcite-icon class=${d(a.itemCatalogIcon)} icon=footprint scale=s slot=content-start></calcite-icon>`);
   }
-  let N = null;
+  let B = null;
   {
-    const t = e.layer, o = t?.type === "catalog-dynamic-group", s = t?.type === "sublayer" && Z(t, "layers-in-view");
-    "itemCatalogIcon" in l && (o || s) && (N = c`<calcite-icon class=${d(l.itemCatalogIcon)} icon=catalog-dataset scale=s slot=content-start></calcite-icon>`);
+    const t = e.layer, s = t?.type === "catalog-dynamic-group", o = t?.type === "sublayer" && Z(t, "layers-in-view");
+    "itemCatalogIcon" in a && (s || o) && (B = c`<calcite-icon class=${d(a.itemCatalogIcon)} icon=catalog-dataset scale=s slot=content-start></calcite-icon>`);
   }
-  let _ = null;
+  let N = null;
   if ("visible" in e) {
     const t = e.layer;
-    !A && t?.type === "catalog-dynamic-group" && (_ = c`<calcite-action .disabled=${!t.visible} icon=chevron-right icon-flip-rtl @click=${() => oe?.(e)} scale=s slot=actions-end .text=${p ?? ""}></calcite-action>`);
+    !C && t?.type === "catalog-dynamic-group" && (N = c`<calcite-action .disabled=${!t.visible} icon=chevron-right icon-flip-rtl @click=${() => re?.(e)} scale=s slot=actions-end .text=${b ?? ""}></calcite-action>`);
   }
-  let j = null, x = !1;
+  let _ = null, L = !1;
   {
     const t = e.layer;
-    if (S && t)
+    if (M && t)
       switch (t.type) {
         case "knowledge-graph":
-          x = S.includes(t.type) && "tables" in t && !!t.tables?.length;
+          L = M.includes(t.type) && "tables" in t && !!t.tables?.length;
           break;
         case "map-image":
         case "tile":
-          x = S.includes(t.type) && "subtables" in t && !!t.subtables?.length;
+          L = M.includes(t.type) && "subtables" in t && !!t.subtables?.length;
           break;
       }
-    "itemTableIcon" in l && "visible" in e && "tables" in n && x && (j = W(`${e.uid}-tables`, c`<calcite-list-item class=${d(l.item)} data-layer-id=${t?.id ?? r} drag-disabled .label=${n.tables} title=${n.tables ?? r} @calciteListItemSelect=${() => se?.(e)} .value=${e}><calcite-icon class=${d(l.itemTableIcon)} icon=table scale=s slot=content-start></calcite-icon><calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon></calcite-list-item>`));
+    "itemTableIcon" in a && "visible" in e && "tables" in n && L && (_ = W(`${e.uid}-tables`, c`<calcite-list-item class=${d(a.item)} data-layer-id=${t?.id ?? r} drag-disabled .label=${n.tables} title=${n.tables ?? r} @calciteListItemSelect=${() => de?.(e)} .value=${e}><calcite-icon class=${d(a.itemTableIcon)} icon=table scale=s slot=content-start></calcite-icon><calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon></calcite-list-item>`));
   }
   let z = null;
   if ("children" in e) {
-    const t = [...F ?? [], e.title], { children: o, layer: s } = e, m = s?.type !== "catalog-dynamic-group" && Se(e), w = C ? !1 : Me(s), I = s?.type === "group", ye = !w && !m && f && I, ve = f && "childrenSortable" in e && e.childrenSortable && xe(e), fe = m ? o?.filter(($) => !$.hidden && (ne || !$.error)).toArray().map(($) => Oe({ ...i, item: $, parent: e, parentTitles: t })) : null;
-    (m || ye) && (z = c`<calcite-list .canPull=${($) => i.canMove ? i.canMove($, "pull") : !1} .canPut=${($) => i.canMove ? i.canMove($, "put") : !1} data-item=${e.uid ?? r} data-layer-type=${g ?? r} .displayMode=${T} .dragEnabled=${ve} .group=${I ? g : `${g}-${s?.uid}`} .label=${e.title} selection-appearance=highlight .selectionMode=${v}>${fe}${j}</calcite-list>`);
+    const t = [...F ?? [], e.title], { children: s, layer: o } = e, m = o?.type !== "catalog-dynamic-group" && xe(e), v = S ? !1 : Le(o), y = o?.type === "group", fe = !v && !m && I && y, he = I && "childrenSortable" in e && e.childrenSortable && Ee(e), Ie = m ? s?.filter(($) => !$.hidden && (ce || !$.error)).toArray().map(($) => Ge({ ...i, item: $, parent: e, parentTitles: t })) : null;
+    (m || fe) && (z = c`<calcite-list .canPull=${($) => i.canMove ? i.canMove($, "pull") : !1} .canPut=${($) => i.canMove ? i.canMove($, "put") : !1} data-item=${e.uid ?? r} data-layer-type=${p ?? r} .displayMode=${T} .dragEnabled=${he} .group=${y ? p : `${p}-${o?.uid}`} .label=${e.title} selection-appearance=highlight .selectionMode=${h}>${Ie}${_}</calcite-list>`);
   }
-  let L = null;
-  e.error ? L = c`<div class=${d(l.itemMessage)} slot=content-bottom><calcite-notice icon=exclamation-mark-triangle kind=warning open scale=s width=full><div slot=message>${"tableError" in n ? n.tableError : n.layerError}</div></calcite-notice></div>` : "incompatible" in e && e.incompatible && "layerIncompatible" in n && (L = c`<div class=${d(l.itemMessage)} slot=content-bottom><calcite-notice icon=exclamation-mark-triangle kind=warning open scale=s tabindex=0 width=full ${Y(M)}><div slot=message>${n.layerIncompatible}</div></calcite-notice></div>`);
-  const J = Fe(e), E = e.actionsSections.reduce((t, o) => t + o.length, 0), K = Le(J), me = J.toArray().map((t) => c`<calcite-action-group>${t.toArray().map((o) => te(i, o, !0))}</calcite-action-group>`), $e = (t) => {
+  let E = null;
+  e.error ? E = c`<div class=${d(a.itemMessage)} slot=content-bottom><calcite-notice icon=exclamation-mark-triangle kind=warning open scale=s width=full><div slot=message>${"tableError" in n ? n.tableError : n.layerError}</div></calcite-notice></div>` : "incompatible" in e && e.incompatible && "layerIncompatible" in n && (E = c`<div class=${d(a.itemMessage)} slot=content-bottom><calcite-notice icon=exclamation-mark-triangle kind=warning open scale=s tabindex=0 width=full ${Y(x)}><div slot=message>${n.layerIncompatible}</div></calcite-notice></div>`);
+  const J = Ve(e), k = e.actionsSections.reduce((t, s) => t + s.length, 0), K = ke(J), ge = J.toArray().map((t) => c`<calcite-action-group>${t.toArray().map((s) => te(i, s, !0))}</calcite-action-group>`), pe = (t) => {
     e.actionsOpen = t.currentTarget.open;
   };
   let Q = null;
-  E > 1 && (Q = c`<calcite-action-menu appearance=transparent .label=${n.menu ?? ""} .open=${e.actionsOpen} overlay-positioning=fixed placement=bottom-end slot=actions-end @calciteActionMenuOpen=${$e}><calcite-action icon=ellipsis scale=s slot=trigger .text=${n.options ?? ""} title=${n.options ?? r}></calcite-action>${me}</calcite-action-menu>`);
-  let k = null;
-  E === 1 && K ? k = te(i, K, !1) : E > 1 && (k = Q);
-  const be = "visibleAtCurrentTimeExtent" in e && "layerInvisibleAtTime" in n && !e.visibleAtCurrentTimeExtent ? `${p} (${n.layerInvisibleAtTime})` : "visibleAtCurrentScale" in e && "layerInvisibleAtScale" in n && !e.visibleAtCurrentScale ? `${p} (${n.layerInvisibleAtScale})` : p, ge = "parent" in e && e.parent?.layer?.type === "catalog", h = e.layer, pe = "visibleAtCurrentScale" in e && !e.visibleAtCurrentScale || "visibleAtCurrentTimeExtent" in e && !e.visibleAtCurrentTimeExtent;
+  k > 1 && (Q = c`<calcite-action-menu appearance=transparent .label=${n.menu ?? ""} .open=${e.actionsOpen} overlay-positioning=fixed placement=bottom-end slot=actions-end @calciteActionMenuOpen=${pe}><calcite-action icon=ellipsis scale=s slot=trigger .text=${n.options ?? ""} title=${n.options ?? r}></calcite-action>${ge}</calcite-action-menu>`);
+  let w = null;
+  k === 1 && K ? w = te(i, K, !1) : k > 1 && (w = Q);
+  const be = "visibleAtCurrentTimeExtent" in e && "layerInvisibleAtTime" in n && !e.visibleAtCurrentTimeExtent ? `${b} (${n.layerInvisibleAtTime})` : "visibleAtCurrentScale" in e && "layerInvisibleAtScale" in n && !e.visibleAtCurrentScale ? `${b} (${n.layerInvisibleAtScale})` : b, ve = "parent" in e && e.parent?.layer?.type === "catalog", A = e.layer, ye = "visibleAtCurrentScale" in e && !e.visibleAtCurrentScale || "visibleAtCurrentTimeExtent" in e && !e.visibleAtCurrentTimeExtent;
   return queueMicrotask(() => {
-    Pe(b.value ?? null, e, re, de), M.value && (i.handleTooltipReferenceChange?.(h?.uid, M.value), queueMicrotask(() => i.handleTooltipReferenceChange?.(h?.uid, null))), e.panel && (e.panel.container = b.value);
-  }), W(e.uid, c`<calcite-list-item class=${d(P(l.item, "itemActive" in l && { [l.itemActive]: ce?.uid === e.uid }))} data-item=${e.uid ?? r} data-layer-id=${h?.id ?? r} .dragDisabled=${!("sortable" in e && e.sortable) || ge} id=${h?.uid ?? r} .label=${p} .metadata=${{ parentTitles: F ?? [], _title: p }} .expanded=${"open" in e && e.open} .selected=${v !== "none" ? ae.includes(e) : !1} title=${be ?? r} .unavailable=${pe} .value=${e} @focusin=${() => {
-    O?.(e), b.value?.classList.add(l.itemActive);
+    Oe(g.value ?? null, e, ue, me), x.value && (i.handleTooltipReferenceChange?.(A?.uid, x.value), queueMicrotask(() => i.handleTooltipReferenceChange?.(A?.uid, null))), e.panel && (e.panel.container = g.value);
+  }), W(e.uid, c`<calcite-list-item class=${d(P(a.item, "itemActive" in a && { [a.itemActive]: oe?.uid === e.uid }))} data-item=${e.uid ?? r} data-layer-id=${A?.id ?? r} .dragDisabled=${!("sortable" in e && e.sortable) || ve} id=${A?.uid ?? r} .label=${b} .metadata=${{ parentTitles: F ?? [], _title: b }} .expanded=${"open" in e && e.open} .selected=${h !== "none" ? se.includes(e) : !1} title=${be ?? r} .unavailable=${ye} .value=${e} @focusin=${() => {
+    O?.(e), g.value?.classList.add(a.itemActive);
   }} @focusout=${() => {
-    R?.(), b.value?.classList.remove(l.itemActive);
+    R?.(), g.value?.classList.remove(a.itemActive);
   }} @mouseover=${() => {
-    O?.(e), b.value?.classList.add(l.itemActive);
+    O?.(e), g.value?.classList.add(a.itemActive);
   }} @mouseleave=${() => {
-    R?.(), b.value?.classList.remove(l.itemActive);
-  }} @calciteListItemSelect=${(t) => "visible" in e && Ee(t.currentTarget, i.operationalItems) === e && v === "none" && D(a) !== "inherited" && ee(e, a)} @calciteListItemToggle=${(t) => {
+    R?.(), g.value?.classList.remove(a.itemActive);
+  }} @calciteListItemSelect=${(t) => "visible" in e && we(t.currentTarget, i.operationalItems) === e && h === "none" && D(l) !== "inherited" && ee(e, l)} @calciteListItemToggle=${(t) => {
     "open" in e && (t.stopPropagation(), e.open = t.target.expanded);
-  }} ${Y(b)}>${B}${N}${V}${H}${_}${G}${z}${L}${U}${q}${k}</calcite-list-item>`);
+  }} ${Y(g)}>${j}${B}${V}${H}${N}${G}${z}${E}${U}${q}${w}</calcite-list-item>`);
 }
 export {
-  Oe as ArcgisLayerListItem
+  Ge as ArcgisLayerListItem
 };

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

@@ -1103,11 +1103,15 @@ export abstract class ArcgisMap extends LitElement {
    * [viewpoint](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#viewpoint), or [stationary](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#stationary).
    * It reflects user interactions (e.g. panning or zooming) or programmatic updates to the view.
    *
+   * > The `arcgisViewChange` event may be emitted before the view is fully ready.
+   * > This means the event can fire before the component's `stationary` property is `true` or before the view has completed its initial setup.
+   * > For actions that require the view to be ready and stationary, combine this event with checks on the component's `stationary` and `ready` properties.
+   *
    * @example
    * ```js
    * // get the number of features in a layer view whenever the view becomes stationary
    * viewElement.addEventListener("arcgisViewChange", async (event) =>{
-   *   if (viewElement.stationary) {
+   *   if (viewElement.ready && viewElement.stationary) {
    *     // Returns number of features available for drawing in a given layer view
    *     const count = await layerView.queryFeatureCount({
    *       geometry: viewElement.extent

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

@@ -249,6 +249,14 @@ export abstract class ArcgisPopup extends LitElement {
    * ```
    */
   accessor dockOptions: DockOptions;
+  /**
+   * The heading currently displayed for the selected feature. This value resolves to the [selected feature item's heading](https://developers.arcgis.com/javascript/latest/references/core/popup/Features/#effectiveHeading) when available, otherwise it falls back to the component's [heading](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#heading).
+   *
+   * @since 5.1
+   * @see [heading](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#heading)
+   * @see [selectedFeature](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#selectedFeature)
+   */
+  get effectiveHeading(): string | null | undefined;
   /**
    * The number of [features](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#features) available in the component.
    *
@@ -451,6 +459,8 @@ export abstract class ArcgisPopup extends LitElement {
       zoom?: string | undefined;
       dock?: string | undefined;
       undock?: string | undefined;
+      collapse?: string | undefined;
+      expand?: string | undefined;
   };
   /** @internal */
   protected messages: Partial<{
@@ -458,11 +468,15 @@ export abstract class ArcgisPopup extends LitElement {
       zoom: string;
       dock: string;
       undock: string;
+      collapse: string;
+      expand: string;
   }> & T9nMeta<{
       componentLabel: string;
       zoom: string;
       dock: string;
       undock: string;
+      collapse: string;
+      expand: string;
   }>;
   /**
    * Indicates whether the component is visible. This property is `true` when the component is querying for results, even if it is not open. Use this property to check if the component is visible.
@@ -607,7 +621,7 @@ export abstract class ArcgisPopup extends LitElement {
   triggerAction(action: ActionButton | ActionToggle): Promise<void>;
   /** Emitted when the component's close button is clicked. */
   readonly arcgisClose: import("@arcgis/lumina").TargetedEvent<this, void>;
-  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "active" | "collapsed" | "currentAlignment" | "dockEnabled" | "featureCount" | "featureMenuOpen" | "features" | "promises" | "selectedDrillInFeature" | "selectedFeature" | "selectedFeatureComponent" | "selectedFeatureIndex" | "state" | "open"; }>;
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "active" | "collapsed" | "currentAlignment" | "dockEnabled" | "effectiveHeading" | "featureCount" | "featureMenuOpen" | "features" | "promises" | "selectedDrillInFeature" | "selectedFeature" | "selectedFeatureComponent" | "selectedFeatureIndex" | "state" | "open"; }>;
   /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   /**

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

@@ -4,21 +4,21 @@ import { css as E, html as g } from "lit";
 import { keyed as P } from "lit/directives/keyed.js";
 import F from "@arcgis/core/popup/Features.js";
 import { u as $ } from "../../chunks/useT9n.js";
-import { useDirection as N, usePropertyChange as L } from "@arcgis/lumina/controllers";
-import { m as O } from "../../chunks/useViewModel.js";
+import { useDirection as N, usePropertyChange as O } from "@arcgis/lumina/controllers";
+import { m as L } from "../../chunks/useViewModel.js";
 import { LitElement as S, createEvent as _, safeStyleMap as T, safeClassMap as y } from "@arcgis/lumina";
 import { stripHTML as V } from "@arcgis/core/applications/Components/stringUtils.js";
 import { classes as x } from "@arcgis/toolkit/dom";
 import { createRef as m, ref as f } from "lit/directives/ref.js";
 import { watch as h } from "@arcgis/core/core/reactiveUtils.js";
-import B from "@arcgis/core/support/actions/ActionButton.js";
-import { t as H } from "../../chunks/screenLocation.js";
+import H from "@arcgis/core/support/actions/ActionButton.js";
+import { t as B } from "../../chunks/screenLocation.js";
 import "../arcgis-search-result-renderer/customElement.js";
 const I = E`:host{display:contents;--arcgis-internal-popup-pointer-size: 12px;--arcgis-internal-popup-content-small-size: 280px;--arcgis-internal-popup-content-medium-size: 340px;--arcgis-internal-popup-content-large-size: 400px;--arcgis-internal-popup-content-x-large-size: 460px;--arcgis-internal-popup-content-min-size-y: 48px;--arcgis-internal-popup-pointer-size-half: calc(var(--arcgis-internal-popup-pointer-size) / 2);--arcgis-internal-popup-pointer-size-half-negative: calc(var(--arcgis-internal-popup-pointer-size-half) * -1)}.root{display:flex;position:absolute;flex-flow:column nowrap;z-index:401;pointer-events:none;border:none;overflow:visible;padding:0;width:auto;height:auto;background-color:transparent}.hidden{visibility:hidden}.root:popover-open{display:flex;position:fixed;flex-flow:column nowrap;margin:0}arcgis-features{flex:1;width:100%}.shadow{box-shadow:var(--calcite-shadow-sm)}.aligned-top-center{transform-origin:50% 100%}.aligned-bottom-center{transform-origin:50% -5%}.aligned-top-left,.aligned-bottom-left{transform-origin:100% 50%}.aligned-top-right,.aligned-bottom-right{transform-origin:-5% 50%}.aligned-top-center,.aligned-top-left,.aligned-top-right{animation:popup-intro-animation-down .2s ease-in-out}.aligned-bottom-center,.aligned-bottom-left,.aligned-bottom-right{animation:popup-intro-animation-up .2s ease-in-out}.main-container{display:flex;position:relative;z-index:1;background-color:var(--calcite-color-foreground-1);width:var(--arcgis-internal-popup-content-medium-size);min-height:var(--arcgis-internal-popup-content-min-size-y);max-height:var(--arcgis-internal-popup-content-medium-size);overflow:hidden;pointer-events:auto}.pointer{position:absolute;width:0;height:0}.pointer-direction{position:absolute;width:var(--arcgis-internal-popup-pointer-size);height:var(--arcgis-internal-popup-pointer-size);content:"";background-color:var(--calcite-color-foreground-1)}.aligned-top-center .pointer{top:100%;left:50%;margin:0 0 0 var(--arcgis-internal-popup-pointer-size-half-negative)}.aligned-bottom-center .pointer{bottom:100%;left:50%;margin:0 0 0 var(--arcgis-internal-popup-pointer-size-half-negative)}.aligned-top-left .pointer{right:var(--arcgis-internal-popup-pointer-size-half);bottom:var(--arcgis-internal-popup-pointer-size-half);transform:rotate(-45deg)}.aligned-bottom-left .pointer{top:var(--arcgis-internal-popup-pointer-size-half);right:var(--arcgis-internal-popup-pointer-size-half);transform:rotate(45deg)}.aligned-top-right .pointer{bottom:var(--arcgis-internal-popup-pointer-size-half);left:var(--arcgis-internal-popup-pointer-size-half);transform:rotate(45deg)}.aligned-bottom-right .pointer{top:var(--arcgis-internal-popup-pointer-size-half);left:var(--arcgis-internal-popup-pointer-size-half);transform:rotate(-45deg)}.aligned-top-center .pointer-direction,.aligned-bottom-center .pointer-direction{transform:scale(.75,2) rotate(45deg)}.aligned-top-left .pointer-direction,.aligned-bottom-left .pointer-direction,.aligned-top-right .pointer-direction,.aligned-bottom-right .pointer-direction{top:var(--arcgis-internal-popup-pointer-size-half-negative);left:var(--arcgis-internal-popup-pointer-size-half-negative);transform:scale(.75,2.5) rotate(45deg)}.aligned-top-center .pointer-direction{top:var(--arcgis-internal-popup-pointer-size-half-negative);left:0}.aligned-bottom-center .pointer-direction{bottom:var(--arcgis-internal-popup-pointer-size-half-negative);left:0}.is-xl-width-breakpoint .main-container{width:var(--arcgis-internal-popup-content-x-large-size)}.is-lg-width-breakpoint .main-container{width:var(--arcgis-internal-popup-content-large-size)}.is-md-width-breakpoint .main-container{width:var(--arcgis-internal-popup-content-medium-size)}.is-sm-width-breakpoint .main-container,.is-xs-width-breakpoint .main-container{width:var(--arcgis-internal-popup-content-small-size)}.is-xs-width-breakpoint.is-docked-top-center,.is-xs-width-breakpoint.is-docked-bottom-center{margin:0;width:auto}.is-xs-width-breakpoint.is-docked-top-center .main-container,.is-xs-width-breakpoint.is-docked-bottom-center .main-container{position:absolute;right:0;left:0;width:100%;max-height:75%}.is-xs-width-breakpoint.is-docked-bottom-center .main-container{bottom:0}.is-xs-width-breakpoint.is-docked-top-center .main-container{top:0}.is-xl-height-breakpoint .main-container{max-height:var(--arcgis-internal-popup-content-x-large-size)}.is-lg-height-breakpoint .main-container{max-height:var(--arcgis-internal-popup-content-large-size)}.is-sm-height-breakpoint .main-container,.is-xs-height-breakpoint .main-container{max-height:var(--arcgis-internal-popup-content-small-size)}.is-docked{flex-flow:row nowrap;inset:0;margin:var(--arcgis-layout-overlay-space-top, 0) var(--arcgis-layout-overlay-space-right, 0) var(--arcgis-layout-overlay-space-bottom, 0) var(--arcgis-layout-overlay-space-left, 0);padding:var(--calcite-spacing-lg) var(--calcite-spacing-lg) var(--calcite-spacing-xxxl) var(--calcite-spacing-lg);animation:docking-animation .25s ease-out}.is-docked-top-left,.is-docked-top-center,.is-docked-top-right,.is-docked-top-start,.is-docked-top-end{align-items:flex-start}.is-docked-bottom-left,.is-docked-bottom-center,.is-docked-bottom-right,.is-docked-bottom-start,.is-docked-bottom-end{align-items:flex-end}.is-docked-top-left,.is-docked-bottom-left,.is-docked-top-start,.is-docked-bottom-start{justify-content:flex-start}.is-docked-top-center,.is-docked-bottom-center{justify-content:center}.is-docked-top-right,.is-docked-bottom-right,.is-docked-top-end,.is-docked-bottom-end{justify-content:flex-end}.is-docked-top-left.is-rtl,.is-docked-top-right.is-rtl,.is-docked-bottom-left.is-rtl,.is-docked-bottom-right.is-rtl{flex-direction:row-reverse}.is-docked-top-left .main-container,.is-docked-top-right .main-container,.is-docked-bottom-left .main-container,.is-docked-bottom-right .main-container,.is-docked-top-start .main-container,.is-docked-top-end .main-container,.is-docked-bottom-start .main-container,.is-docked-bottom-end .main-container{max-height:80%}.is-docked-top-center .main-container,.is-docked-bottom-center .main-container{max-height:40%}@media(prefers-reduced-motion){.aligned-top-center,.aligned-top-left,.aligned-top-right,.aligned-bottom-center,.aligned-bottom-left,.aligned-bottom-right{animation:none}}@media(prefers-reduced-motion){.is-docked{animation:none}}@keyframes docking-animation{0%{opacity:0}25%{opacity:0}to{opacity:1}}@keyframes popup-intro-animation-down{0%{transform:translateY(calc(var(--calcite-spacing-xs) * -1));opacity:0}to{transform:translate(0);opacity:1}}@keyframes popup-intro-animation-up{0%{transform:translateY(var(--calcite-spacing-xs));opacity:0}to{transform:translate(0);opacity:1}}`;
 function b(k) {
   return k && Number.parseInt(k.replaceAll(/[^-\d.]/gu, ""), 10) || 0;
 }
-const j = O(F), C = {
+const j = L(F), C = {
   buttonEnabled: !0,
   position: "auto",
   breakpoint: {
@@ -27,12 +27,12 @@ const j = O(F), C = {
 };
 class W extends S {
   constructor() {
-    super(...arguments), this._direction = N(), this._featuresComponent = m(), this._dockAction = new B({ id: "popup-dock-action" }), this._mainContainerNode = m(), this._pointerNode = m(), this.messages = $(), this.viewModel = j(this), this._containerNode = m(), this._popupResizeObserver = new ResizeObserver(() => this._positionContainer()), this._positionContainer = () => {
+    super(...arguments), this._direction = N(), this._featuresComponent = m(), this._dockAction = new H({ id: "popup-dock-action" }), this._mainContainerNode = m(), this._pointerNode = m(), this.messages = $(), this.viewModel = j(this), this._containerNode = m(), this._popupResizeObserver = new ResizeObserver(() => this._positionContainer()), this._positionContainer = () => {
       this.positionStyle = this._calculatePositionStyle();
-    }, this.screenLocation = H(this), this.actions = this.viewModel.actions, this.active = this.viewModel.active, this.alignment = "auto", this.autoCloseEnabled = !1, this.autoDestroyDisabled = !1, this.collapsed = !1, this.content = this.viewModel.content, this.defaultPopupTemplateEnabled = this.viewModel.defaultPopupTemplateEnabled, this.dockEnabled = !1, this.featureCount = this.viewModel.featureCount, this.featureMenuOpen = !1, this.features = this.viewModel.features, this.goToOverride = this.viewModel.goToOverride, this.heading = this.viewModel.heading, this.headingLevel = 2, this.hideActionBar = !1, this.hideCloseButton = !1, this.hideCollapseButton = !1, this.hideFeatureMenuHeading = !1, this.hideFeatureNavigation = !1, this.hideFeatureListLayerTitle = !1, this.hideHeading = !1, this.hideSpinner = !1, this.highlightDisabled = this.viewModel.highlightEnabled, this.includeDefaultActionsDisabled = this.viewModel.includeDefaultActions, this.initialDisplayMode = this.viewModel.initialDisplayMode, this.location = this.viewModel.location, this.open = this.viewModel.open, this.promises = this.viewModel.promises, this.selectedFeature = this.viewModel.selectedFeature, this.selectedFeatureIndex = this.viewModel.selectedFeatureIndex, this.state = this.viewModel.state, this.topLayerDisabled = !1, this.updateLocationEnabled = this.viewModel.updateLocationEnabled, this.view = this.viewModel.view, this.arcgisPropertyChange = L()("active", "collapsed", "currentAlignment", "dockEnabled", "featureCount", "featureMenuOpen", "features", "promises", "selectedDrillInFeature", "selectedFeature", "selectedFeatureComponent", "selectedFeatureIndex", "state", "open"), this.arcgisReady = _(), this.arcgisClose = _(), this.arcgisTriggerAction = _();
+    }, this.screenLocation = B(this), this.actions = this.viewModel.actions, this.active = this.viewModel.active, this.alignment = "auto", this.autoCloseEnabled = !1, this.autoDestroyDisabled = !1, this.collapsed = !1, this.content = this.viewModel.content, this.defaultPopupTemplateEnabled = this.viewModel.defaultPopupTemplateEnabled, this.dockEnabled = !1, this.effectiveHeading = this.viewModel.effectiveHeading, this.featureCount = this.viewModel.featureCount, this.featureMenuOpen = !1, this.features = this.viewModel.features, this.goToOverride = this.viewModel.goToOverride, this.heading = this.viewModel.heading, this.headingLevel = 2, this.hideActionBar = !1, this.hideCloseButton = !1, this.hideCollapseButton = !1, this.hideFeatureMenuHeading = !1, this.hideFeatureNavigation = !1, this.hideFeatureListLayerTitle = !1, this.hideHeading = !1, this.hideSpinner = !1, this.highlightDisabled = this.viewModel.highlightEnabled, this.includeDefaultActionsDisabled = this.viewModel.includeDefaultActions, this.initialDisplayMode = this.viewModel.initialDisplayMode, this.location = this.viewModel.location, this.open = this.viewModel.open, this.promises = this.viewModel.promises, this.selectedFeature = this.viewModel.selectedFeature, this.selectedFeatureIndex = this.viewModel.selectedFeatureIndex, this.state = this.viewModel.state, this.topLayerDisabled = !1, this.updateLocationEnabled = this.viewModel.updateLocationEnabled, this.view = this.viewModel.view, this.arcgisPropertyChange = O()("active", "collapsed", "currentAlignment", "dockEnabled", "effectiveHeading", "featureCount", "featureMenuOpen", "features", "promises", "selectedDrillInFeature", "selectedFeature", "selectedFeatureComponent", "selectedFeatureIndex", "state", "open"), this.arcgisReady = _(), this.arcgisClose = _(), this.arcgisTriggerAction = _();
   }
   static {
-    this.properties = { screenLocation: 16, positionStyle: 16, _featureNavigationTop: 16, actions: 0, active: 0, alignment: 1, autoCloseEnabled: 5, autoDestroyDisabled: 5, collapsed: 5, content: 1, currentAlignment: 32, currentDockPosition: 32, defaultPopupTemplateEnabled: 5, dockEnabled: 5, dockOptions: 0, featureCount: 0, featureMenuOpen: 5, featureMenuTitle: 1, features: 0, goToOverride: 0, heading: 1, headingLevel: 9, hideActionBar: 5, hideCloseButton: 5, hideCollapseButton: 5, hideFeatureMenuHeading: 5, hideFeatureNavigation: 5, hideFeatureListLayerTitle: 5, hideHeading: 5, hideSpinner: 5, highlightDisabled: 5, includeDefaultActionsDisabled: 5, initialDisplayMode: 1, label: 1, location: 0, messageOverrides: 0, open: 5, promises: 0, referenceElement: 1, selectedDrillInFeature: 32, selectedFeature: 0, selectedFeatureComponent: 32, selectedFeatureIndex: 9, state: 32, topLayerDisabled: 5, updateLocationEnabled: 5, view: 0 };
+    this.properties = { screenLocation: 16, positionStyle: 16, _featureNavigationTop: 16, actions: 0, active: 0, alignment: 1, autoCloseEnabled: 5, autoDestroyDisabled: 5, collapsed: 5, content: 1, currentAlignment: 32, currentDockPosition: 32, defaultPopupTemplateEnabled: 5, dockEnabled: 5, dockOptions: 0, effectiveHeading: 32, featureCount: 0, featureMenuOpen: 5, featureMenuTitle: 1, features: 0, goToOverride: 0, heading: 1, headingLevel: 9, hideActionBar: 5, hideCloseButton: 5, hideCollapseButton: 5, hideFeatureMenuHeading: 5, hideFeatureNavigation: 5, hideFeatureListLayerTitle: 5, hideHeading: 5, hideSpinner: 5, highlightDisabled: 5, includeDefaultActionsDisabled: 5, initialDisplayMode: 1, label: 1, location: 0, messageOverrides: 0, open: 5, promises: 0, referenceElement: 1, selectedDrillInFeature: 32, selectedFeature: 0, selectedFeatureComponent: 32, selectedFeatureIndex: 9, state: 32, topLayerDisabled: 5, updateLocationEnabled: 5, view: 0 };
   }
   static {
     this.styles = I;
@@ -56,8 +56,8 @@ class W extends S {
   set dockOptions(t) {
     const e = { ...C }, o = this.viewModel?.view?.breakpoints, i = {};
     o && (i.width = o.xsmall, i.height = o.xsmall);
-    const r = { ...e, ...t }, n = { ...e.breakpoint, ...i }, { breakpoint: s } = r;
-    typeof s == "object" ? r.breakpoint = { ...n, ...s } : s && (r.breakpoint = n), this._dockOptions = r;
+    const r = { ...e, ...t }, n = { ...e.breakpoint, ...i }, { breakpoint: a } = r;
+    typeof a == "object" ? r.breakpoint = { ...n, ...a } : a && (r.breakpoint = n), this._dockOptions = r;
   }
   get selectedDrillInFeature() {
     return this._featuresComponent.value?.selectedDrillInFeature ?? null;
@@ -149,7 +149,7 @@ class W extends S {
     const { _mainContainerNode: e, _popupRect: o, viewModel: i } = this, { view: r } = i, { screenLocation: n } = this;
     if (n == null || !r || !o || !e.value)
       return "top-center";
-    const s = window.getComputedStyle(e.value), l = b(s.maxHeight), a = b(s.height), c = this._getPointerSize(), { height: d, width: v } = o, p = v + c, u = Math.max(d, l, a) + c, M = this._isOutsideView({
+    const a = window.getComputedStyle(e.value), l = b(a.maxHeight), s = b(a.height), c = this._getPointerSize(), { height: d, width: v } = o, p = v + c, u = Math.max(d, l, s) + c, M = this._isOutsideView({
       popupHeight: u,
       popupWidth: p,
       screenLocation: n,
@@ -231,35 +231,35 @@ class W extends S {
   _calculateAlignmentPosition(t, e, o, i) {
     if (t < 0 || e < 0 || !o || !i || t > o.width || e > o.height)
       return;
-    const { topLayerDisabled: r } = this, n = r ? t : t + o.x, s = r ? e : e + o.y, { _direction: l, currentAlignment: a } = this, c = this._getPointerSize(), d = c / 2;
-    if (a === "top-left" || a === "top-start" && l === "ltr" || a === "top-end" && l === "rtl")
+    const { topLayerDisabled: r } = this, n = r ? t : t + o.x, a = r ? e : e + o.y, { _direction: l, currentAlignment: s } = this, c = this._getPointerSize(), d = c / 2;
+    if (s === "top-left" || s === "top-start" && l === "ltr" || s === "top-end" && l === "rtl")
       return {
-        top: s - (i.height + d),
+        top: a - (i.height + d),
         left: n - i.width - d
       };
-    if (a === "top-center")
+    if (s === "top-center")
       return {
-        top: s - (i.height + c),
+        top: a - (i.height + c),
         left: n - i.width / 2
       };
-    if (a === "top-right" || a === "top-end" && l === "ltr" || a === "top-start" && l === "rtl")
+    if (s === "top-right" || s === "top-end" && l === "ltr" || s === "top-start" && l === "rtl")
       return {
-        top: s - (i.height + d),
+        top: a - (i.height + d),
         left: n + d
       };
-    if (a === "bottom-left" || a === "bottom-start" && l === "ltr" || a === "bottom-end" && l === "rtl")
+    if (s === "bottom-left" || s === "bottom-start" && l === "ltr" || s === "bottom-end" && l === "rtl")
       return {
-        top: s + d,
+        top: a + d,
         left: n - i.width - d
       };
-    if (a === "bottom-center")
+    if (s === "bottom-center")
       return {
-        top: s + c,
+        top: a + c,
         left: n - i.width / 2
       };
-    if (a === "bottom-right" || a === "bottom-end" && l === "ltr" || a === "bottom-start" && l === "rtl")
+    if (s === "bottom-right" || s === "bottom-end" && l === "ltr" || s === "bottom-start" && l === "rtl")
       return {
-        top: s + d,
+        top: a + d,
         left: n + d
       };
   }
@@ -279,8 +279,8 @@ class W extends S {
       return `inset: ${this._getPositionStyleValue(i.top)} ${this._getPositionStyleValue(i.right)} ${this._getPositionStyleValue(i.bottom)} ${this._getPositionStyleValue(i.left)};`;
   }
   _dockingThresholdCrossed(t, e, o) {
-    const [i, r] = t, [n, s] = e, { width: l = 0, height: a = 0 } = o ?? {};
-    return i <= l && n > l || i > l && n <= l || r <= a && s > a || r > a && s <= a;
+    const [i, r] = t, [n, a] = e, { width: l = 0, height: s = 0 } = o ?? {};
+    return i <= l && n > l || i > l && n <= l || r <= s && a > s || r > s && a <= s;
   }
   _updateDockEnabledForViewSize(t, e) {
     if (!t || !e || !this.viewModel?.view?.ready)
@@ -295,14 +295,14 @@ class W extends S {
     const { width: i, height: r } = o;
     if (Number.isNaN(i) || Number.isNaN(r) || typeof e != "object")
       return !1;
-    const n = typeof e.width == "number" && i <= (e.width ?? 0), s = typeof e.height == "number" && r <= (e.height ?? 0);
-    return n || s;
+    const n = typeof e.width == "number" && i <= (e.width ?? 0), a = typeof e.height == "number" && r <= (e.height ?? 0);
+    return n || a;
   }
   _setDockEnabledForViewSize(t) {
     this.viewModel?.view?.ready && typeof t.breakpoint == "object" && (this.dockEnabled = this._shouldDockAtCurrentViewSize(t));
   }
   render() {
-    const { _direction: t, dockEnabled: e, currentAlignment: o, currentDockPosition: i, positionStyle: r } = this, { active: n, view: s } = this.viewModel, l = n && e, a = n && !e, c = s?.widthBreakpoint, d = s?.heightBreakpoint, v = {
+    const { _direction: t, dockEnabled: e, currentAlignment: o, currentDockPosition: i, positionStyle: r } = this, { active: n, view: a } = this.viewModel, l = n && e, s = n && !e, c = a?.widthBreakpoint, d = a?.heightBreakpoint, v = {
       "aligned-top-center": o === "top-center",
       "aligned-bottom-center": o === "bottom-center",
       "aligned-top-left": o === "top-left" || o === "top-start" && t === "ltr" || o === "top-end" && t === "rtl",
@@ -310,7 +310,7 @@ class W extends S {
       "aligned-top-right": o === "top-right" || o === "top-end" && t === "ltr" || o === "top-start" && t === "rtl",
       "aligned-bottom-right": o === "bottom-right" || o === "bottom-end" && t === "ltr" || o === "bottom-start" && t === "rtl",
       "is-docked": l,
-      shadow: a,
+      shadow: s,
       "is-rtl": this._direction === "rtl",
       "is-docked-top-start": i === "top-start",
       "is-docked-top-end": i === "top-end",
@@ -344,7 +344,7 @@ class W extends S {
     const t = {
       shadow: this.dockEnabled
     };
-    return g`<div class=${y(x("main-container", t))} ${f(this._mainContainerNode)}>${P(this.viewModel, g`<arcgis-features .collapsed=${this.collapsed} .autoDestroyDisabled=${this.autoDestroyDisabled} .featureNavigationTop=${this._featureNavigationTop} .headingLevel=${this.headingLevel} .hidden=${!this.active} .hideActionBar=${this.hideActionBar} .hideCloseButton=${this.hideCloseButton} .hideFeatureListLayerTitle=${this.hideFeatureListLayerTitle} .hideFeatureMenuHeading=${this.hideFeatureMenuHeading} .hideFeatureNavigation=${this.hideFeatureNavigation} .hideHeading=${this.hideHeading} .hideSpinner=${this.hideSpinner} @arcgisPropertyChange=${this._handleArcgisPropertyChange} @arcgisTriggerAction=${this._handleArcgisTriggerAction} @arcgisClose=${this._handleClose} .referenceElement=${this.referenceElement} .responsiveActionsEnabled=${!0} .showCollapseButton=${!this.hideCollapseButton} .viewModel=${this.viewModel} ${f(this._featuresComponent)}></arcgis-features>`)}</div>`;
+    return g`<div class=${y(x("main-container", t))} ${f(this._mainContainerNode)}>${P(this.viewModel, g`<arcgis-features .collapsed=${this.collapsed} .autoDestroyDisabled=${this.autoDestroyDisabled} .featureNavigationTop=${this._featureNavigationTop} .headingLevel=${this.headingLevel} .hidden=${!this.active} .hideActionBar=${this.hideActionBar} .hideCloseButton=${this.hideCloseButton} .hideFeatureListLayerTitle=${this.hideFeatureListLayerTitle} .hideFeatureMenuHeading=${this.hideFeatureMenuHeading} .hideFeatureNavigation=${this.hideFeatureNavigation} .hideHeading=${this.hideHeading} .hideSpinner=${this.hideSpinner} @arcgisPropertyChange=${this._handleArcgisPropertyChange} @arcgisTriggerAction=${this._handleArcgisTriggerAction} @arcgisClose=${this._handleClose} .messageOverrides=${{ collapse: this.messages.collapse, expand: this.messages.expand }} .referenceElement=${this.referenceElement} .responsiveActionsEnabled=${!0} .showCollapseButton=${!this.hideCollapseButton} .viewModel=${this.viewModel} ${f(this._featuresComponent)}></arcgis-features>`)}</div>`;
   }
 }
 A("arcgis-popup", W);

package/dist/components/arcgis-presentation/PresentationViewModel.d.ts

@@ -43,4 +43,5 @@ export default class PresentationViewModel extends Accessor {
   initialize(): void;
   /** @param stepSize */
   navigateInPresentation(stepSize: number): void;
+  setSliceAnalysisInteractive(): Promise<void>;
 }

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

@@ -55,6 +55,14 @@ export abstract class ArcgisPresentation extends LitElement {
    * @default "m"
    */
   accessor scale: "l" | "m" | "s";
+  /**
+   * Show the slice analysis of a slide interactive so manipulators will be displayed, allowing users to click and drag to edit the analysis.
+   * Per default interactive is set to false.
+   *
+   * @default false
+   * @see [SliceAnalysisView3D.interactive](https://developers.arcgis.com/javascript/latest/references/core/views/3d/analysis/SliceAnalysisView3D/#interactive)
+   */
+  accessor sliceAnalysisInteractive: boolean;
   /**
    * Disable display of captions when slide is applied.
    * Per default the display of captions is enabled.