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

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

@@ -1,16 +1,16 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as z } from "../../chunks/runtime.js";
 import { css as O, html as u } from "lit";
-import { GenericController as F, proxyExports as R, useDirection as G } from "@arcgis/lumina/controllers";
-import { LitElement as M, createEvent as I, nothing as S } from "@arcgis/lumina";
-import { u as $ } from "../../chunks/useT9n.js";
+import { GenericController as L, proxyExports as $, useDirection as M } from "@arcgis/lumina/controllers";
+import { LitElement as R, createEvent as I, nothing as v } from "@arcgis/lumina";
+import { u as G } from "../../chunks/useT9n.js";
 import { m as N } from "../../chunks/useViewModel.js";
-import { property as c, subclass as B } from "@arcgis/core/core/accessorSupport/decorators.js";
+import { property as d, subclass as B } from "@arcgis/core/core/accessorSupport/decorators.js";
 import E from "@arcgis/core/core/Accessor.js";
 import y from "@arcgis/core/core/Collection.js";
 import { ignoreAbortErrors as T } from "@arcgis/core/core/promiseUtils.js";
-import { watch as g, on as H, whenOnce as v } from "@arcgis/core/core/reactiveUtils.js";
-import D from "@arcgis/core/Graphic.js";
+import { watch as g, on as D, whenOnce as S } from "@arcgis/core/core/reactiveUtils.js";
+import H from "@arcgis/core/Graphic.js";
 import V from "@arcgis/core/layers/Layer.js";
 import k from "@arcgis/core/graphic/CSVGraphicOrigin.js";
 import j from "@arcgis/core/graphic/GeoJSONGraphicOrigin.js";
@@ -20,20 +20,20 @@ import U from "@arcgis/core/graphic/BuildingGraphicOrigin.js";
 import Q from "@arcgis/core/graphic/FeatureGraphicOrigin.js";
 import { fetchPopupFeaturesFromGraphics as A } from "@arcgis/core/applications/SceneViewer/sceneViewerUtils.js";
 import { s as _ } 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}`;
+const q = O`:host{width:100%;height:100%;padding:var(--calcite-spacing-none);margin:var(--calcite-spacing-none);display:flex;--internal-attribution-height: 16px;--arcgis-internal-presentation-padding-start: unset;--arcgis-internal-presentation-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}p{padding:0;margin:0}.root{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%}.presentation-content{display:flex;width:100%;justify-content:flex-end;padding-top:var(--calcite-spacing-lg);padding-inline-start:calc(var(--calcite-spacing-lg)+ var(--arcgis-internal-presentation-padding-start));padding-inline-end:calc(var(--calcite-spacing-lg) + var(--arcgis-internal-presentation-padding-end))}.navigation{width:fit-content;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);margin-block:auto calc(var(--calcite-spacing-lg) + var(--internal-attribution-height));margin-inline-start:var(--calcite-spacing-lg)}.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}.legend{pointer-events:all;box-shadow:var(--calcite-shadow-sm);max-width:300px;height:auto;max-height:calc(100vh - 136px);overflow:hidden auto}`;
 var J = Object.defineProperty, X = Object.getOwnPropertyDescriptor, l = (i, e, t, s) => {
-  for (var r = s > 1 ? void 0 : s ? X(e, t) : e, n = i.length - 1, o; n >= 0; n--)
-    (o = i[n]) && (r = (s ? o(e, t, r) : o(r)) || r);
-  return s && r && J(e, t, r), r;
+  for (var n = s > 1 ? void 0 : s ? X(e, t) : e, r = i.length - 1, o; r >= 0; r--)
+    (o = i[r]) && (n = (s ? o(e, t, n) : o(n)) || n);
+  return s && n && J(e, t, n), n;
 };
 let a = class extends E {
   //endregion
   //#region Lifecycle
   constructor(i) {
-    super(i), this.transitionActive = !1, this.keyboardNavigationEnabled = !1, this._subscribeToSlideEvents = (e) => {
+    super(i), this.transitionActive = !1, this.showLegend = !1, this.keyboardNavigationEnabled = !1, this._subscribeToSlideEvents = (e) => {
       this._unsubscribeToSlideEvents(e), e.forEach((t) => {
-        const s = t.on("apply-slide-start", () => this._onApplySlideStart(t)), r = t.on("apply-slide-complete", () => this._onApplySlideComplete(t)), n = t.on("apply-slide-cancel", () => this._onApplySlideCancel(t));
-        this.addHandles(s, t.id), this.addHandles(r, t.id), this.addHandles(n, t.id);
+        const s = t.on("apply-slide-start", () => this._onApplySlideStart(t)), n = t.on("apply-slide-complete", () => this._onApplySlideComplete(t)), r = t.on("apply-slide-cancel", () => this._onApplySlideCancel(t));
+        this.addHandles(s, t.id), this.addHandles(n, t.id), this.addHandles(r, t.id);
       });
     }, this._unsubscribeToSlideEvents = (e) => {
       e.forEach((t) => {
@@ -108,7 +108,7 @@ let a = class extends E {
     const t = ["ArrowLeft", "ArrowRight", "PageUp", "PageDown"];
     if (document.activeElement?.nodeName.toLowerCase() === "arcgis-scene" || !t.includes(i.code))
       return;
-    const r = e === "rtl" ? "ArrowRight" : "ArrowLeft", o = i.code === r || i.code === "PageUp" ? -1 : 1;
+    const n = e === "rtl" ? "ArrowRight" : "ArrowLeft", o = i.code === n || i.code === "PageUp" ? -1 : 1;
     this.navigateInPresentation(o);
   }
   //#endregion
@@ -129,7 +129,7 @@ let a = class extends E {
   }
   _startWatchSlides() {
     this._subscribeToSlideEvents(this.slides), this.addHandles(
-      H(
+      D(
         () => this.slides,
         "change",
         (i) => {
@@ -143,80 +143,83 @@ let a = class extends E {
     );
   }
   _onApplySlideStart(i) {
-    this._slideId = i.id, this.transitionActive = !0, this.onApplySlideStart?.(i);
+    this._slideId = i.id, this.transitionActive = !0, this.showLegend = !1, this.onApplySlideStart?.(i);
   }
   _onApplySlideComplete(i) {
-    this.transitionActive = !1, this.onApplySlideComplete?.(i);
+    this.transitionActive = !1, this.showLegend = !!i.elements.legendInfo?.visible, this.onApplySlideComplete?.(i);
   }
   _onApplySlideCancel(i) {
-    this.transitionActive = !1, this.onApplySlideCancel?.(i);
+    this.transitionActive = !1, this.showLegend = !!i.elements.legendInfo?.visible, this.onApplySlideCancel?.(i);
   }
   //#endregion
 };
 l([
-  c()
+  d()
 ], a.prototype, "_slideId", 2);
 l([
-  c()
+  d()
 ], a.prototype, "view", 2);
 l([
-  c()
+  d()
 ], a.prototype, "slideId", 1);
 l([
-  c()
+  d()
 ], a.prototype, "transitionActive", 2);
 l([
-  c()
+  d()
+], a.prototype, "showLegend", 2);
+l([
+  d()
 ], a.prototype, "keyboardNavigationEnabled", 2);
 l([
-  c()
+  d()
 ], a.prototype, "visibleSlides", 1);
 l([
-  c()
+  d()
 ], a.prototype, "slides", 1);
 l([
-  c()
+  d()
 ], a.prototype, "lastSlideSelected", 1);
 l([
-  c()
+  d()
 ], a.prototype, "firstSlideSelected", 1);
 l([
-  c()
+  d()
 ], a.prototype, "slideSelected", 1);
 l([
-  c()
+  d()
 ], a.prototype, "hasOnlyOneSlide", 1);
 l([
-  c()
+  d()
 ], a.prototype, "onApplySlideStart", 2);
 l([
-  c()
+  d()
 ], a.prototype, "onApplySlideComplete", 2);
 l([
-  c()
+  d()
 ], a.prototype, "onApplySlideCancel", 2);
 l([
-  c()
+  d()
 ], a.prototype, "getSlideIndexBySlideId", 1);
 a = l([
   B("components.presentation.PresentationViewModel")
 ], a);
-class Y extends F {
+class Y extends L {
   constructor(e) {
     super(e);
   }
   hostLoaded() {
     this.component.manager.onLifecycle(() => {
       const e = this.component;
-      v(() => e.referenceElement).then((t) => {
+      S(() => e.referenceElement).then((t) => {
         this._isArcgisScene(t) && (this._sceneRef = t);
       });
     });
   }
   openPopup(e) {
     this.component.view && this.component.slideId === e.id && e.elements.popupInfo != null && this._preparePopupFeature(this.component.view, e.elements.popupInfo).then(
-      ({ success: t, features: s, popupInfo: r }) => {
-        this.component.slideId === e.id && (t ? this._handlePopupFeatureFound(e, s, r) : this.component.arcgisPopupFeatureNotFound.emit({ slide: e }));
+      ({ success: t, features: s, popupInfo: n }) => {
+        this.component.slideId === e.id && (t ? this._handlePopupFeatureFound(e, s, n) : this.component.arcgisPopupFeatureNotFound.emit({ slide: e }));
       }
     );
   }
@@ -228,61 +231,61 @@ class Y extends F {
     this.component.slidePopupDisabled || this._sceneRef?.closePopup();
   }
   async _handlePopupFeatureFound(e, t, s) {
-    const r = s?.location ?? void 0;
-    this.component.arcgisPopupFeaturesRetrieved.emit({ slide: e, features: t, location: r }), this.component.slidePopupDisabled || await this._sceneRef?.openPopup({
+    const n = s?.location ?? void 0;
+    this.component.arcgisPopupFeaturesRetrieved.emit({ slide: e, features: t, location: n }), this.component.slidePopupDisabled || await this._sceneRef?.openPopup({
       features: t,
-      location: r
+      location: n
     });
   }
   async _preparePopupFeature(e, t) {
     let s = [];
     if (!t.features?.length || t.features.length === 0)
       return { success: !1, features: s };
-    const r = t.features?.getItemAt(t.selectedFeatureIndex)?.layerReference;
-    if (r?.layerId == null)
+    const n = t.features?.getItemAt(t.selectedFeatureIndex)?.layerReference;
+    if (n?.layerId == null)
       return { success: !1, features: s };
-    const { layer: n, sublayer: o } = this._getLayersFromView(e, r.layerId, r?.sublayerId);
-    if (!n)
+    const { layer: r, sublayer: o } = this._getLayersFromView(e, n.layerId, n?.sublayerId);
+    if (!r)
       return { success: !1, features: s };
-    const d = o ?? n;
-    if (!d || !this._layerTypeSupportsCapturePopup(d))
+    const c = o ?? r;
+    if (!c || !this._layerTypeSupportsCapturePopup(c))
       return { success: !1, features: s };
-    if (s = await this._fetchFeaturesFromQueryable(e, t, n, o, d), s && this._featureHasBeenFilledWithAttributes(s)) {
+    if (s = await this._fetchFeaturesFromQueryable(e, t, r, o, c), s && this._featureHasBeenFilledWithAttributes(s)) {
       const p = s[0];
-      return this._setFallbackPopupTemplate(p, o, n), this._setFallbackGeometry(p, t?.location), { success: !0, features: s, popupInfo: t };
+      return this._setFallbackPopupTemplate(p, o, r), this._setFallbackGeometry(p, t?.location), { success: !0, features: s, popupInfo: t };
     }
     return { success: !1, features: s };
   }
   _getLayersFromView(e, t, s) {
-    const r = e.map?.findLayerById(t) ?? void 0, n = this._getBuildingSceneLayerSublayer(r, s);
-    return { layer: r, sublayer: n };
+    const n = e.map?.findLayerById(t) ?? void 0, r = this._getBuildingSceneLayerSublayer(n, s);
+    return { layer: n, sublayer: r };
   }
   _getBuildingSceneLayerSublayer(e, t) {
     let s;
     return e && this._isLayer(e) && this._isBuildingSceneLayer(e) && t != null && (s = e.allSublayers.find(
-      (r) => r.id === t && r.type === "building-component"
+      (n) => n.id === t && n.type === "building-component"
     )), s;
   }
   _featureHasBeenFilledWithAttributes(e) {
     return e && e.length > 0 && e[0].attributes && Object.entries(e[0].attributes)?.length > 1;
   }
-  async _fetchFeaturesFromQueryable(e, t, s, r, n) {
+  async _fetchFeaturesFromQueryable(e, t, s, n, r) {
     const o = t.features?.getItemAt(t.selectedFeatureIndex);
     if (o?.id == null)
       return await Promise.resolve([]);
-    const d = await e.whenLayerView(s);
-    await v(() => !d.updating);
-    const h = this._tryGetBuildingComponentSublayerView(s, r, d) ?? d;
-    await v(() => !h.updating);
-    const f = this._createFeatureGraphic(s, r, n, o.id);
+    const c = await e.whenLayerView(s);
+    await S(() => !c.updating);
+    const h = this._tryGetBuildingComponentSublayerView(s, n, c) ?? c;
+    await S(() => !h.updating);
+    const f = this._createFeatureGraphic(s, n, r, o.id);
     let x = await A(h, [f]);
-    return this._featureHasBeenFilledWithAttributes(x) || (await v(() => !e.updating), x = await A(h, [f])), x;
+    return this._featureHasBeenFilledWithAttributes(x) || (await S(() => !e.updating), x = await A(h, [f])), x;
   }
   _tryGetBuildingComponentSublayerView(e, t, s) {
-    let r;
-    return this._isLayer(e) && this._isBuildingSceneLayer(e) && t != null && (r = s.sublayerViews.find(
-      (n) => n.sublayer.id === t.id
-    )), r;
+    let n;
+    return this._isLayer(e) && this._isBuildingSceneLayer(e) && t != null && (n = s.sublayerViews.find(
+      (r) => r.sublayer.id === t.id
+    )), n;
   }
   _setFallbackPopupTemplate(e, t, s) {
     e.popupTemplate == null && (e.popupTemplate = t?.popupTemplate ? t.popupTemplate : s.popupTemplate);
@@ -298,9 +301,9 @@ class Y extends F {
   _setFallbackGeometry(e, t) {
     e.geometry == null && t && (e.geometry = t.clone());
   }
-  _createFeatureGraphic(e, t, s, r) {
-    const n = this._getGlobalIdFieldNameFromLayer(s), o = r.type === "global-id" && n ? n : s.objectIdField, d = this._getGraphicOrigin(e, t), p = new D({ attributes: {}, layer: e, origin: d });
-    return p.attributes[o] = r.value, p;
+  _createFeatureGraphic(e, t, s, n) {
+    const r = this._getGlobalIdFieldNameFromLayer(s), o = n.type === "global-id" && r ? r : s.objectIdField, c = this._getGraphicOrigin(e, t), p = new H({ attributes: {}, layer: e, origin: c });
+    return p.attributes[o] = n.value, p;
   }
   _getGraphicOrigin(e, t) {
     switch (e.type) {
@@ -339,12 +342,12 @@ const Z = (i) => new Y(i), w = Object.freeze({ width: 0, height: 0 }), b = /* @_
   topRight: { ...w },
   bottomLeft: { ...w },
   bottomRight: { ...w }
-}), C = (i) => ({
+}), F = (i) => ({
   topLeft: { ...i.topLeft },
   topRight: { ...i.topRight },
   bottomLeft: { ...i.bottomLeft },
   bottomRight: { ...i.bottomRight }
-}), L = (i) => {
+}), C = (i) => {
   let e = b.get(i);
   return e || (e = {
     observedGroups: /* @__PURE__ */ new Map(),
@@ -352,50 +355,50 @@ const Z = (i) => new Y(i), w = Object.freeze({ width: 0, height: 0 }), b = /* @_
     subscribers: /* @__PURE__ */ new Set()
   }, b.set(i, e)), e;
 }, ee = (i) => {
-  const e = i?.topLeft.value, t = i?.topRight.value, s = i?.bottomLeft.value, r = i?.bottomRight.value;
-  return e && t && s && r ? {
+  const e = i?.topLeft.value, t = i?.topRight.value, s = i?.bottomLeft.value, n = i?.bottomRight.value;
+  return e && t && s && n ? {
     topLeft: e,
     topRight: t,
     bottomLeft: s,
-    bottomRight: r
+    bottomRight: n
   } : null;
 }, te = (i, e) => _.every((t) => i.get(t) === e[t]), ie = (i) => {
-  const e = C(i.observedSizes);
+  const e = F(i.observedSizes);
   i.subscribers.forEach((t) => t(e));
 }, se = (i, e) => {
   const t = b.get(i);
   if (!t)
     return;
   let s = !1;
-  e.forEach((r) => {
-    const n = _.find((f) => t.observedGroups.get(f) === r.target);
-    if (!n)
+  e.forEach((n) => {
+    const r = _.find((f) => t.observedGroups.get(f) === n.target);
+    if (!r)
       return;
-    const { width: o, height: d } = r.contentRect, p = { width: o, height: d }, h = t.observedSizes[n];
-    h.width === p.width && h.height === p.height || (t.observedSizes[n] = p, s = !0);
+    const { width: o, height: c } = n.contentRect, p = { width: o, height: c }, h = t.observedSizes[r];
+    h.width === p.width && h.height === p.height || (t.observedSizes[r] = p, s = !0);
   }), s && ie(t);
 }, P = (i, e) => {
-  const t = L(i);
-  t.resizeObserver || (t.resizeObserver = new ResizeObserver((r) => {
-    se(i, r);
+  const t = C(i);
+  t.resizeObserver || (t.resizeObserver = new ResizeObserver((n) => {
+    se(i, n);
   }));
   const s = ee(e);
   if (!s) {
     t.observedGroups.size > 0 && (t.resizeObserver.disconnect(), t.observedGroups.clear());
     return;
   }
-  te(t.observedGroups, s) || (t.resizeObserver.disconnect(), t.observedGroups.clear(), _.forEach((r) => {
-    const n = s[r];
-    t.observedGroups.set(r, n), t.resizeObserver?.observe(n);
+  te(t.observedGroups, s) || (t.resizeObserver.disconnect(), t.observedGroups.clear(), _.forEach((n) => {
+    const r = s[n];
+    t.observedGroups.set(n, r), t.resizeObserver?.observe(r);
   }));
-}, re = (i, e) => {
-  const t = L(i);
-  return t.subscribers.add(e), e(C(t.observedSizes)), () => {
+}, ne = (i, e) => {
+  const t = C(i);
+  return t.subscribers.add(e), e(F(t.observedSizes)), () => {
     const s = b.get(i);
     s && (s.subscribers.delete(e), s.subscribers.size === 0 && (s.resizeObserver?.disconnect(), s.observedGroups.clear(), b.delete(i)));
   };
 };
-class ne extends F {
+class re extends L {
   // References to the slot group elements owned by the host component.
   #t;
   #e;
@@ -421,8 +424,8 @@ class ne extends F {
               this.exports = m();
               return;
             }
-            this.#i = re(t, (s) => {
-              this.#r(s) || (this.exports = s);
+            this.#i = ne(t, (s) => {
+              this.#n(s) || (this.exports = s);
             }), P(t, this.#t);
           }
         },
@@ -445,27 +448,27 @@ class ne extends F {
     !this.#e || !this.#t || P(this.#e, this.#t);
   }
   // Compares the newly measured sizes against the currently exported values.
-  #r(e) {
+  #n(e) {
     const t = this.exports ?? m();
     return _.every((s) => {
-      const r = t[s], n = e[s];
-      return r.width === n.width && r.height === n.height;
+      const n = t[s], r = e[s];
+      return n.width === r.width && n.height === r.height;
     });
   }
 }
-const oe = R(ne), ae = N(a);
-class le extends M {
+const oe = $(re), ae = N(a);
+class le extends R {
   constructor() {
-    super(...arguments), this._messages = $(), this.viewModel = ae(this), this._direction = G(), this._captureArrowKeysForNavigation = (e) => {
+    super(...arguments), this._messages = G(), this.viewModel = ae(this), this._direction = M(), this._captureArrowKeysForNavigation = (e) => {
       this.viewModel.captureArrowKeysForNavigation(e, this._direction);
     }, 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.slidePopupDisabled = !1, this.slideCaptionsDisabled = !1, this.arcgisPopupFeatureNotFound = I(), this.arcgisPopupFeaturesRetrieved = I(), this.arcgisReady = I();
+    }, this.autoDestroyDisabled = !1, this.view = this.viewModel.view, this.scale = "m", this.keyboardNavigationEnabled = !1, this.slidePopupDisabled = !1, this.slideCaptionsDisabled = !1, this.slideLegendDisabled = !1, this.arcgisPopupFeatureNotFound = I(), this.arcgisPopupFeaturesRetrieved = I(), this.arcgisReady = I();
   }
   static {
-    this.properties = { _slotSizesController: 16, slideId: 1, autoDestroyDisabled: 5, view: 0, scale: 1, keyboardNavigationEnabled: 5, slidePopupDisabled: 5, slideCaptionsDisabled: 5 };
+    this.properties = { _slotSizesController: 16, slideId: 1, autoDestroyDisabled: 5, view: 0, scale: 1, keyboardNavigationEnabled: 5, slidePopupDisabled: 5, slideCaptionsDisabled: 5, slideLegendDisabled: 5 };
   }
   static {
     this.styles = q;
@@ -485,7 +488,7 @@ class le extends M {
         document.removeEventListener("keydown", this._captureArrowKeysForNavigation), t && document.addEventListener("keydown", this._captureArrowKeysForNavigation);
       }, { initial: !0 });
       const e = this;
-      v(() => e.referenceElement).then((t) => {
+      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();
@@ -498,29 +501,32 @@ class le extends M {
   _watchSceneViewSlotSizes() {
     return g(() => this._slotSizesController, (e) => this._updatePresentationCaptionsPadding(e?.topLeft, e?.topRight, e?.bottomLeft, e?.bottomRight), { initial: !0 });
   }
-  _updatePresentationCaptionsPadding(e, t, s, r) {
-    const n = this._direction === "ltr" ? e?.width ?? 0 : t?.width ?? 0, o = this._direction === "ltr" ? t?.width ?? 0 : e?.width ?? 0, d = Math.max(e?.height ?? 0, t?.height ?? 0), p = Math.max(s?.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 h = n <= Math.max(d, p) && o <= Math.max(d, p);
-    this.el.style.setProperty("--arcgis-internal-presentation-cover-padding-top", h ? "0" : `${d}px`), this.el.style.setProperty("--arcgis-internal-presentation-cover-padding-bottom", h ? "0" : `${p}px`), this.el.style.setProperty("--arcgis-internal-presentation-cover-padding-start", h ? `${n}px` : "0"), this.el.style.setProperty("--arcgis-internal-presentation-cover-padding-end", h ? `${o}px` : "0");
+  _updatePresentationCaptionsPadding(e, t, s, n) {
+    const r = this._direction === "ltr" ? e?.width ?? 0 : t?.width ?? 0, o = this._direction === "ltr" ? t?.width ?? 0 : e?.width ?? 0, c = Math.max(e?.height ?? 0, t?.height ?? 0), p = Math.max(s?.height ?? 0, n?.height ?? 0);
+    r > 0 ? this.el.style.setProperty("--arcgis-internal-presentation-padding-start", `calc(var(--calcite-spacing-lg) + ${r.toString()}px)`) : this.el.style.setProperty("--arcgis-internal-presentation-padding-start", "0px"), o > 0 ? this.el.style.setProperty("--arcgis-internal-presentation-padding-end", `calc(var(--calcite-spacing-lg) + ${o.toString()}px)`) : this.el.style.setProperty("--arcgis-internal-presentation-padding-end", "0px");
+    const h = r <= Math.max(c, p) && o <= Math.max(c, p);
+    this.el.style.setProperty("--arcgis-internal-presentation-cover-padding-top", h ? "0" : `${c}px`), this.el.style.setProperty("--arcgis-internal-presentation-cover-padding-bottom", h ? "0" : `${p}px`), this.el.style.setProperty("--arcgis-internal-presentation-cover-padding-start", h ? `${r}px` : "0"), this.el.style.setProperty("--arcgis-internal-presentation-cover-padding-end", h ? `${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(), s = this._renderCaptions(e);
-    return u`${s}${t}`;
+    const e = this.viewModel.visibleSlides.find((r) => r.id === this.slideId), t = this._renderNavigation(), s = this._renderCaptions(e), n = this._renderLegend();
+    return u`<div class="root"><div class="presentation-content">${s}${n}</div>${t}</div>`;
   }
   _renderNavigation() {
-    const e = this.viewModel.lastSlideSelected && !this.viewModel.hasOnlyOneSlide, t = this._direction === "rtl", s = t ? "chevron-right" : "chevron-left", r = t ? "chevron-left" : "chevron-right";
-    return u`<div class="root"><calcite-button appearance=transparent icon-start=${s ?? S} kind=neutral .scale=${this.scale} .disabled=${this.viewModel.firstSlideSelected || !this.viewModel.slideSelected} .label=${this._messages.previous} title=${this._messages.previous ?? S} @click=${() => this.viewModel.navigateInPresentation(-1)}></calcite-button><div class="slide-counter-text">${this._renderSlideCounter()}</div><calcite-button appearance=transparent icon-start=${(e ? "reset" : r) ?? S} kind=neutral .scale=${this.scale} .label=${e ? this._messages.restart : this._messages.next} title=${(e ? this._messages.restart : this._messages.next) ?? S} @click=${() => this.viewModel.navigateInPresentation(1)}></calcite-button></div>`;
+    const e = this.viewModel.lastSlideSelected && !this.viewModel.hasOnlyOneSlide, t = this._direction === "rtl", s = t ? "chevron-right" : "chevron-left", n = t ? "chevron-left" : "chevron-right";
+    return u`<div class="navigation"><calcite-button appearance=transparent icon-start=${s ?? v} kind=neutral .scale=${this.scale} .disabled=${this.viewModel.firstSlideSelected || !this.viewModel.slideSelected} .label=${this._messages.previous} title=${this._messages.previous ?? v} @click=${() => this.viewModel.navigateInPresentation(-1)}></calcite-button><div class="slide-counter-text">${this._renderSlideCounter()}</div><calcite-button appearance=transparent icon-start=${(e ? "reset" : n) ?? v} kind=neutral .scale=${this.scale} .label=${e ? this._messages.restart : this._messages.next} title=${(e ? this._messages.restart : this._messages.next) ?? v} @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 ? u`<p role=banner aria-label=${t ?? S} 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>`;
+    return this.viewModel.slideSelected ? u`<p role=banner aria-label=${t ?? v} 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 this.slideCaptionsDisabled ? null : u`<arcgis-presentation-captions .slide=${e} .transitionActive=${this.viewModel.transitionActive}></arcgis-presentation-captions>`;
   }
+  _renderLegend() {
+    return this.slideLegendDisabled || !this.viewModel.showLegend ? null : u`<calcite-panel data-testid=presentation-legend class="legend" .heading=${this._messages.legend} closable @calcitePanelClose=${() => this.viewModel.showLegend = !1}><arcgis-legend .view=${this.view} @arcgisReady=${(e) => e.stopPropagation()}></arcgis-legend></calcite-panel>`;
+  }
 }
 z("arcgis-presentation", le);
 export {

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

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

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

@@ -1,13 +1,13 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as g } from "../../chunks/runtime.js";
-import { css as l, html as n } from "lit";
-import { LitElement as s, createEvent as p } from "@arcgis/lumina";
+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";
-import { watch as b } from "@arcgis/core/core/reactiveUtils.js";
-const d = 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}}`, c = 50, o = 256;
+import { watch as p } from "@arcgis/core/core/reactiveUtils.js";
+const d = l`.captions-container{width:100%;height:100%;padding-inline-start:var(--arcgis-internal-presentation-padding-start);padding-inline-end:var(--arcgis-internal-presentation-padding-end)}.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-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 x extends s {
   constructor() {
-    super(...arguments), this.transitionActive = !1, this.autoDestroyDisabled = !1, this.arcgisReady = p();
+    super(...arguments), this.transitionActive = !1, this.autoDestroyDisabled = !1, this.arcgisReady = b();
   }
   static {
     this.properties = { _appliedSlide: 16, slide: 0, transitionActive: 5, autoDestroyDisabled: 5 };
@@ -19,7 +19,7 @@ class x extends s {
     await this.manager.destroy();
   }
   loaded() {
-    this.manager.onLifecycle(() => b(() => ({ slide: this.slide, transitionActive: this.transitionActive }), ({ slide: e, transitionActive: r }) => {
+    this.manager.onLifecycle(() => p(() => ({ slide: this.slide, transitionActive: this.transitionActive }), ({ slide: e, transitionActive: r }) => {
       r || (this._appliedSlide = e);
     }, { initial: !0 }));
   }
@@ -27,14 +27,14 @@ class x extends s {
     const e = this._appliedSlide?.layout;
     if (!this._appliedSlide || !e || e === "none")
       return null;
-    const r = this._appliedSlide.title?.text, t = this._appliedSlide.description?.text, i = r?.length && r.length > c ? `${r?.substring(0, c)}...` : r, a = t?.length && t.length > o ? `${t?.substring(0, o)}...` : t;
+    const r = this._appliedSlide.title?.text, t = this._appliedSlide.description?.text, i = r?.length && r.length > n ? `${r?.substring(0, n)}...` : r, a = t?.length && t.length > o ? `${t?.substring(0, o)}...` : t;
     return e === "caption" ? this._renderCaptions(i, a) : this._renderCover(i, a);
   }
   _renderCover(e, r) {
-    return n`<div class="cover-container"><div class="cover"><div class="title">${e}</div><div class="cover-description">${r}</div></div></div>`;
+    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 n`<div class="captions-container"><div class="captions"><div class="title">${e}</div><div class="captions-description">${r}</div></div></div>`;
+    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", x);

package/dist/components/arcgis-utility-network-trace-analysis/customElement.js

@@ -12,8 +12,8 @@ import { log as T } from "@arcgis/toolkit/log";
 import { u as v } from "../../chunks/useT9n.js";
 import { m as _ } from "../../chunks/useViewModel.js";
 import { l as R } from "../../chunks/async-utils.js";
-const $ = y`:host{--arcgis-internal-color-black-30: color-mix(in srgb, #000000 30.2%, transparent);--arcgis-internal-box-shadow: var(--calcite-spacing-none) var(--calcite-spacing-px) var(--calcite-spacing-base) var(--arcgis-internal-color-black-30);--arcgis-internal-top-max-width: calc(min(100cqw, 100vw) - var(--calcite-spacing-xxxl));--arcgis-internal-panel-width: 300px;--arcgis-internal-panel-height: 100%;--arcgis-internal-panel-height-sm: 240px;--arcgis-internal-panel-height-md: 420px;--arcgis-internal-panel-height-lg: 540px;--arcgis-internal-panel-height-xl: 680px;--arcgis-internal-panel-gap: var(--calcite-spacing-lg);--arcgis-internal-panel-actions-gap: var(--calcite-spacing-sm);--arcgis-internal-basemap-gallery-width-lg: 450px;--arcgis-internal-collapse-icon-flip: scaleX(1);--arcgis-internal-row-direction: row;--arcgis-internal-legend-width: 300px;--arcgis-internal-layout-overlay-space-top: var(--arcgis-layout-overlay-space-top, 0px);--arcgis-internal-layout-overlay-space-bottom: var(--arcgis-layout-overlay-space-bottom, 0px);--arcgis-internal-layout-overlay-space-left: var(--arcgis-layout-overlay-space-left, 0px);--arcgis-internal-layout-overlay-space-right: var(--arcgis-layout-overlay-space-right, 0px);--arcgis-internal-view-color-focus: var(--arcgis-view-color-focus, var(--calcite-color-brand));--arcgis-internal-attribution-space-bottom: var(--arcgis-internal-layout-overlay-space-bottom);--arcgis-internal-attribution-space-left: var(--arcgis-internal-layout-overlay-space-left);--arcgis-internal-attribution-space-right: var(--arcgis-internal-layout-overlay-space-right);--arcgis-internal-attribution-font-size: var(--calcite-font-size-sm);--arcgis-internal-attribution-font-size-sm: var(--calcite-font-size-xs);--arcgis-internal-sketch-justify-content: flex-start}:host{display:flex;flex-direction:column;height:var(--arcgis-internal-panel-height, 100%)}.inputs-tab-container{display:flex;flex-direction:column;height:100%}.trace-inputs-warning{flex:none;height:fit-content;--calcite-panel-background-color: var(--calcite-color-foreground-1);calcite-notice{margin:var(--calcite-spacing-md) var(--calcite-spacing-md) 0 var(--calcite-spacing-md)}}calcite-tabs{display:flex;flex-direction:column;height:100%}calcite-tab{--calcite-tab-content-space-y: 0}calcite-tab:not([selected]){flex:0}calcite-panel{--calcite-panel-background-color: var(--calcite-color-foreground-1)}calcite-notice{margin:var(--calcite-spacing-md)}`, C = _(w);
-class E extends b {
+const $ = y`:host{--arcgis-internal-color-black-30: color-mix(in srgb, #000000 30.2%, transparent);--arcgis-internal-box-shadow: var(--calcite-spacing-none) var(--calcite-spacing-px) var(--calcite-spacing-base) var(--arcgis-internal-color-black-30);--arcgis-internal-top-max-width: calc(min(100cqw, 100vw) - var(--calcite-spacing-xxxl));--arcgis-internal-panel-width: 300px;--arcgis-internal-panel-height: 100%;--arcgis-internal-panel-height-sm: 240px;--arcgis-internal-panel-height-md: 420px;--arcgis-internal-panel-height-lg: 540px;--arcgis-internal-panel-height-xl: 680px;--arcgis-internal-panel-gap: var(--calcite-spacing-lg);--arcgis-internal-panel-actions-gap: var(--calcite-spacing-sm);--arcgis-internal-basemap-gallery-width-lg: 450px;--arcgis-internal-collapse-icon-flip: scaleX(1);--arcgis-internal-row-direction: row;--arcgis-internal-legend-width: 300px;--arcgis-internal-layout-overlay-space-top: var(--arcgis-layout-overlay-space-top, 0px);--arcgis-internal-layout-overlay-space-bottom: var(--arcgis-layout-overlay-space-bottom, 0px);--arcgis-internal-layout-overlay-space-left: var(--arcgis-layout-overlay-space-left, 0px);--arcgis-internal-layout-overlay-space-right: var(--arcgis-layout-overlay-space-right, 0px);--arcgis-internal-view-color-focus: var(--arcgis-view-color-focus, var(--calcite-color-brand));--arcgis-internal-attribution-space-bottom: var(--arcgis-internal-layout-overlay-space-bottom);--arcgis-internal-attribution-space-left: var(--arcgis-internal-layout-overlay-space-left);--arcgis-internal-attribution-space-right: var(--arcgis-internal-layout-overlay-space-right);--arcgis-internal-attribution-font-size: var(--calcite-font-size-sm);--arcgis-internal-attribution-font-size-sm: var(--calcite-font-size-xs);--arcgis-internal-sketch-justify-content: flex-start}:host{display:flex;flex-direction:column;height:var(--arcgis-internal-panel-height, 100%)}.inputs-tab-container{display:flex;flex-direction:column;height:100%}.trace-inputs-warning{flex:none;height:fit-content;--calcite-panel-background-color: var(--calcite-color-foreground-1);calcite-notice{margin:var(--calcite-spacing-md) var(--calcite-spacing-md) 0 var(--calcite-spacing-md)}}arcgis-utility-network-trace-inputs[mode=default]{height:auto}calcite-tabs{display:flex;flex-direction:column;height:100%}calcite-tab{--calcite-tab-content-space-y: 0}calcite-tab:not([selected]){flex:0}calcite-panel{--calcite-panel-background-color: var(--calcite-color-foreground-1)}calcite-notice{margin:var(--calcite-spacing-md)}`, C = _(w);
+class k extends b {
   constructor() {
     super(...arguments), this._messages = v({ blocking: !0 }), this._viewModel = C(this), this._highlightHandles = [], this._handleRunTraceButtonClick = () => {
       const e = this._traceInputsElement?.traceLocations, t = this._traceInputsElement?.traceLocationFlagInfos, a = e?.some((i) => i.type === "starting-point"), r = t?.some((i) => !!i.flagProperties.terminalConfiguration && !i.flagProperties.selectedTerminals?.size) ?? !1;
@@ -171,7 +171,7 @@ class E extends b {
     return s`<calcite-panel .loading=${this.view === void 0}><calcite-tabs layout=center position=top><calcite-tab-nav slot=title-group><calcite-tab-title @click=${() => this._switchTab("input")} .selected=${this.activeTab === "input"}>${e.tabs.inputTab}</calcite-tab-title><calcite-tab-title @click=${() => this._switchTab("results")} .selected=${this.activeTab === "results"} .disabled=${i || !t}>${e.tabs.resultsTab}</calcite-tab-title></calcite-tab-nav>${this.view ? this.renderInputTab() : null}${this.view && t ? this.renderResultsTab() : null}</calcite-tabs>${n}${this.activeTab === "input" ? this.renderInputFooter() : null}${this.activeTab === "results" ? this.renderResultsFooter() : null}</calcite-panel>`;
   }
 }
-m("arcgis-utility-network-trace-analysis", E);
+m("arcgis-utility-network-trace-analysis", k);
 export {
-  E as ArcgisUtilityNetworkTraceAnalysis
+  k as ArcgisUtilityNetworkTraceAnalysis
 };