@arcgis/map-components 5.1.0-next.76 → 5.1.0-next.78

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

@@ -4,13 +4,13 @@ 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 O } from "@arcgis/lumina/controllers";
-import { m as L } from "../../chunks/useViewModel.js";
+import { useDirection as N, usePropertyChange as L } from "@arcgis/lumina/controllers";
+import { m as O } 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 C } from "@arcgis/toolkit/dom";
+import { classes as x } from "@arcgis/toolkit/dom";
 import { createRef as m, ref as f } from "lit/directives/ref.js";
-import { watch as l } from "@arcgis/core/core/reactiveUtils.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 "../arcgis-search-result-renderer/customElement.js";
@@ -18,7 +18,7 @@ const I = E`:host{display:contents;--arcgis-internal-popup-pointer-size: 12px;--
 function b(k) {
   return k && Number.parseInt(k.replaceAll(/[^-\d.]/gu, ""), 10) || 0;
 }
-const j = L(F), x = {
+const j = O(F), C = {
   buttonEnabled: !0,
   position: "auto",
   breakpoint: {
@@ -29,7 +29,7 @@ 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 = () => {
       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 = O()("active", "collapsed", "currentAlignment", "dockEnabled", "featureCount", "featureMenuOpen", "features", "promises", "selectedDrillInFeature", "selectedFeature", "selectedFeatureComponent", "selectedFeatureIndex", "state", "open"), this.arcgisReady = _(), this.arcgisClose = _(), this.arcgisTriggerAction = _();
+    }, 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 = _();
   }
   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 };
@@ -51,13 +51,13 @@ class W extends S {
     return this._getCurrentDockPosition();
   }
   get dockOptions() {
-    return this._dockOptions || x;
+    return this._dockOptions || C;
   }
   set dockOptions(t) {
-    const e = { ...x }, i = this.viewModel?.view?.breakpoints, o = {};
-    i && (o.width = i.xsmall, o.height = i.xsmall);
-    const r = { ...e, ...t }, n = { ...e.breakpoint, ...o }, { breakpoint: a } = r;
-    typeof a == "object" ? r.breakpoint = { ...n, ...a } : a && (r.breakpoint = n), this._dockOptions = r;
+    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;
   }
   get selectedDrillInFeature() {
     return this._featuresComponent.value?.selectedDrillInFeature ?? null;
@@ -91,13 +91,13 @@ class W extends S {
   }
   loaded() {
     this.manager.onLifecycle(() => [
-      l(() => [this.viewModel?.view?.widthBreakpoint, this.dockEnabled, this._direction], () => this._handleDockIcon(), { initial: !0 }),
-      l(() => [this.dockEnabled, this.messages?.undock, this.messages?.dock], () => this._handleDockEnabled(), { initial: !0 }),
-      l(() => [this.dockOptions, this._featuresComponent.value], () => {
-        const { _dockAction: t, dockOptions: e } = this, i = this._featuresComponent.value?.headerActions;
-        i?.remove(t), e.buttonEnabled && i?.add(t);
+      h(() => [this.viewModel?.view?.widthBreakpoint, this.dockEnabled, this._direction], () => this._handleDockIcon(), { initial: !0 }),
+      h(() => [this.dockEnabled, this.messages?.undock, this.messages?.dock], () => this._handleDockEnabled(), { initial: !0 }),
+      h(() => [this.dockOptions, this._featuresComponent.value], () => {
+        const { _dockAction: t, dockOptions: e } = this, o = this._featuresComponent.value?.headerActions;
+        o?.remove(t), e.buttonEnabled && o?.add(t);
       }, { initial: !0 }),
-      l(() => [
+      h(() => [
         this._pointerNode.value,
         this.alignment,
         this.currentAlignment,
@@ -108,16 +108,16 @@ class W extends S {
         this.viewModel?.location,
         this.viewModel?.view?.size
       ], () => this._positionContainer(), { initial: !0 }),
-      l(() => this._mainContainerNode.value, (t) => {
+      h(() => this._mainContainerNode.value, (t) => {
         this._popupResizeObserver.disconnect(), t && this._popupResizeObserver.observe(t);
       }, { initial: !0 }),
-      l(() => this.viewModel?.view?.size, (t, e) => this._updateDockEnabledForViewSize(t, e)),
-      l(() => this.viewModel?.view?.ready, () => this._setDockEnabledForViewSize(this.dockOptions), { initial: !0 }),
-      l(() => this.view?.map, (t) => {
+      h(() => this.viewModel?.view?.size, (t, e) => this._updateDockEnabledForViewSize(t, e)),
+      h(() => this.viewModel?.view?.ready, () => this._setDockEnabledForViewSize(this.dockOptions), { initial: !0 }),
+      h(() => this.view?.map, (t) => {
         this.viewModel.map = t;
       }, { initial: !0 }),
-      l(() => this.screenLocation, (t, e) => this._autoClose(t, e)),
-      l(() => [this.active, this._containerNode.value, this.dockEnabled, this.topLayerDisabled], () => this._togglePopover(), { initial: !0 })
+      h(() => this.screenLocation, (t, e) => this._autoClose(t, e)),
+      h(() => [this.active, this._containerNode.value, this.dockEnabled, this.topLayerDisabled], () => this._togglePopover(), { initial: !0 })
     ]);
   }
   _togglePopover() {
@@ -136,45 +136,45 @@ class W extends S {
     t.stopPropagation(), t.detail.action === this._dockAction && (this.dockEnabled = !this.dockEnabled), this.arcgisTriggerAction.emit({ action: t.detail.action });
   }
   _isOutsideView(t) {
-    const { popupHeight: e, popupWidth: i, screenLocation: o, side: r, view: n } = t;
-    return Number.isNaN(i) || Number.isNaN(e) || !n || !o ? !1 : r === "right" && o.x + i / 2 > n.width || r === "left" && o.x - i / 2 < 0 || r === "top" && o.y - e < 0 || r === "bottom" && o.y + e > n.height;
+    const { popupHeight: e, popupWidth: o, screenLocation: i, side: r, view: n } = t;
+    return Number.isNaN(o) || Number.isNaN(e) || !n || !i ? !1 : r === "right" && i.x + o / 2 > n.width || r === "left" && i.x - o / 2 < 0 || r === "top" && i.y - e < 0 || r === "bottom" && i.y + e > n.height;
   }
   _getPointerSize() {
-    const { _pointerNode: t } = this, e = t.value ? window.getComputedStyle(t.value) : null, i = b(e?.height), o = b(e?.width);
-    return Math.hypot(i, o);
+    const { _pointerNode: t } = this, e = t.value ? window.getComputedStyle(t.value) : null, o = b(e?.height), i = b(e?.width);
+    return Math.hypot(o, i);
   }
   _calculateAutoAlignment(t) {
     if (t !== "auto")
       return t;
-    const { _mainContainerNode: e, _popupRect: i, viewModel: o } = this, { view: r } = o, { screenLocation: n } = this;
-    if (n == null || !r || !i || !e.value)
+    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 a = window.getComputedStyle(e.value), s = b(a.maxHeight), d = b(a.height), c = this._getPointerSize(), { height: p, width: v } = i, h = v + c, u = Math.max(p, s, d) + c, M = this._isOutsideView({
+    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({
       popupHeight: u,
-      popupWidth: h,
+      popupWidth: p,
       screenLocation: n,
       side: "right",
       view: r
-    }), z = this._isOutsideView({
+    }), D = this._isOutsideView({
       popupHeight: u,
-      popupWidth: h,
+      popupWidth: p,
       screenLocation: n,
       side: "left",
       view: r
     }), w = this._isOutsideView({
       popupHeight: u,
-      popupWidth: h,
+      popupWidth: p,
       screenLocation: n,
       side: "top",
       view: r
-    }), D = this._isOutsideView({
+    }), z = this._isOutsideView({
       popupHeight: u,
-      popupWidth: h,
+      popupWidth: p,
       screenLocation: n,
       side: "bottom",
       view: r
     });
-    return z ? w ? "bottom-right" : "top-right" : M ? w ? "bottom-left" : "top-left" : w ? D ? "top-center" : "bottom-center" : "top-center";
+    return D ? w ? "bottom-right" : "top-right" : M ? w ? "bottom-left" : "top-left" : w ? z ? "top-center" : "bottom-center" : "top-center";
   }
   _callCurrentAlignment(t) {
     return typeof t == "function" ? t.call(this) : t;
@@ -194,11 +194,11 @@ class W extends S {
   _calculateAutoDockPosition(t) {
     if (t !== "auto")
       return t;
-    const e = this.viewModel?.view, i = "top-end";
+    const e = this.viewModel?.view, o = "top-end";
     if (!e)
-      return i;
-    const { breakpoints: o } = e;
-    return o?.xsmall && e.width <= o.xsmall ? "bottom-center" : i;
+      return o;
+    const { breakpoints: i } = e;
+    return i?.xsmall && e.width <= i.xsmall ? "bottom-center" : o;
   }
   _getDockIcon() {
     const t = this._getDockPosition(), { _direction: e } = this;
@@ -228,39 +228,39 @@ class W extends S {
   _handleDockEnabled() {
     this._dockAction.title = this.dockEnabled ? this.messages?.undock : this.messages?.dock;
   }
-  _calculateAlignmentPosition(t, e, i, o) {
-    if (t < 0 || e < 0 || !i || !o || t > i.width || e > i.height)
+  _calculateAlignmentPosition(t, e, o, i) {
+    if (t < 0 || e < 0 || !o || !i || t > o.width || e > o.height)
       return;
-    const { _direction: r, currentAlignment: n } = this, a = this._getPointerSize(), s = a / 2;
-    if (n === "top-left" || n === "top-start" && r === "ltr" || n === "top-end" && r === "rtl")
+    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")
       return {
-        top: e + i.top - (o.height + s),
-        left: t + i.left - o.width - s
+        top: s - (i.height + d),
+        left: n - i.width - d
       };
-    if (n === "top-center")
+    if (a === "top-center")
       return {
-        top: e + i.top - (o.height + a),
-        left: t + i.left - o.width / 2
+        top: s - (i.height + c),
+        left: n - i.width / 2
       };
-    if (n === "top-right" || n === "top-end" && r === "ltr" || n === "top-start" && r === "rtl")
+    if (a === "top-right" || a === "top-end" && l === "ltr" || a === "top-start" && l === "rtl")
       return {
-        top: e + i.top - (o.height + s),
-        left: t + i.left + s
+        top: s - (i.height + d),
+        left: n + d
       };
-    if (n === "bottom-left" || n === "bottom-start" && r === "ltr" || n === "bottom-end" && r === "rtl")
+    if (a === "bottom-left" || a === "bottom-start" && l === "ltr" || a === "bottom-end" && l === "rtl")
       return {
-        top: e + i.top + s,
-        left: t + i.left - o.width - s
+        top: s + d,
+        left: n - i.width - d
       };
-    if (n === "bottom-center")
+    if (a === "bottom-center")
       return {
-        top: e + i.top + a,
-        left: t + i.left - o.width / 2
+        top: s + c,
+        left: n - i.width / 2
       };
-    if (n === "bottom-right" || n === "bottom-end" && r === "ltr" || n === "bottom-start" && r === "rtl")
+    if (a === "bottom-right" || a === "bottom-end" && l === "ltr" || a === "bottom-start" && l === "rtl")
       return {
-        top: e + i.top + s,
-        left: t + i.left + s
+        top: s + d,
+        left: n + d
       };
   }
   _getPositionStyleValue(t) {
@@ -272,79 +272,79 @@ class W extends S {
     const { screenLocation: t } = this;
     if (t == null)
       return;
-    const e = this.view?.container?.getBoundingClientRect(), i = this._mainContainerNode.value?.getBoundingClientRect();
-    this._popupRect = i;
-    const o = this._calculateAlignmentPosition(t.x, t.y, e, i);
-    if (o)
-      return `inset: ${this._getPositionStyleValue(o.top)} ${this._getPositionStyleValue(o.right)} ${this._getPositionStyleValue(o.bottom)} ${this._getPositionStyleValue(o.left)};`;
+    const e = this.view?.container?.getBoundingClientRect(), o = this._mainContainerNode.value?.getBoundingClientRect();
+    this._popupRect = o;
+    const i = this._calculateAlignmentPosition(t.x, t.y, e, o);
+    if (i)
+      return `inset: ${this._getPositionStyleValue(i.top)} ${this._getPositionStyleValue(i.right)} ${this._getPositionStyleValue(i.bottom)} ${this._getPositionStyleValue(i.left)};`;
   }
-  _dockingThresholdCrossed(t, e, i) {
-    const [o, r] = t, [n, a] = e, { width: s = 0, height: d = 0 } = i ?? {};
-    return o <= s && n > s || o > s && n <= s || r <= d && a > d || r > d && a <= d;
+  _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;
   }
   _updateDockEnabledForViewSize(t, e) {
     if (!t || !e || !this.viewModel?.view?.ready)
       return;
-    const { dockOptions: i } = this, o = i.breakpoint;
-    typeof o == "object" && this._dockingThresholdCrossed(t, e, o) && this._setDockEnabledForViewSize(i);
+    const { dockOptions: o } = this, i = o.breakpoint;
+    typeof i == "object" && this._dockingThresholdCrossed(t, e, i) && this._setDockEnabledForViewSize(o);
   }
   _shouldDockAtCurrentViewSize(t) {
-    const e = t.breakpoint, i = this.viewModel?.view?.ui;
-    if (!i)
+    const e = t.breakpoint, o = this.viewModel?.view?.ui;
+    if (!o)
       return !1;
-    const { width: o, height: r } = i;
-    if (Number.isNaN(o) || Number.isNaN(r) || typeof e != "object")
+    const { width: i, height: r } = o;
+    if (Number.isNaN(i) || Number.isNaN(r) || typeof e != "object")
       return !1;
-    const n = typeof e.width == "number" && o <= (e.width ?? 0), a = typeof e.height == "number" && r <= (e.height ?? 0);
-    return n || a;
+    const n = typeof e.width == "number" && i <= (e.width ?? 0), s = typeof e.height == "number" && r <= (e.height ?? 0);
+    return n || s;
   }
   _setDockEnabledForViewSize(t) {
     this.viewModel?.view?.ready && typeof t.breakpoint == "object" && (this.dockEnabled = this._shouldDockAtCurrentViewSize(t));
   }
   render() {
-    const { _direction: t, dockEnabled: e, currentAlignment: i, currentDockPosition: o, positionStyle: r } = this, { active: n, view: a } = this.viewModel, s = n && e, d = n && !e, c = a?.widthBreakpoint, p = a?.heightBreakpoint, v = {
-      "aligned-top-center": i === "top-center",
-      "aligned-bottom-center": i === "bottom-center",
-      "aligned-top-left": i === "top-left" || i === "top-start" && t === "ltr" || i === "top-end" && t === "rtl",
-      "aligned-bottom-left": i === "bottom-left" || i === "bottom-start" && t === "ltr" || i === "bottom-end" && t === "rtl",
-      "aligned-top-right": i === "top-right" || i === "top-end" && t === "ltr" || i === "top-start" && t === "rtl",
-      "aligned-bottom-right": i === "bottom-right" || i === "bottom-end" && t === "ltr" || i === "bottom-start" && t === "rtl",
-      "is-docked": s,
-      shadow: d,
+    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 = {
+      "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",
+      "aligned-bottom-left": o === "bottom-left" || o === "bottom-start" && t === "ltr" || o === "bottom-end" && t === "rtl",
+      "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,
       "is-rtl": this._direction === "rtl",
-      "is-docked-top-start": o === "top-start",
-      "is-docked-top-end": o === "top-end",
-      "is-docked-top-left": o === "top-left",
-      "is-docked-top-center": o === "top-center",
-      "is-docked-top-right": o === "top-right",
-      "is-docked-bottom-left": o === "bottom-left",
-      "is-docked-bottom-center": o === "bottom-center",
-      "is-docked-bottom-right": o === "bottom-right",
-      "is-docked-bottom-start": o === "bottom-start",
-      "is-docked-bottom-end": o === "bottom-end",
+      "is-docked-top-start": i === "top-start",
+      "is-docked-top-end": i === "top-end",
+      "is-docked-top-left": i === "top-left",
+      "is-docked-top-center": i === "top-center",
+      "is-docked-top-right": i === "top-right",
+      "is-docked-bottom-left": i === "bottom-left",
+      "is-docked-bottom-center": i === "bottom-center",
+      "is-docked-bottom-right": i === "bottom-right",
+      "is-docked-bottom-start": i === "bottom-start",
+      "is-docked-bottom-end": i === "bottom-end",
       "is-xl-width-breakpoint": c === "xlarge",
       "is-lg-width-breakpoint": c === "large",
       "is-md-width-breakpoint": c === "medium",
       "is-sm-width-breakpoint": c === "small",
       "is-xs-width-breakpoint": c === "xsmall",
-      "is-xl-height-breakpoint": p === "xlarge",
-      "is-lg-height-breakpoint": p === "large",
-      "is-md-height-breakpoint": p === "medium",
-      "is-sm-height-breakpoint": p === "small",
-      "is-xs-height-breakpoint": p === "xsmall"
+      "is-xl-height-breakpoint": d === "xlarge",
+      "is-lg-height-breakpoint": d === "large",
+      "is-md-height-breakpoint": d === "medium",
+      "is-sm-height-breakpoint": d === "small",
+      "is-xs-height-breakpoint": d === "xsmall"
     };
-    return g`<div style=${T(r)} class=${y(C("root", v, {
+    return g`<div style=${T(r)} class=${y(x("root", v, {
       hidden: !n || !r && !e
     }))} .ariaHidden=${!n} .ariaLabel=${V(this.heading ?? "")} role=dialog popover=manual ${f(this._containerNode)}>${this._renderMainContainer()}${this._renderPointer()}</div>`;
   }
   _renderPointer() {
-    return !this.dockEnabled || !this.active ? g`<div class="pointer" role=presentation><div class=${y(C("pointer-direction", "shadow"))} ${f(this._pointerNode)}></div></div>` : null;
+    return !this.dockEnabled || !this.active ? g`<div class="pointer" role=presentation><div class=${y(x("pointer-direction", "shadow"))} ${f(this._pointerNode)}></div></div>` : null;
   }
   _renderMainContainer() {
     const t = {
       shadow: this.dockEnabled
     };
-    return g`<div class=${y(C("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} .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

@@ -4,7 +4,7 @@ import type SceneView from "@arcgis/core/views/SceneView.js";
 import type Slide from "@arcgis/core/webscene/Slide.js";
 
 /** @internal */
-export interface PresentationViewModelProperties extends Partial<Pick<PresentationViewModel, "keyboardNavigationEnabled" | "onApplySlideComplete" | "onApplySlideStart" | "slideId" | "view">> {}
+export interface PresentationViewModelProperties extends Partial<Pick<PresentationViewModel, "keyboardNavigationEnabled" | "onApplySlideCancel" | "onApplySlideComplete" | "onApplySlideStart" | "slideId" | "transitionActive" | "view">> {}
 
 /** @internal */
 export default class PresentationViewModel extends Accessor {
@@ -19,11 +19,15 @@ export default class PresentationViewModel extends Accessor {
    */
   accessor keyboardNavigationEnabled: boolean;
   get lastSlideSelected(): boolean;
+  accessor onApplySlideCancel: ((slide: Slide) => void) | undefined;
   accessor onApplySlideComplete: ((slide: Slide) => void) | undefined;
   accessor onApplySlideStart: ((slide: Slide) => void) | undefined;
   accessor slideId: string | undefined;
   get slideIndex(): number;
+  get slides(): Collection<Slide>;
   get slideSelected(): boolean;
+  /** @default false */
+  accessor transitionActive: boolean;
   accessor view: SceneView | undefined;
   get visibleSlides(): Collection<Slide>;
   /**

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

@@ -47,22 +47,29 @@ export abstract class ArcgisPresentation extends LitElement {
    * @default false
    */
   accessor keyboardNavigationEnabled: boolean;
-  /**
-   * Disable display of popup when slide with popup is applied.
-   * Per default the display of popup is disabled.
-   * The events arcgisPopupFeaturesRetrieved and arcgisPopupFeatureNotFound will be emitted also when popups are disabled.
-   *
-   * @default false
-   */
-  accessor popupDisabled: boolean;
   /**
    * specifies the size of the component
    *
    * @default "m"
    */
   accessor scale: "l" | "m" | "s";
+  /**
+   * Disable display of captions when slide is applied.
+   * Per default the display of captions is enabled.
+   *
+   * @default false
+   */
+  accessor slideCaptionsDisabled: boolean;
   /** The id of the slide applied to the view */
   accessor slideId: string | undefined;
+  /**
+   * Disable display of popup when slide with popup is applied.
+   * Per default the display of popup is enabled.
+   * The events arcgisPopupFeaturesRetrieved and arcgisPopupFeatureNotFound will be emitted also when popups are disabled.
+   *
+   * @default false
+   */
+  accessor slidePopupDisabled: boolean;
   /**
    * The view associated with the component. 
    *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-presentation component will be associated with a map or scene component rather than using the `view` property.