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

package/dist/components/arcgis-slider-scale-range/customElement.js

@@ -1,8 +1,8 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { g as f, c as p } from "../../chunks/runtime.js";
+import { g as x, c as p } from "../../chunks/runtime.js";
 import { keyed as _ } from "lit/directives/keyed.js";
 import { LitElement as g, createEvent as d, safeStyleMap as u, nothing as M } from "@arcgis/lumina";
-import { watch as x } from "@arcgis/core/core/reactiveUtils.js";
+import { watch as f } from "@arcgis/core/core/reactiveUtils.js";
 import { u as v } from "../../chunks/useView.js";
 import { u as L } from "../../chunks/useT9n.js";
 import { css as y, html as r } from "lit";
@@ -124,7 +124,7 @@ class I extends g {
     await this.manager.destroy();
   }
   willUpdate(e) {
-    if ((e.has("maxScaleLimit") || e.has("minScaleLimit")) && (this.minScaleLimit === 0 && (this.minScaleLimit = this._layerMinScaleLimit), this.maxScaleLimit === 0 && (this.maxScaleLimit = this._layerMaxScaleLimit), this.minScaleLimit = Math.min(this.minScaleLimit, this._layerMinScaleLimit), this.maxScaleLimit = Math.max(this.maxScaleLimit, this._layerMaxScaleLimit), this.minScale !== 0 && (this.minScale = Math.min(this.minScale, this.minScaleLimit)), this.maxScale !== 0 && (this.maxScale = Math.max(this.maxScale, this.maxScaleLimit))), e.has("maxScale") || e.has("minScale")) {
+    if ((e.has("maxScaleLimit") || e.has("minScaleLimit")) && (this.minScaleLimit === 0 && (this.minScaleLimit = this._layerMinScaleLimit), this.maxScaleLimit === 0 && (this.maxScaleLimit = this._layerMaxScaleLimit), this.minScaleLimit = Math.min(this.minScaleLimit, this._layerMinScaleLimit), this.maxScaleLimit = Math.max(this.maxScaleLimit, this._layerMaxScaleLimit), this.minScale !== 0 && (this.minScale = Math.min(this.minScale, this.minScaleLimit)), this.maxScale !== 0 && (this.maxScale = Math.max(this.maxScale, this.maxScaleLimit)), this._syncLayerScale()), e.has("maxScale") || e.has("minScale")) {
       if (this.minScale !== 0) {
         const i = this._clampScale("min", this.minScale);
         this.minScale = i === this.minScaleLimit ? 0 : i;
@@ -143,8 +143,8 @@ class I extends g {
       a && (this._portalRegion = a.split("-")[1]?.toLowerCase() ?? null);
     }).catch(() => {
     }), this.manager.onLifecycle(() => [
-      x(() => this.view?.scale, () => this.requestUpdate(), { initial: !0 }),
-      x(() => ({
+      f(() => this.view?.scale, () => this.requestUpdate(), { initial: !0 }),
+      f(() => ({
         // Layer type has loaded property, but Sublayer and SubtypeSublayer use loadStatus instead
         loaded: this.layer?.loadStatus === "loaded",
         ready: this.view?.ready
@@ -159,7 +159,7 @@ class I extends g {
           let n = 0, o = 0;
           m && (n = m.minScale, o = m.maxScale), o !== 0 && (this._layerMaxScaleLimit = o), n !== 0 && (this._layerMinScaleLimit = n);
         }
-        this.minScaleLimit = this._layerMinScaleLimit, this.maxScaleLimit = this._layerMaxScaleLimit;
+        this.minScaleLimit = Math.min(this.minScaleLimit, this._layerMinScaleLimit), this.maxScaleLimit = Math.max(this.maxScaleLimit, this._layerMaxScaleLimit);
         const c = this.layer;
         c && "minScale" in c && "maxScale" in c && (c.minScale !== 0 && this.minScale === 0 && (this.minScale = Math.min(c.minScale, this.minScaleLimit)), c.maxScale !== 0 && this.maxScale === 0 && (this.maxScale = Math.max(c.maxScale, this.maxScaleLimit)));
       }, { initial: !0 })
@@ -232,7 +232,7 @@ class I extends g {
     e === "min" ? this.minScale = i === 0 ? 0 : this._clampScale("min", i) : this.maxScale = i === 0 ? 0 : this._clampScale("max", i), this._syncLayerScale(), this._activeMenu = null;
   }
   _syncLayerScale() {
-    this.layer && "minScale" in this.layer && "maxScale" in this.layer && (this.layer.minScale = this.mode === "max-scale-only" ? 0 : this.minScale, this.layer.maxScale = this.mode === "min-scale-only" ? 0 : this.maxScale);
+    this.layer && "minScale" in this.layer && "maxScale" in this.layer && (this.layer.minScale = this.mode === "max-scale-only" ? 0 : this._effectiveMinScale, this.layer.maxScale = this.mode === "min-scale-only" ? 0 : this._effectiveMaxScale);
   }
   _renderScalePreviewPopover() {
     const e = this._renderScalePreview();
@@ -298,7 +298,7 @@ class I extends g {
     if (typeof e != "number")
       return null;
     const i = Math.min(l.length - 1, Math.max(0, Math.floor(e))), a = 5, t = 128, s = t * (i % a), c = t * Math.floor(i / a), m = `-${s}px -${c}px`, n = this._getSpriteSheetFile();
-    return r`<div class="preview-container"><img src=${f(`./assets/slider-scale-range/images/${n}.avif`) ?? M} style=${u({
+    return r`<div class="preview-container"><img src=${x(`./assets/slider-scale-range/images/${n}.avif`) ?? M} style=${u({
       display: "block",
       height: `${t}px`,
       width: `${t}px`,

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

@@ -1,26 +1,27 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as o } from "../../chunks/runtime.js";
-import { css as h, html as e } from "lit";
+import { css as h, html as t } from "lit";
 import { useDirection as n } from "@arcgis/lumina/controllers";
-import { watch as t } from "@arcgis/core/core/reactiveUtils.js";
+import { watch as e } from "@arcgis/core/core/reactiveUtils.js";
 import l from "@arcgis/core/views/VideoView.js";
 import { LitElement as c, createEvent as m, safeClassMap as d } from "@arcgis/lumina";
 import { makeAccessorController as f } from "@arcgis/lumina/controllers/accessor";
 import { createRef as s, ref as r } from "lit/directives/ref.js";
-import { c as y, s as p, C as a, S as w } from "../../chunks/slots.js";
+import { C as a } from "../../chunks/resources.js";
+import { c as p, s as y, S as w } from "../../chunks/slots.js";
 import { s as v } from "../../chunks/esri-main.js";
 const u = h`:host{width:100%;height:100%}`, R = f(l, {
   omitProps: ["container", "navigation", "scale", "ui"]
 });
 class g extends c {
   constructor() {
-    super(), this._containerRef = s(), this._direction = n(), this._mapRef = s(), this._slotGroupRefs = y(), this.autoDestroyDisabled = !1, this.view = R(this), this.attributionMode = this.view.attributionMode, this.ready = this.view.ready, this.layer = this.view.layer, this.map = this.view.map, this.arcgisViewReadyChange = m();
+    super(), this._containerRef = s(), this._direction = n(), this._mapRef = s(), this._slotGroupRefs = p(), this.autoDestroyDisabled = !1, this.view = R(this), this.attributionMode = this.view.attributionMode, this.ready = this.view.ready, this.layer = this.view.layer, this.map = this.view.map, this.arcgisViewReadyChange = m();
   }
   static {
     this.properties = { autoDestroyDisabled: 5, view: 32, aria: 0, attributionMode: 1, ready: 36, layer: 0, map: 0 };
   }
   static {
-    this.styles = [v, p, u];
+    this.styles = [v, y, u];
   }
   get aria() {
     return this.view?.aria;
@@ -34,19 +35,19 @@ class g extends c {
   loaded() {
     const i = this;
     i.el.childElem = this._mapRef.value, this.view.container ??= i.el.childElem, this.manager.onLifecycle(() => [
-      t(() => this.layer, () => {
+      e(() => this.layer, () => {
         this.layer && this.view && (this.view.layer = this.layer, this.layer.loaded || this.layer.load());
       }, { initial: !0 }),
-      t(() => this.view.ready, () => {
+      e(() => this.view.ready, () => {
         this.view.ready && this.arcgisViewReadyChange.emit();
       }, { initial: this.view.ready })
     ]);
   }
   renderMain() {
-    return e`<div class=${`root ${a.base}`} ${r(this._mapRef)}></div>`;
+    return t`<div class=${`root ${a.base}`} ${r(this._mapRef)}></div>`;
   }
   render() {
-    return e`${this.renderMain()}<section class=${d(a.containerUI)} ${r(this._containerRef)}>${w({ direction: this._direction, slotGroupRefs: this._slotGroupRefs })}</section>`;
+    return t`${this.renderMain()}<section class=${d(a.containerUI)} ${r(this._containerRef)}>${w({ direction: this._direction, slotGroupRefs: this._slotGroupRefs })}</section>`;
   }
 }
 o("arcgis-video", g);

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
 };