@arcgis/map-components 5.1.0-next.75 → 5.1.0-next.77

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

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

package/dist/components/arcgis-video-player/customElement.js

@@ -1,25 +1,26 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as o } from "../../chunks/runtime.js";
-import { css as n, html as e } from "lit";
-import { usePropertyChange as d } from "@arcgis/lumina/controllers";
-import { classes as h } from "@arcgis/toolkit/dom";
-import c from "@arcgis/core/widgets/VideoPlayer/VideoPlayerViewModel.js";
+import { c as h } from "../../chunks/runtime.js";
+import { css as u, html as e } from "lit";
 import { watch as t } from "@arcgis/core/core/reactiveUtils.js";
-import { LitElement as u, createEvent as a, safeClassMap as g } from "@arcgis/lumina";
-import { createRef as m, ref as f } from "lit/directives/ref.js";
-import { u as v } from "../../chunks/useT9n.js";
-import { m as _ } from "../../chunks/useViewModel.js";
-import { g as w } from "../../chunks/globalCss.js";
-const p = n`:host{--arcgis-internal-video-player-controls-spacing: 16px;width:531px;height:100%}:host([inline]){width:auto;height:auto}.root,.content{height:100%}.inline{display:flex;gap:var(--calcite-spacing-xs);background-color:var(--calcite-color-foreground-1);padding:var(--calcite-spacing-xxs)}.footer{flex:1}arcgis-video{display:flex;flex:1 1 auto;aspect-ratio:16 / 9;min-height:0}`, y = _(c);
-class $ extends u {
+import f from "@arcgis/core/widgets/VideoPlayer/VideoPlayerViewModel.js";
+import { LitElement as g, createEvent as l, safeClassMap as m } from "@arcgis/lumina";
+import { usePropertyChange as v } from "@arcgis/lumina/controllers";
+import { classes as _ } from "@arcgis/toolkit/dom";
+import { createRef as w, ref as p } from "lit/directives/ref.js";
+import { u as y } from "../../chunks/useT9n.js";
+import { m as $ } from "../../chunks/useViewModel.js";
+import { g as V } from "../../chunks/globalCss.js";
+import { n as r } from "../../chunks/video-utils.js";
+const M = u`:host{--arcgis-internal-video-player-controls-spacing: 16px;width:531px;height:100%}:host([inline]){width:auto;height:auto}.root,.content{height:100%}.inline{display:flex;gap:var(--calcite-spacing-xs);background-color:var(--calcite-color-foreground-1);padding:var(--calcite-spacing-xxs)}.footer{flex:1}arcgis-video{display:flex;flex:1 1 auto;aspect-ratio:16 / 9;min-height:0}`, b = $(f);
+class T extends g {
   constructor() {
-    super(...arguments), this.messages = v({ blocking: !0 }), this.viewModel = y(this), this._videoViewRef = m(), this._metadataVisible = !1, this._duration = 0, this._currentTime = 0, this._bufferedValue = 0, this._currentValue = 0, this._isBuffering = !1, this._videoViewReady = !1, this.icon = "video-web", this.state = this.viewModel.state, this.layer = this.viewModel.layer, this.autoDestroyDisabled = !1, this.inline = !1, this.showFullscreenToggle = !1, this.hideHeader = !1, this.view = this.viewModel.view, this.arcgisPropertyChange = d()("state", "layer"), this.arcgisReady = a(), this.arcgisVideoReady = a();
+    super(...arguments), this.messages = y({ blocking: !0 }), this.viewModel = b(this), this._videoViewRef = w(), this._metadataVisible = !1, this._duration = 0, this._currentTime = 0, this._bufferedValue = 0, this._currentValue = 0, this._isBuffering = !1, this._videoViewReady = !1, this.icon = "video-web", this.state = this.viewModel.state, this.layer = this.viewModel.layer, this.autoDestroyDisabled = !1, this.inline = !1, this.showFullscreenToggle = !1, this.hideHeader = !1, this.view = this.viewModel.view, this.arcgisPropertyChange = v()("state", "layer"), this.arcgisReady = l(), this.arcgisVideoReady = l();
   }
   static {
     this.properties = { _metadataVisible: 16, _duration: 16, _currentTime: 16, _bufferedValue: 16, _currentValue: 16, _isBuffering: 16, _videoViewReady: 16, _layerTitle: 16, _isLive: 16, referenceElement: 1, icon: 1, state: 32, followingMode: 1, layer: 0, autoDestroyDisabled: 5, messageOverrides: 0, label: 3, inline: 7, showFullscreenToggle: 5, hideHeader: 5, view: 0 };
   }
   static {
-    this.styles = p;
+    this.styles = M;
   }
   get followingMode() {
     return this.viewModel.followingMode;
@@ -32,9 +33,9 @@ class $ extends u {
   }
   loaded() {
     this.manager.onLifecycle(() => [
-      t(() => [this.viewModel.currentTime, this.viewModel.duration, this.viewModel.duration, this.viewModel.ended], () => {
-        const { buffered: i, currentTime: r, duration: s, ended: l } = this.viewModel;
-        this._duration = s, this._currentTime = r, this._bufferedValue = i / (s || 1), this._currentValue = r / (s || 1), this._isBuffering = !l && this._bufferedValue < this._currentValue;
+      t(() => [this.viewModel.currentTime, this.viewModel.duration, this.viewModel.buffered, this.viewModel.ended], () => {
+        const { buffered: i, currentTime: o, duration: n, ended: d } = this.viewModel, s = r(n), a = r(o), c = r(i);
+        this._duration = s, this._currentTime = a, this._bufferedValue = c / (s || 1), this._currentValue = a / (s || 1), this._isBuffering = !d && this._bufferedValue < this._currentValue;
       }),
       t(() => this.layer?.title, (i) => {
         this._layerTitle = i ?? void 0;
@@ -46,7 +47,7 @@ class $ extends u {
     ]);
   }
   render() {
-    return e`<div class=${g(h(this.inline ? "inline" : "root", w.widget))}><calcite-panel .heading=${this.hideHeader || this.inline ? void 0 : this._layerTitle ?? this.messages.videoPlayer}>${this.inline || this.hideHeader || !this.showFullscreenToggle ? null : e`<calcite-action slot=header-actions-end icon=full-screen-exit text=minimize @click=${() => this.inline = !this.inline}></calcite-action>`}${this.inline ? e`<div class="inline">${this._renderActionBar()}${this._renderSlider()}${this.showFullscreenToggle ? e`<calcite-action icon=full-screen text=maximize @click=${() => this.inline = !this.inline}></calcite-action>` : null}</div>` : e`<div class="content">${this._renderLoadingScrim()}${this._renderBuffering()}${this._renderVideoSection()}</div>`}${this.inline ? null : e`<div slot=footer class="footer">${this._renderSlider()}${this._renderActionBar()}${this._renderMetadataSection()}</div>`}</calcite-panel></div>`;
+    return e`<div class=${m(_(this.inline ? "inline" : "root", V.widget))}><calcite-panel .heading=${this.hideHeader || this.inline ? void 0 : this._layerTitle ?? this.messages.videoPlayer}>${this.inline || this.hideHeader || !this.showFullscreenToggle ? null : e`<calcite-action slot=header-actions-end icon=full-screen-exit text=minimize @click=${() => this.inline = !this.inline}></calcite-action>`}${this.inline ? e`<div class="inline">${this._renderActionBar()}${this._renderSlider()}${this.showFullscreenToggle ? e`<calcite-action icon=full-screen text=maximize @click=${() => this.inline = !this.inline}></calcite-action>` : null}</div>` : e`<div class="content">${this._renderLoadingScrim()}${this._renderBuffering()}${this._renderVideoSection()}</div>`}${this.inline ? null : e`<div slot=footer class="footer">${this._renderSlider()}${this._renderActionBar()}${this._renderMetadataSection()}</div>`}</calcite-panel></div>`;
   }
   _renderLoadingScrim() {
     return this._videoViewReady ? null : e`<calcite-scrim .loading=${this.state !== "error"}>${this.state === "error" ? this.messages.errorLoadingLayer : null}</calcite-scrim>`;
@@ -57,7 +58,7 @@ class $ extends u {
   _renderVideoSection() {
     return e`<arcgis-video .layer=${this.layer} .map=${this.viewModel.view?.map} @arcgisViewReadyChange=${() => {
       this._videoViewReady = !0, this.arcgisVideoReady.emit();
-    }} ${f(this._videoViewRef)}></arcgis-video>`;
+    }} ${p(this._videoViewRef)}></arcgis-video>`;
   }
   _renderSlider() {
     return this._isLive ? null : e`<arcgis-video-player-slider .buffered=${this._bufferedValue} .value=${this._currentValue * 100} .viewModel=${this.viewModel}></arcgis-video-player-slider>`;
@@ -69,7 +70,7 @@ class $ extends u {
     return this._metadataVisible ? e`<arcgis-video-player-metadata .messages=${this.messages} .viewModel=${this.viewModel}></arcgis-video-player-metadata>` : null;
   }
 }
-o("arcgis-video-player", $);
+h("arcgis-video-player", T);
 export {
-  $ as ArcgisVideoPlayer
+  T as ArcgisVideoPlayer
 };

package/dist/components/arcgis-video-player-action-bar/customElement.js

@@ -1,24 +1,21 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as a } from "../../chunks/runtime.js";
-import { css as r, html as e } from "lit";
-import { formatDate as l } from "@arcgis/core/intl.js";
-import { LitElement as c, safeClassMap as n } from "@arcgis/lumina";
-import { watch as d } from "@arcgis/core/core/reactiveUtils.js";
-import { classes as m } from "@arcgis/toolkit/dom";
-const v = r`.toolbar{display:flex;align-items:center;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--2)}.timecode{color:var(--calcite-color-text-3);line-height:1.25rem}.controls-group{display:flex;flex:1 0 auto;justify-content:flex-end}.live-icon{color:var(--calcite-color-status-danger)}.controls-container{display:flex;align-items:center;gap:var(--calcite-spacing-md)}`;
-function t(s) {
-  return l(Math.round(s) * 1e3, { minute: "2-digit", second: "2-digit" });
-}
-class g extends c {
+import { c as o } from "../../chunks/runtime.js";
+import { css as a, html as e } from "lit";
+import { watch as l } from "@arcgis/core/core/reactiveUtils.js";
+import { LitElement as r, safeClassMap as c } from "@arcgis/lumina";
+import { classes as n } from "@arcgis/toolkit/dom";
+import { f as t } from "../../chunks/video-utils.js";
+const d = a`.toolbar{display:flex;align-items:center;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--2)}.timecode{color:var(--calcite-color-text-3);line-height:1.25rem}.controls-group{display:flex;flex:1 0 auto;justify-content:flex-end}.live-icon{color:var(--calcite-color-status-danger)}.controls-container{display:flex;align-items:center;gap:var(--calcite-spacing-md)}`;
+class v extends r {
   static {
     this.properties = { _isLive: 16, viewModel: 0, messages: 0, currentTime: 9, duration: 9, toggleMetadata: 0, inline: 5 };
   }
   static {
-    this.styles = v;
+    this.styles = d;
   }
   loaded() {
     this.manager.onLifecycle(() => [
-      d(() => this.viewModel.layer?.isLive, (i) => {
+      l(() => this.viewModel.layer?.isLive, (i) => {
         this._isLive = i ?? void 0;
       }, { initial: !0 })
     ]);
@@ -26,11 +23,11 @@ class g extends c {
   render() {
     const { messages: i } = this;
     this._isLive === void 0 && (this._isLive = this.viewModel.layer?.isLive);
-    const o = this._isLive ? t(this.currentTime) : `${t(this.currentTime)} / ${t(this.duration)}`;
-    return e`<div class=${n(m("toolbar"))}><div class="controls-container"><arcgis-video-player-actions-group .inline=${this.inline} .messages=${i} .viewModel=${this.viewModel}></arcgis-video-player-actions-group>${this._isLive ? e`<calcite-icon class="live-icon" icon=beacon></calcite-icon>` : null}${!this.inline || this._isLive ? e`<div class="timecode">${o}</div>` : null}</div>${this.inline ? null : e`<arcgis-video-player-controls-group class="controls-group" .messages=${i} .toggleMetadata=${() => this.toggleMetadata()} .viewModel=${this.viewModel}></arcgis-video-player-controls-group>`}</div>`;
+    const s = this._isLive ? t(this.currentTime) : `${t(this.currentTime)} / ${t(this.duration)}`;
+    return e`<div class=${c(n("toolbar"))}><div class="controls-container"><arcgis-video-player-actions-group .inline=${this.inline} .messages=${i} .viewModel=${this.viewModel}></arcgis-video-player-actions-group>${this._isLive ? e`<calcite-icon class="live-icon" icon=beacon></calcite-icon>` : null}${!this.inline || this._isLive ? e`<div class="timecode">${s}</div>` : null}</div>${this.inline ? null : e`<arcgis-video-player-controls-group class="controls-group" .messages=${i} .toggleMetadata=${() => this.toggleMetadata()} .viewModel=${this.viewModel}></arcgis-video-player-controls-group>`}</div>`;
   }
 }
-a("arcgis-video-player-action-bar", g);
+o("arcgis-video-player-action-bar", v);
 export {
-  g as VideoPlayerActionBar
+  v as VideoPlayerActionBar
 };