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

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

@@ -139,7 +139,7 @@ export abstract class ArcgisPopup extends LitElement {
    */
   accessor actions: Collection<PopupAction>;
   /**
-   * Indicates if the component is active when it is visible and is not [waiting](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/PopupViewModel/#waitingForResult).
+   * Indicates if the component is active when it is visible and is not [waiting](https://developers.arcgis.com/javascript/latest/references/core/popup/Features/#waitingForResult).
    *
    * @default false
    */
@@ -471,7 +471,7 @@ export abstract class ArcgisPopup extends LitElement {
    *
    * @default false
    * @see [fetchFeatures()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#fetchFeatures)
-   * @see [active](https://developers.arcgis.com/javascript/latest/references/core/widgets/Features/FeaturesViewModel/#active)
+   * @see [active](https://developers.arcgis.com/javascript/latest/references/core/popup/Features/#active)
    * @see [clear()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#clear)
    * @since 5.0
    * @example

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

@@ -1,31 +1,32 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as w } from "../../chunks/runtime.js";
-import { css as _, html as h } from "lit";
-import { GenericController as I, useDirection as x } from "@arcgis/lumina/controllers";
-import { LitElement as F, createEvent as S, nothing as u } from "@arcgis/lumina";
-import { u as P } from "../../chunks/useT9n.js";
-import { m as A } from "../../chunks/useViewModel.js";
-import { property as d, subclass as C } from "@arcgis/core/core/accessorSupport/decorators.js";
-import L from "@arcgis/core/core/Accessor.js";
-import y from "@arcgis/core/core/Collection.js";
-import { ignoreAbortErrors as E } from "@arcgis/core/core/promiseUtils.js";
-import { on as O, whenOnce as g, watch as M } from "@arcgis/core/core/reactiveUtils.js";
-import N from "@arcgis/core/Graphic.js";
-import B from "@arcgis/core/layers/Layer.js";
-import T from "@arcgis/core/graphic/CSVGraphicOrigin.js";
-import G from "@arcgis/core/graphic/GeoJSONGraphicOrigin.js";
-import R from "@arcgis/core/graphic/SceneGraphicOrigin.js";
-import $ from "@arcgis/core/graphic/WFSGraphicOrigin.js";
-import V from "@arcgis/core/graphic/BuildingGraphicOrigin.js";
-import k from "@arcgis/core/graphic/FeatureGraphicOrigin.js";
-import { fetchPopupFeaturesFromGraphics as b } from "@arcgis/core/applications/SceneViewer/sceneViewerUtils.js";
-const D = _`:host{width:100%;height:100%;padding:var(--calcite-spacing-none);margin:var(--calcite-spacing-none);display:flex}p{padding:0;margin:0}.root{--internal-attribution-height: 16px;pointer-events:auto;display:flex;align-items:center;gap:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1);box-shadow:var(--arcgis-internal-box-shadow);align-self:flex-end;margin-block:auto calc(var(--calcite-spacing-fixed-xl) + var(--internal-attribution-height));margin-inline-start:var(--calcite-spacing-fixed-xl)}.slide-counter-text{display:flex;align-items:center;justify-content:center;gap:var(--calcite-spacing-base);min-width:64px}.slide-counter-text-element{box-sizing:border-box;max-width:28px;margin:0;padding:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums}`;
-var H = Object.defineProperty, j = Object.getOwnPropertyDescriptor, l = (s, e, t, i) => {
-  for (var r = i > 1 ? void 0 : i ? j(e, t) : e, n = s.length - 1, a; n >= 0; n--)
-    (a = s[n]) && (r = (i ? a(e, t, r) : a(r)) || r);
-  return i && r && H(e, t, r), r;
+import { c as z } from "../../chunks/runtime.js";
+import { css as O, html as u } from "lit";
+import { GenericController as A, proxyExports as R, useDirection as G } from "@arcgis/lumina/controllers";
+import { LitElement as M, createEvent as x, nothing as g } from "@arcgis/lumina";
+import { u as N } from "../../chunks/useT9n.js";
+import { m as $ } from "../../chunks/useViewModel.js";
+import { property as h, subclass as E } from "@arcgis/core/core/accessorSupport/decorators.js";
+import T from "@arcgis/core/core/Accessor.js";
+import I from "@arcgis/core/core/Collection.js";
+import { ignoreAbortErrors as B } from "@arcgis/core/core/promiseUtils.js";
+import { on as V, whenOnce as S, watch as y } from "@arcgis/core/core/reactiveUtils.js";
+import k from "@arcgis/core/Graphic.js";
+import D from "@arcgis/core/layers/Layer.js";
+import H from "@arcgis/core/graphic/CSVGraphicOrigin.js";
+import j from "@arcgis/core/graphic/GeoJSONGraphicOrigin.js";
+import W from "@arcgis/core/graphic/SceneGraphicOrigin.js";
+import K from "@arcgis/core/graphic/WFSGraphicOrigin.js";
+import U from "@arcgis/core/graphic/BuildingGraphicOrigin.js";
+import Q from "@arcgis/core/graphic/FeatureGraphicOrigin.js";
+import { fetchPopupFeaturesFromGraphics as F } from "@arcgis/core/applications/SceneViewer/sceneViewerUtils.js";
+import { s as w } from "../../chunks/resources.js";
+const q = O`:host{width:100%;height:100%;padding:var(--calcite-spacing-none);margin:var(--calcite-spacing-none);display:flex}p{padding:0;margin:0}.root{--internal-attribution-height: 16px;pointer-events:auto;display:flex;align-items:center;gap:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1);box-shadow:var(--arcgis-internal-box-shadow);align-self:flex-end;margin-block:auto calc(var(--calcite-spacing-fixed-xl) + var(--internal-attribution-height));margin-inline-start:var(--calcite-spacing-fixed-xl)}.slide-counter-text{display:flex;align-items:center;justify-content:center;gap:var(--calcite-spacing-base);min-width:64px}.slide-counter-text-element{box-sizing:border-box;max-width:28px;margin:0;padding:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums}`;
+var J = Object.defineProperty, X = Object.getOwnPropertyDescriptor, c = (s, e, t, i) => {
+  for (var r = i > 1 ? void 0 : i ? X(e, t) : e, n = s.length - 1, o; n >= 0; n--)
+    (o = s[n]) && (r = (i ? o(e, t, r) : o(r)) || r);
+  return i && r && J(e, t, r), r;
 };
-let o = class extends L {
+let d = class extends T {
   //#region Lifecycle
   constructor(s) {
     super(s), this.keyboardNavigationEnabled = !1, this._subscribeToSlideEvents = (e) => {
@@ -46,7 +47,7 @@ let o = class extends L {
     this._unSubscribeToSlideEvents(this.visibleSlides);
   }
   get visibleSlides() {
-    return this.view?.map?.presentation?.slides?.filter((s) => !s.hidden) ?? new y();
+    return this.view?.map?.presentation?.slides?.filter((s) => !s.hidden) ?? new I();
   }
   get lastSlideSelected() {
     return this.getSlideIndexBySlideId(this.slideId) === this.visibleSlides.length - 1;
@@ -76,8 +77,8 @@ let o = class extends L {
     const t = ["ArrowLeft", "ArrowRight", "PageUp", "PageDown"];
     if (document.activeElement?.nodeName.toLowerCase() === "arcgis-scene" || !t.includes(s.code))
       return;
-    const r = e === "rtl" ? "ArrowRight" : "ArrowLeft", a = s.code === r || s.code === "PageUp" ? -1 : 1;
-    this.navigateInPresentation(a);
+    const r = e === "rtl" ? "ArrowRight" : "ArrowLeft", o = s.code === r || s.code === "PageUp" ? -1 : 1;
+    this.navigateInPresentation(o);
   }
   //#endregion
   //#region Private Methods
@@ -86,15 +87,15 @@ let o = class extends L {
       return this.visibleSlides.getItemAt(s);
   }
   async _applySlide(s) {
-    this.view && await E(s.applyTo(this.view));
+    this.view && await B(s.applyTo(this.view));
   }
   _startWatchVisibleSlides() {
     this._subscribeToSlideEvents(this.visibleSlides), this.addHandles(
-      O(
+      V(
         () => this.visibleSlides,
         "change",
         (s) => {
-          this._subscribeToSlideEvents(new y(s.added)), this._unSubscribeToSlideEvents(new y(s.removed));
+          this._subscribeToSlideEvents(new I(s.added)), this._unSubscribeToSlideEvents(new I(s.removed));
         },
         {
           onListenerAdd: this._subscribeToSlideEvents,
@@ -111,50 +112,50 @@ let o = class extends L {
   }
   //#endregion
 };
-l([
-  d()
-], o.prototype, "view", 2);
-l([
-  d()
-], o.prototype, "slideId", 2);
-l([
-  d()
-], o.prototype, "keyboardNavigationEnabled", 2);
-l([
-  d()
-], o.prototype, "visibleSlides", 1);
-l([
-  d()
-], o.prototype, "lastSlideSelected", 1);
-l([
-  d()
-], o.prototype, "firstSlideSelected", 1);
-l([
-  d()
-], o.prototype, "slideSelected", 1);
-l([
-  d()
-], o.prototype, "hasOnlyOneSlide", 1);
-l([
-  d()
-], o.prototype, "onApplySlideStart", 2);
-l([
-  d()
-], o.prototype, "onApplySlideComplete", 2);
-l([
-  d()
-], o.prototype, "getSlideIndexBySlideId", 1);
-o = l([
-  C("components.presentation.PresentationViewModel")
-], o);
-class W extends I {
+c([
+  h()
+], d.prototype, "view", 2);
+c([
+  h()
+], d.prototype, "slideId", 2);
+c([
+  h()
+], d.prototype, "keyboardNavigationEnabled", 2);
+c([
+  h()
+], d.prototype, "visibleSlides", 1);
+c([
+  h()
+], d.prototype, "lastSlideSelected", 1);
+c([
+  h()
+], d.prototype, "firstSlideSelected", 1);
+c([
+  h()
+], d.prototype, "slideSelected", 1);
+c([
+  h()
+], d.prototype, "hasOnlyOneSlide", 1);
+c([
+  h()
+], d.prototype, "onApplySlideStart", 2);
+c([
+  h()
+], d.prototype, "onApplySlideComplete", 2);
+c([
+  h()
+], d.prototype, "getSlideIndexBySlideId", 1);
+d = c([
+  E("components.presentation.PresentationViewModel")
+], d);
+class Y extends A {
   constructor(e) {
     super(e);
   }
   hostLoaded() {
     this.component.manager.onLifecycle(() => {
       const e = this.component;
-      g(() => e.referenceElement).then((t) => {
+      S(() => e.referenceElement).then((t) => {
         this._isArcgisScene(t) && (this._sceneRef = t);
       });
     });
@@ -187,15 +188,15 @@ class W extends I {
     const r = t.features?.getItemAt(t.selectedFeatureIndex)?.layerReference;
     if (r?.layerId == null)
       return { success: !1, features: i };
-    const { layer: n, sublayer: a } = this._getLayersFromView(e, r.layerId, r?.sublayerId);
+    const { layer: n, sublayer: o } = this._getLayersFromView(e, r.layerId, r?.sublayerId);
     if (!n)
       return { success: !1, features: i };
-    const c = a ?? n;
-    if (!c || !this._layerTypeSupportsCapturePopup(c))
+    const a = o ?? n;
+    if (!a || !this._layerTypeSupportsCapturePopup(a))
       return { success: !1, features: i };
-    if (i = await this._fetchFeaturesFromQueryable(e, t, n, a, c), i && this._featureHasBeenFilledWithAttributes(i)) {
-      const p = i[0];
-      return this._setFallbackPopupTemplate(p, a, n), this._setFallbackGeometry(p, t?.location), { success: !0, features: i, popupInfo: t };
+    if (i = await this._fetchFeaturesFromQueryable(e, t, n, o, a), i && this._featureHasBeenFilledWithAttributes(i)) {
+      const l = i[0];
+      return this._setFallbackPopupTemplate(l, o, n), this._setFallbackGeometry(l, t?.location), { success: !0, features: i, popupInfo: t };
     }
     return { success: !1, features: i };
   }
@@ -213,16 +214,16 @@ class W extends I {
     return e && e.length > 0 && e[0].attributes && Object.entries(e[0].attributes)?.length > 1;
   }
   async _fetchFeaturesFromQueryable(e, t, i, r, n) {
-    const a = t.features?.getItemAt(t.selectedFeatureIndex);
-    if (a?.id == null)
+    const o = t.features?.getItemAt(t.selectedFeatureIndex);
+    if (o?.id == null)
       return await Promise.resolve([]);
-    const c = await e.whenLayerView(i);
-    await g(() => !c.updating);
-    const m = this._tryGetBuildingComponentSublayerView(i, r, c) ?? c;
-    await g(() => !m.updating);
-    const f = this._createFeatureGraphic(i, r, n, a.id);
-    let v = await b(m, [f]);
-    return this._featureHasBeenFilledWithAttributes(v) || (await g(() => !e.updating), v = await b(m, [f])), v;
+    const a = await e.whenLayerView(i);
+    await S(() => !a.updating);
+    const p = this._tryGetBuildingComponentSublayerView(i, r, a) ?? a;
+    await S(() => !p.updating);
+    const b = this._createFeatureGraphic(i, r, n, o.id);
+    let _ = await F(p, [b]);
+    return this._featureHasBeenFilledWithAttributes(_) || (await S(() => !e.updating), _ = await F(p, [b])), _;
   }
   _tryGetBuildingComponentSublayerView(e, t, i) {
     let r;
@@ -245,23 +246,23 @@ class W extends I {
     e.geometry == null && t && (e.geometry = t.clone());
   }
   _createFeatureGraphic(e, t, i, r) {
-    const n = this._getGlobalIdFieldNameFromLayer(i), a = r.type === "global-id" && n ? n : i.objectIdField, c = this._getGraphicOrigin(e, t), p = new N({ attributes: {}, layer: e, origin: c });
-    return p.attributes[a] = r.value, p;
+    const n = this._getGlobalIdFieldNameFromLayer(i), o = r.type === "global-id" && n ? n : i.objectIdField, a = this._getGraphicOrigin(e, t), l = new k({ attributes: {}, layer: e, origin: a });
+    return l.attributes[o] = r.value, l;
   }
   _getGraphicOrigin(e, t) {
     switch (e.type) {
       case "csv":
-        return new T(e);
+        return new H(e);
       case "feature":
-        return new k(e);
+        return new Q(e);
       case "geojson":
-        return new G(e);
+        return new j(e);
       case "scene":
-        return new R(e);
+        return new W(e);
       case "wfs":
-        return new $(e);
+        return new K(e);
       case "building-scene":
-        return t ? new V(t) : void 0;
+        return t ? new U(t) : void 0;
       default:
         return;
     }
@@ -270,7 +271,7 @@ class W extends I {
     return e != null && ["csv", "feature", "geojson", "wfs", "scene", "building-component"].includes(e.type);
   }
   _isLayer(e) {
-    return !!e && e instanceof B;
+    return !!e && e instanceof D;
   }
   _isBuildingSceneLayer(e) {
     return e?.type === "building-scene";
@@ -280,22 +281,141 @@ class W extends I {
   }
   //#endregion
 }
-const K = (s) => new W(s), z = A(o);
-class Q extends F {
+const Z = (s) => new Y(s), f = Object.freeze({ width: 0, height: 0 }), m = /* @__PURE__ */ new WeakMap(), v = () => ({
+  topLeft: { ...f },
+  topRight: { ...f },
+  bottomLeft: { ...f },
+  bottomRight: { ...f }
+}), C = (s) => ({
+  topLeft: { ...s.topLeft },
+  topRight: { ...s.topRight },
+  bottomLeft: { ...s.bottomLeft },
+  bottomRight: { ...s.bottomRight }
+}), L = (s) => {
+  let e = m.get(s);
+  return e || (e = {
+    observedGroups: /* @__PURE__ */ new Map(),
+    observedSizes: v(),
+    subscribers: /* @__PURE__ */ new Set()
+  }, m.set(s, e)), e;
+}, ee = (s) => {
+  const e = s?.topLeft.value, t = s?.topRight.value, i = s?.bottomLeft.value, r = s?.bottomRight.value;
+  return e && t && i && r ? {
+    topLeft: e,
+    topRight: t,
+    bottomLeft: i,
+    bottomRight: r
+  } : null;
+}, te = (s, e) => w.every((t) => s.get(t) === e[t]), ie = (s) => {
+  const e = C(s.observedSizes);
+  s.subscribers.forEach((t) => t(e));
+}, se = (s, e) => {
+  const t = m.get(s);
+  if (!t)
+    return;
+  let i = !1;
+  e.forEach((r) => {
+    const n = w.find((b) => t.observedGroups.get(b) === r.target);
+    if (!n)
+      return;
+    const { width: o, height: a } = r.contentRect, l = { width: o, height: a }, p = t.observedSizes[n];
+    p.width === l.width && p.height === l.height || (t.observedSizes[n] = l, i = !0);
+  }), i && ie(t);
+}, P = (s, e) => {
+  const t = L(s);
+  t.resizeObserver || (t.resizeObserver = new ResizeObserver((r) => {
+    se(s, r);
+  }));
+  const i = ee(e);
+  if (!i) {
+    t.observedGroups.size > 0 && (t.resizeObserver.disconnect(), t.observedGroups.clear());
+    return;
+  }
+  te(t.observedGroups, i) || (t.resizeObserver.disconnect(), t.observedGroups.clear(), w.forEach((r) => {
+    const n = i[r];
+    t.observedGroups.set(r, n), t.resizeObserver?.observe(n);
+  }));
+}, re = (s, e) => {
+  const t = L(s);
+  return t.subscribers.add(e), e(C(t.observedSizes)), () => {
+    const i = m.get(s);
+    i && (i.subscribers.delete(e), i.subscribers.size === 0 && (i.resizeObserver?.disconnect(), i.observedGroups.clear(), m.delete(s)));
+  };
+};
+class ne extends A {
+  // References to the slot group elements owned by the host component.
+  #t;
+  #e;
+  #i;
+  /**
+   * Creates a controller that measures the host component's slot group containers.
+   *
+   * @param component The host component that owns the slot group elements.
+   */
+  constructor(e) {
+    super(e), this.exports = v();
+  }
+  hostDisconnected() {
+    this.#i?.(), this.#i = void 0, this.#e = void 0, this.#t = void 0, this.exports = v();
+  }
+  hostLifecycle() {
+    return [
+      y(
+        () => this.#s(),
+        (t) => {
+          if (this.#e !== t) {
+            if (this.#i?.(), this.#i = void 0, this.#e = t, this.#t = t?.slotGroupRefs, !t) {
+              this.exports = v();
+              return;
+            }
+            this.#i = re(t, (i) => {
+              this.#r(i) || (this.exports = i);
+            }), P(t, this.#t);
+          }
+        },
+        { sync: !0, initial: !0 }
+      ),
+      y(
+        () => this.#s()?.slotGroupRefs,
+        (t) => {
+          this.#t = t, this.#e && t && P(this.#e, t);
+        },
+        { sync: !0, initial: !0 }
+      )
+    ];
+  }
+  #s() {
+    const { referenceElement: e } = this.component;
+    return e && typeof e != "string" ? e : void 0;
+  }
+  hostUpdated() {
+    !this.#e || !this.#t || P(this.#e, this.#t);
+  }
+  // Compares the newly measured sizes against the currently exported values.
+  #r(e) {
+    const t = this.exports ?? v();
+    return w.every((i) => {
+      const r = t[i], n = e[i];
+      return r.width === n.width && r.height === n.height;
+    });
+  }
+}
+const oe = R(ne), ae = $(d);
+class le extends M {
   constructor() {
-    super(...arguments), this._messages = P(), this.viewModel = z(this), this._direction = x(), this._captureArrowKeysForNavigation = (e) => {
+    super(...arguments), this._messages = N(), this.viewModel = ae(this), this._direction = G(), this._captureArrowKeysForNavigation = (e) => {
       this.viewModel.captureArrowKeysForNavigation(e, this._direction);
-    }, this._useFeatureRefPopup = K(this), this._handleApplySlideStart = () => {
+    }, this._useFeatureRefPopup = Z(this), this._handleApplySlideStart = () => {
       this._useFeatureRefPopup.closePopup();
     }, this._handleApplySlideComplete = (e) => {
       this._useFeatureRefPopup.openPopup(e);
-    }, this.autoDestroyDisabled = !1, this.view = this.viewModel.view, this.scale = "m", this.keyboardNavigationEnabled = !1, this.popupDisabled = !1, this.arcgisPopupFeatureNotFound = S(), this.arcgisPopupFeaturesRetrieved = S(), this.arcgisReady = S();
+    }, this.autoDestroyDisabled = !1, this.view = this.viewModel.view, this.scale = "m", this.keyboardNavigationEnabled = !1, this.popupDisabled = !1, this.arcgisPopupFeatureNotFound = x(), this.arcgisPopupFeaturesRetrieved = x(), this.arcgisReady = x();
   }
   static {
-    this.properties = { slideId: 1, autoDestroyDisabled: 5, view: 0, scale: 1, keyboardNavigationEnabled: 5, popupDisabled: 5 };
+    this.properties = { _slotSizesController: 16, slideId: 1, autoDestroyDisabled: 5, view: 0, scale: 1, keyboardNavigationEnabled: 5, popupDisabled: 5 };
   }
   static {
-    this.styles = D;
+    this.styles = q;
   }
   get slideId() {
     return this.viewModel.slideId;
@@ -307,22 +427,49 @@ class Q extends F {
     await this.manager.destroy();
   }
   loaded() {
-    this.manager.onLifecycle(() => (this.viewModel.onApplySlideStart = this._handleApplySlideStart, this.viewModel.onApplySlideComplete = this._handleApplySlideComplete, M(() => this.keyboardNavigationEnabled, (t) => {
-      document.removeEventListener("keydown", this._captureArrowKeysForNavigation), t && document.addEventListener("keydown", this._captureArrowKeysForNavigation);
-    }, { initial: !0 }))), this.manager.onDisconnected(() => {
-      document.removeEventListener("keydown", this._captureArrowKeysForNavigation);
+    this.manager.onLifecycle(() => {
+      this.viewModel.onApplySlideStart = this._handleApplySlideStart, this.viewModel.onApplySlideComplete = this._handleApplySlideComplete, this._keyboardHandle = y(() => this.keyboardNavigationEnabled, (t) => {
+        document.removeEventListener("keydown", this._captureArrowKeysForNavigation), t && document.addEventListener("keydown", this._captureArrowKeysForNavigation);
+      }, { initial: !0 });
+      const e = this;
+      S(() => e.referenceElement).then((t) => {
+        this._isArcgisScene(t) && (this._slotSizesController = oe(this), this._watchSceneViewSlotSizes());
+      }), this.manager.onDisconnected(() => {
+        document.removeEventListener("keydown", this._captureArrowKeysForNavigation), this._keyboardHandle?.remove();
+      });
     });
   }
+  _isArcgisScene(e) {
+    return e === void 0 || typeof e == "string" ? !1 : "tagName" in e && e.tagName === "ARCGIS-SCENE";
+  }
+  _watchSceneViewSlotSizes() {
+    return y(() => this._slotSizesController, (e) => this._updatePresentationCaptionsPadding(e?.topLeft, e?.topRight, e?.bottomLeft, e?.bottomRight), { initial: !0 });
+  }
+  _updatePresentationCaptionsPadding(e, t, i, r) {
+    const n = this._direction === "ltr" ? e?.width ?? 0 : t?.width ?? 0, o = this._direction === "ltr" ? t?.width ?? 0 : e?.width ?? 0, a = Math.max(e?.height ?? 0, t?.height ?? 0), l = Math.max(i?.height ?? 0, r?.height ?? 0);
+    this.el.style.setProperty("--arcgis-internal-presentation-captions-padding-start", `${n.toString()}px`), this.el.style.setProperty("--arcgis-internal-presentation-captions-padding-end", `${o.toString()}px`);
+    const p = n <= Math.max(a, l) && o <= Math.max(a, l);
+    this.el.style.setProperty("--arcgis-internal-presentation-cover-padding-top", p ? "0" : `${a}px`), this.el.style.setProperty("--arcgis-internal-presentation-cover-padding-bottom", p ? "0" : `${l}px`), this.el.style.setProperty("--arcgis-internal-presentation-cover-padding-start", p ? `${n}px` : "0"), this.el.style.setProperty("--arcgis-internal-presentation-cover-padding-end", p ? `${o}px` : "0");
+  }
   render() {
+    if (this.viewModel.visibleSlides.length === 0)
+      return u`<div></div>`;
+    const e = this.viewModel.visibleSlides.find((r) => r.id === this.slideId), t = this._renderNavigation(), i = this._renderCaptions(e);
+    return u`${i}${t}`;
+  }
+  _renderNavigation() {
     const e = this.viewModel.lastSlideSelected && !this.viewModel.hasOnlyOneSlide, t = this._direction === "rtl", i = t ? "chevron-right" : "chevron-left", r = t ? "chevron-left" : "chevron-right";
-    return this.viewModel.visibleSlides.length === 0 ? h`<div></div>` : h`<div class="root"><calcite-button appearance=transparent icon-start=${i ?? u} kind=neutral .scale=${this.scale} .disabled=${this.viewModel.firstSlideSelected || !this.viewModel.slideSelected} .label=${this._messages.previous} title=${this._messages.previous ?? u} @click=${() => this.viewModel.navigateInPresentation(-1)}></calcite-button><div class="slide-counter-text">${this._renderSlideCounter()}</div><calcite-button appearance=transparent icon-start=${(e ? "reset" : r) ?? u} kind=neutral .scale=${this.scale} .label=${e ? this._messages.restart : this._messages.next} title=${(e ? this._messages.restart : this._messages.next) ?? u} @click=${() => this.viewModel.navigateInPresentation(1)}></calcite-button></div>`;
+    return u`<div class="root"><calcite-button appearance=transparent icon-start=${i ?? g} kind=neutral .scale=${this.scale} .disabled=${this.viewModel.firstSlideSelected || !this.viewModel.slideSelected} .label=${this._messages.previous} title=${this._messages.previous ?? g} @click=${() => this.viewModel.navigateInPresentation(-1)}></calcite-button><div class="slide-counter-text">${this._renderSlideCounter()}</div><calcite-button appearance=transparent icon-start=${(e ? "reset" : r) ?? g} kind=neutral .scale=${this.scale} .label=${e ? this._messages.restart : this._messages.next} title=${(e ? this._messages.restart : this._messages.next) ?? g} @click=${() => this.viewModel.navigateInPresentation(1)}></calcite-button></div>`;
   }
   _renderSlideCounter() {
     const e = this.viewModel.slideIndex + 1, t = this._messages?.slideNavAriaText?.replace("${index}", e.toString()).replace("${numberOfSlides}", this.viewModel.visibleSlides.length.toString());
-    return this.viewModel.slideSelected ? h`<p role=banner aria-label=${t ?? u} aria-live=polite><div class="slide-counter-text-element" data-testId=arcgis-map-presentation-slideIndex>${e}</div><div class="slide-counter-text-element">/</div><p class="slide-counter-text-element" data-testId=arcgis-map-presentation-numberOfSlides>${this.viewModel.visibleSlides.length}</p></p>` : h`<p role=banner data-testId=arcgis-map-presentation-numberOfSlides>${this.viewModel.visibleSlides?.length} ${this._messages?.slides}</p>`;
+    return this.viewModel.slideSelected ? u`<p role=banner aria-label=${t ?? g} aria-live=polite><div class="slide-counter-text-element" data-testId=arcgis-map-presentation-slideIndex>${e}</div><div class="slide-counter-text-element">/</div><p class="slide-counter-text-element" data-testId=arcgis-map-presentation-numberOfSlides>${this.viewModel.visibleSlides.length}</p></p>` : u`<p role=banner data-testId=arcgis-map-presentation-numberOfSlides>${this.viewModel.visibleSlides?.length} ${this._messages?.slides}</p>`;
+  }
+  _renderCaptions(e) {
+    return u`<arcgis-presentation-captions .slide=${e}></arcgis-presentation-captions>`;
   }
 }
-w("arcgis-presentation", Q);
+z("arcgis-presentation", le);
 export {
-  Q as ArcgisPresentation
+  le as ArcgisPresentation
 };

package/dist/components/arcgis-presentation/index.js

@@ -1,2 +1,3 @@
 import "@esri/calcite-components/components/calcite-button";
+import "../arcgis-presentation-captions/index.js";
 export * from "./customElement.js";

package/dist/components/arcgis-presentation-captions/customElement.js

@@ -0,0 +1,37 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { c as g } from "../../chunks/runtime.js";
+import { css as l, html as c } from "lit";
+import { LitElement as s, createEvent as b } from "@arcgis/lumina";
+import "@arcgis/core/core/accessorSupport/decorators.js";
+const p = l`:host{--arcgis-internal-presentation-captions-padding-start: unset;--arcgis-internal-presentation-captions-padding-end: unset;--arcgis-internal-presentation-cover-padding-top: unset;--arcgis-internal-presentation-cover-padding-bottom: unset;--arcgis-internal-presentation-cover-padding-start: unset;--arcgis-internal-presentation-cover-padding-end: unset}.captions-container{width:100%;height:100%;padding-inline-start:calc(var(--arcgis-internal-presentation-captions-padding-start) + var(--calcite-space-lg));padding-inline-end:calc(var(--arcgis-internal-presentation-captions-padding-end) + var(--calcite-space-lg))}.captions{height:auto;position:relative;box-sizing:border-box;transition:padding .05s ease-in 0s;min-height:48px;max-width:max(400px,40%);padding:12px 16px;&:before{content:"";position:absolute;inset-block:-16px -144px;inset-inline:calc(-64px - var(--arcgis-internal-presentation-captions-padding-start)) calc(0px - max(360px,32vw));background:var(--caption-gradient);mask:var(--caption-gradient-mask-before);opacity:var(--calcite-opacity-half);z-index:-1}&:after{content:"";position:absolute;inset:-32px;z-index:-2;background-color:#fff0;mask:var(--caption-gradient-mask-after);mask-mode:luminance;mask-composite:intersect;background-size:cover;backdrop-filter:blur(2px);opacity:var(--calcite-opacity-dark)}}:dir(rtl) .captions{&:before{mask:var(--caption-gradient-mask-before-RTL)}}.title{text-wrap:pretty;text-align:start;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;text-shadow:var(--title-text-shadow);font-size:var(--caption-title-font-size);font-family:Avenir Next World,sans-serif;font-style:normal;font-weight:var(--calcite-font-weight-bold);line-height:var(--calcite-font-line-height-relative-snug);margin-bottom:2px;color:var(--calcite-color-text-1)}.captions-description{text-wrap:pretty;text-align:start;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;text-shadow:var(--description-text-shadow);font-size:var(--caption-description-font-size);font-style:normal;font-weight:var(--calcite-font-weight-medium);line-height:var(--calcite-font-line-height-relative-snug);color:var(--calcite-color-text-1)}.cover-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;padding-block-start:calc(var(--arcgis-internal-presentation-cover-padding-top) + var(--calcite-space-lg));padding-block-end:calc(var(--arcgis-internal-presentation-cover-padding-bottom) + var(--calcite-space-lg))}.cover{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-inline:8px;min-height:88px;min-width:200px;position:relative;padding-inline-start:calc(var(--arcgis-internal-presentation-cover-padding-start) + 16px);padding-inline-end:calc(var(--arcgis-internal-presentation-cover-padding-end) + 16px);opacity:1;transition:opacity .25s,color .25s;&:before{content:"";position:absolute;inset:calc(0vw - max(320px,12vw,18vh)) calc(0vw - max(320px,24vw));border-radius:120px;background:var(--cover-gradient-before);mask:var(--cover-mask-before);opacity:var(--calcite-opacity-half);z-index:-1}&:after{content:"";position:absolute;inset:-32px;z-index:-2;background-color:#fff0;mask:var(--cover-mask-after);mask-mode:luminance;mask-composite:intersect;background-size:cover;backdrop-filter:blur(2px);opacity:var(--calcite-opacity-dark)}}.cover-description{text-wrap:pretty;text-align:center;text-shadow:var(--description-text-shadow);font-size:var(--cover-description-font-size);font-style:normal;font-weight:var(--calcite-font-weight-medium);line-height:var(--calcite-font-line-height-relative-snug);display:-webkit-box;max-width:75ch;overflow-wrap:break-word;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;color:var(--calcite-color-text-1)}:host{width:100%;height:100%;position:absolute;top:0;left:0;display:flex;align-items:flex-start;box-sizing:border-box;--caption-gradient: linear-gradient( 180deg, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 98.3%) 8.1%, rgb(255 255 255 / 95%) 15.5%, rgb(255 255 255 / 90%) 22.5%, rgb(255 255 255 / 83.3%) 29%, rgb(255 255 255 / 73.3%) 35%, rgb(255 255 255 / 65%) 41%, rgb(255 255 255 / 55%) 47%, rgb(255 255 255 / 45%) 53%, rgb(255 255 255 / 35%) 59%, rgb(255 255 255 / 26.7%) 65%, rgb(255 255 255 / 18.3%) 71%, rgb(255 255 255 / 10%) 77%, rgb(255 255 255 / 4%) 84.5%, rgb(255 255 255 / 1%) 91%, rgb(255 255 255 / 0%) 100% );--title-text-shadow: 0 1px 1px #fff3, 0 0 3px #fff2, 0 0 6px #fff2;--caption-gradient-mask-before: linear-gradient( 90deg, rgb(255 255 255 / 100%) 30%, rgb(255 255 255 / 98.3%) 35.6%, rgb(255 255 255 / 95%) 41%, rgb(255 255 255 / 90%) 46%, rgb(255 255 255 / 83.3%) 50.3%, rgb(255 255 255 / 73.3%) 54.5%, rgb(255 255 255 / 65%) 58.7%, rgb(255 255 255 / 55%) 62.9%, rgb(255 255 255 / 45%) 67%, rgb(255 255 255 / 35%) 71%, rgb(255 255 255 / 26.7%) 75.5%, rgb(255 255 255 / 18.3%) 80%, rgb(255 255 255 / 10%) 84%, rgb(255 255 255 / 4%) 89%, rgb(255 255 255 / 1%) 94%, rgb(255 255 255 / 0%) 100% );--caption-gradient-mask-before-RTL: linear-gradient( 270deg, rgb(255 255 255 / 100%) 30%, rgb(255 255 255 / 98.3%) 35.6%, rgb(255 255 255 / 95%) 41%, rgb(255 255 255 / 90%) 46%, rgb(255 255 255 / 83.3%) 50.3%, rgb(255 255 255 / 73.3%) 54.5%, rgb(255 255 255 / 65%) 58.7%, rgb(255 255 255 / 55%) 62.9%, rgb(255 255 255 / 45%) 67%, rgb(255 255 255 / 35%) 71%, rgb(255 255 255 / 26.7%) 75.5%, rgb(255 255 255 / 18.3%) 80%, rgb(255 255 255 / 10%) 84%, rgb(255 255 255 / 4%) 89%, rgb(255 255 255 / 1%) 94%, rgb(255 255 255 / 0%) 100% );--caption-gradient-mask-after: linear-gradient( 90deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% ), linear-gradient( 180deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% ), linear-gradient( 270deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% ), linear-gradient( 0deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% );--description-text-shadow: 0 .5px .5px #fff2, 0 1px 1px #fff2, 0 0 8px #fff2;--caption-title-font-size: max(var(--calcite-font-size-xxl), calc(18px + .64vw) );--caption-description-font-size: max(var(--calcite-font-size), calc(10px + .4vw) );--cover-description-font-size: max(var(--calcite-font-size-md), calc(10px + .5vw) );--cover-gradient-before: linear-gradient( 0deg, rgb(255 255 255 / 0%) 0, rgb(255 255 255 / 1%) 4%, rgb(255 255 255 / 4%) 7.7%, rgb(255 255 255 / 10%) 11.2%, rgb(255 255 255 / 18.3%) 14.5%, rgb(255 255 255 / 26.7%) 17.5%, rgb(255 255 255 / 35%) 20.5%, rgb(255 255 255 / 45%) 23.5%, rgb(255 255 255 / 55%) 26.5%, rgb(255 255 255 / 65%) 29.5%, rgb(255 255 255 / 73.3%) 32.5%, rgb(255 255 255 / 83.3%) 35.5%, rgb(255 255 255 / 90%) 38.5%, rgb(255 255 255 / 95%) 42.2%, rgb(255 255 255 / 98.3%) 46%, rgb(255 255 255 / 100%) 50%, rgb(255 255 255 / 98.3%) 54%, rgb(255 255 255 / 95%) 57.8%, rgb(255 255 255 / 90%) 61.5%, rgb(255 255 255 / 83.3%) 64.5%, rgb(255 255 255 / 73.3%) 67.5%, rgb(255 255 255 / 65%) 70.5%, rgb(255 255 255 / 55%) 73.5%, rgb(255 255 255 / 45%) 76.5%, rgb(255 255 255 / 35%) 79.5%, rgb(255 255 255 / 26.7%) 82.5%, rgb(255 255 255 / 18.3%) 85.5%, rgb(255 255 255 / 10%) 88.8%, rgb(255 255 255 / 4%) 92.3%, rgb(255 255 255 / 1%) 96%, rgb(255 255 255 / 0%) 100% );--cover-mask-before: linear-gradient( 90deg, rgb(255 255 255 / 0%) 0, rgb(255 255 255 / 1%) 3.2%, rgb(255 255 255 / 4%) 6.2%, rgb(255 255 255 / 10%) 9%, rgb(255 255 255 / 18.3%) 11.6%, rgb(255 255 255 / 26.7%) 14%, rgb(255 255 255 / 35%) 16.4%, rgb(255 255 255 / 45%) 18.8%, rgb(255 255 255 / 55%) 21.2%, rgb(255 255 255 / 65%) 23.6%, rgb(255 255 255 / 73.3%) 26%, rgb(255 255 255 / 83.3%) 28.4%, rgb(255 255 255 / 90%) 30.8%, rgb(255 255 255 / 95%) 33.8%, rgb(255 255 255 / 98.3%) 36.8%, rgb(255 255 255 / 100%) 40%, rgb(255 255 255 / 100%) 60%, rgb(255 255 255 / 98.3%) 63.2%, rgb(255 255 255 / 95%) 66.2%, rgb(255 255 255 / 90%) 69.2%, rgb(255 255 255 / 83.3%) 71.6%, rgb(255 255 255 / 73.3%) 74%, rgb(255 255 255 / 65%) 76.4%, rgb(255 255 255 / 55%) 78.8%, rgb(255 255 255 / 45%) 81.2%, rgb(255 255 255 / 35%) 83.6%, rgb(255 255 255 / 26.7%) 86%, rgb(255 255 255 / 18.3%) 88.4%, rgb(255 255 255 / 10%) 91%, rgb(255 255 255 / 4%) 93.9%, rgb(255 255 255 / 1%) 96.8%, rgb(255 255 255 / 0%) 100% );--cover-mask-after: linear-gradient( 90deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% ), linear-gradient( 180deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% ), linear-gradient( 270deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% ), linear-gradient( 0deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% );--cover-gradient-phone: linear-gradient( 0deg, rgb(255 255 255 / 0%) .59%, rgb(255 255 255 / 4%) 4.94%, rgb(255 255 255 / 50%) 25.87%, rgb(255 255 255 / 70%) 37.02%, rgb(255 255 255 / 80%) 48.43%, rgb(255 255 255 / 70%) 60.34%, rgb(255 255 255 / 30%) 80.55%, rgb(255 255 255 / 4%) 93.22%, rgb(255 255 255 / 0%) 99.74% );.fadeOut{opacity:1!important}}`, n = 50, o = 256;
+class d extends s {
+  constructor() {
+    super(...arguments), this.autoDestroyDisabled = !1, this.arcgisReady = b();
+  }
+  static {
+    this.properties = { slide: 0, autoDestroyDisabled: 5 };
+  }
+  static {
+    this.styles = p;
+  }
+  async destroy() {
+    await this.manager.destroy();
+  }
+  render() {
+    const e = this.slide?.layout;
+    if (!this.slide?.layout || this.slide.layout === "none")
+      return null;
+    const r = this.slide.title?.text, t = this.slide.description?.text, a = r?.length && r.length > n ? `${r?.substring(0, n)}...` : r, i = t?.length && t.length > o ? `${t?.substring(0, o)}...` : t;
+    return e === "caption" ? this._renderCaptions(a, i) : this._renderCover(a, i);
+  }
+  _renderCover(e, r) {
+    return c`<div class="cover-container"><div class="cover"><div class="title">${e}</div><div class="cover-description">${r}</div></div></div>`;
+  }
+  _renderCaptions(e, r) {
+    return c`<div class="captions-container"><div class="captions"><div class="title">${e}</div><div class="captions-description">${r}</div></div></div>`;
+  }
+}
+g("arcgis-presentation-captions", d);
+export {
+  d as ArcgisPresentationCaptions
+};

package/dist/components/arcgis-presentation-captions/index.js

@@ -0,0 +1 @@
+export * from "./customElement.js";

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

@@ -11,7 +11,8 @@ import { reEmitEvent as t, reCreateAccessor as y, makeAccessorController as w }
 import { createRef as o, ref as h } from "lit/directives/ref.js";
 import { U as f, u as b, a as V } from "../../chunks/useArcgisViewReadyError.js";
 import { s as C } from "../../chunks/esri-main.js";
-import { s as E, C as c } from "../../chunks/slots.js";
+import { s as E } from "../../chunks/slots.js";
+import { C as c } from "../../chunks/resources.js";
 import { b as _, c as A, p as P, i as R } from "../../chunks/component-utils.js";
 const D = w(g, {}), I = w(u, {});
 class M extends d {