@arcgis/map-components 5.2.0-next.134 → 5.2.0-next.135

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

@@ -1,14 +1,14 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { g as x, c as _ } from "../../chunks/runtime.js";
+import { g as x, c as g } from "../../chunks/runtime.js";
 import { keyed as p } from "lit/directives/keyed.js";
-import { LitElement as g, createEvent as d, safeStyleMap as u, nothing as M } from "@arcgis/lumina";
-import { watch as f } from "@arcgis/core/core/reactiveUtils.js";
-import { u as v } from "../../chunks/useView.js";
-import { u as y } from "../../chunks/useT9n.js";
-import { css as b, html as o } from "lit";
-import { usePropertyChange as $ } from "@arcgis/lumina/controllers";
-import { createRef as L, ref as w } from "lit/directives/ref.js";
-import R from "@arcgis/core/portal/Portal.js";
+import { LitElement as _, createEvent as d, safeClassMap as v, safeStyleMap as f, nothing as M } from "@arcgis/lumina";
+import { watch as u } from "@arcgis/core/core/reactiveUtils.js";
+import { u as y } from "../../chunks/useView.js";
+import { u as $ } from "../../chunks/useT9n.js";
+import { css as b, html as r } from "lit";
+import { usePropertyChange as L } from "@arcgis/lumina/controllers";
+import { createRef as w, ref as R } from "lit/directives/ref.js";
+import I from "@arcgis/core/portal/Portal.js";
 const h = /* @__PURE__ */ new Set([
   "ar-iq",
   "ar-kw",
@@ -112,7 +112,7 @@ const h = /* @__PURE__ */ new Set([
   sv: "se",
   th: "th",
   zh: "cn"
-}, P = b`:host{display:block;width:310px;max-width:100%}.slider{height:50px}.scale-indicator-container{position:relative;width:100%;margin-top:2px}.scale-indicator-icon{transform:scale(.8,1.7);margin-left:-6px;width:1px;--calcite-icon-color: var(--calcite-color-text-3)}.scale-menu-list{max-height:220px;overflow-y:auto}.scale-menu-input{max-width:120px}.scale-menu-button-container{display:flex;direction:ltr;justify-content:space-between}.scale-menu-button{min-width:0}:dir(rtl) .scale-menu-button-container>*{direction:rtl}.preview-container{padding:6px;background-color:var(--calcite-color-foreground-1);box-shadow:0 1px 2px #0000004d}`, l = [
+}, P = b`:host{display:block;width:310px;max-width:100%}.slider{height:50px}.scale-indicator-container{position:relative;width:100%;margin-top:2px}.scale-indicator-container[slot=track-overlay]{position:absolute;inset:0;pointer-events:none;margin-top:0}.scale-indicator-icon{left:var(--arcgis-internal-scale-indicator-offset);transform:scale(.8,1.7);margin-left:-6px;width:1px;--calcite-icon-color: var(--calcite-color-text-3)}.scale-indicator-range{top:-1px;left:var(--arcgis-internal-scale-indicator-left);width:calc(var(--arcgis-internal-scale-indicator-right) - var(--arcgis-internal-scale-indicator-left));height:4px;background-color:var(--calcite-color-brand);mask-image:linear-gradient(to right,transparent 0%,black 30%,black 70%,transparent 100%);pointer-events:none}.scale-menu-list{max-height:220px;overflow-y:auto}.scale-menu-input{max-width:120px}.scale-menu-button-container{display:flex;direction:ltr;justify-content:space-between}.scale-menu-button{min-width:0}:dir(rtl) .scale-menu-button-container>*{direction:rtl}.preview-container{padding:6px;background-color:var(--calcite-color-foreground-1);box-shadow:0 1px 2px #0000004d}`, l = [
   { id: "world", scale: 147914382, minScale: 147914382, maxScale: 1e8 },
   { id: "continent", scale: 5e7, minScale: 99999999, maxScale: 35e6 },
   { id: "countriesBig", scale: 25e6, minScale: 34999999, maxScale: 15e6 },
@@ -134,12 +134,12 @@ const h = /* @__PURE__ */ new Set([
   { id: "rooms", scale: 400, minScale: 400, maxScale: 101 },
   { id: "room", scale: 100, minScale: 100, maxScale: 0 }
 ];
-class I extends g {
+class k extends _ {
   constructor() {
-    super(...arguments), this.messages = y(), this._sliderRef = L(), this._activeMenu = null, this._customScaleSelected = null, this._portalRegion = null, this._layerMaxScaleLimit = l[l.length - 1].maxScale, this._layerMinScaleLimit = l[0].minScale, this.autoDestroyDisabled = !1, this.disabled = !1, this.hidePreview = !1, this.hideMaxScaleMenu = !1, this.hideMinScaleMenu = !1, this.icon = "actual-size", this.maxScale = 0, this.maxScaleLimit = l[l.length - 1].maxScale, this.minScale = 0, this.minScaleLimit = l[0].minScale, this.mode = "range", this.showWorldValue = !1, this.view = v(this), this.arcgisChange = d(), this.arcgisInput = d(), this.arcgisPropertyChange = $()("state", "minScale", "maxScale"), this.arcgisReady = d();
+    super(...arguments), this.messages = $(), this._sliderRef = w(), this._activeMenu = null, this._customScaleSelected = null, this._portalRegion = null, this._layerMaxScaleLimit = l[l.length - 1].maxScale, this._layerMinScaleLimit = l[0].minScale, this.autoDestroyDisabled = !1, this.disabled = !1, this.hidePreview = !1, this.hideMaxScaleMenu = !1, this.hideMinScaleMenu = !1, this.icon = "actual-size", this.maxScale = 0, this.maxScaleLimit = l[l.length - 1].maxScale, this.minScale = 0, this.minScaleLimit = l[0].minScale, this.mode = "range", this.showScaleRangeIndicator = !1, this.showWorldValue = !1, this.view = y(this), this.arcgisChange = d(), this.arcgisInput = d(), this.arcgisPropertyChange = L()("state", "minScale", "maxScale"), this.arcgisReady = d();
   }
   static {
-    this.properties = { _activeMenu: 16, _customScaleSelected: 16, _portalRegion: 16, _layerMaxScaleLimit: 16, _layerMinScaleLimit: 16, autoDestroyDisabled: 5, disabled: 7, hidePreview: 5, hideMaxScaleMenu: 5, hideMinScaleMenu: 5, icon: 1, label: 1, layer: 0, maxScale: 9, maxScaleLimit: 9, minScale: 9, minScaleLimit: 9, mode: 1, referenceElement: 1, region: 1, showWorldValue: 5, state: 32, view: 0 };
+    this.properties = { _activeMenu: 16, _customScaleSelected: 16, _portalRegion: 16, _layerMaxScaleLimit: 16, _layerMinScaleLimit: 16, autoDestroyDisabled: 5, disabled: 7, hidePreview: 5, hideMaxScaleMenu: 5, hideMinScaleMenu: 5, icon: 1, label: 1, layer: 0, maxScale: 9, maxScaleLimit: 9, minScale: 9, minScaleLimit: 9, mode: 1, referenceElement: 1, region: 1, showScaleRangeIndicator: 5, showWorldValue: 5, state: 32, view: 0 };
   }
   static {
     this.styles = P;
@@ -166,13 +166,16 @@ class I extends g {
     }) : (this._layerMinScaleLimit = l[0].minScale, this._layerMaxScaleLimit = l[l.length - 1].maxScale)), e.has("mode") && (this.mode === "max-scale-only" ? this.minScale = 0 : this.mode === "min-scale-only" && (this.maxScale = 0), e.get("mode") !== void 0 && this._syncLayerScale());
   }
   loaded() {
-    R.getDefault().load().then((i) => {
+    I.getDefault().load().then((i) => {
       const a = i.user?.culture ?? i.culture;
       a && (this._portalRegion = a.split("-")[1]?.toLowerCase() ?? null);
     }).catch(() => {
     }), this.manager.onLifecycle(() => [
-      f(() => this.view?.scale, () => this.requestUpdate(), { initial: !0 }),
-      f(() => ({
+      u(() => this.view?.scale, () => this.requestUpdate(), { initial: !0 }),
+      u(() => this.view?.type === "3d" ? this.view.camera?.tilt : void 0, () => {
+        this.showScaleRangeIndicator && this.requestUpdate();
+      }, { initial: !0 }),
+      u(() => ({
         // Layer type has loaded property, but Sublayer and SubtypeSublayer use loadStatus instead
         loaded: this.layer?.loadStatus === "loaded",
         ready: this.view?.ready
@@ -185,8 +188,8 @@ class I extends g {
           !("resampling" in this.layer) || this.layer.resampling || (this._layerMinScaleLimit = s[0].scale === 0 ? l[0].minScale : Math.min(l[0].minScale, s[0].scale), this._layerMaxScaleLimit = s[s.length - 1].scale);
         else {
           const n = this.layer && "maxScaleRange" in this.layer ? this.layer.maxScaleRange : null;
-          let r = 0, m = 0;
-          n && (r = n.minScale, m = n.maxScale), m !== 0 && (this._layerMaxScaleLimit = m), r !== 0 && (this._layerMinScaleLimit = r);
+          let o = 0, m = 0;
+          n && (o = n.minScale, m = n.maxScale), m !== 0 && (this._layerMaxScaleLimit = m), o !== 0 && (this._layerMinScaleLimit = o);
         }
         const c = this.layer;
         c && "minScale" in c && "maxScale" in c && (c.minScale !== 0 && this.minScale === 0 && (this.minScale = Math.min(c.minScale, this._interactiveMinScale)), c.maxScale !== 0 && this.maxScale === 0 && (this.maxScale = Math.max(c.maxScale, this._interactiveMaxScale)));
@@ -218,6 +221,10 @@ class I extends g {
     const i = e === "min" ? this._effectiveMinScale : this._effectiveMaxScale, a = Math.floor(this._mapScaleToSlider(i)), t = this.messages.scaleRangeLabels;
     return t ? t[l[a].id] : "";
   }
+  _getScaleRangeIndicatorWidth() {
+    const e = this.view?.type === "3d" ? this.view.camera?.tilt ?? 0 : 0, i = e <= 90 ? e : 180 - e;
+    return Math.min(33 + i / 90 * 30, 60);
+  }
   _getSpriteSheetFile() {
     if (this.region) {
       const a = this.region.toLowerCase(), t = `${this.messages._t9nLocale}-${a}`;
@@ -267,7 +274,7 @@ class I extends g {
     }
   }
   _mapScaleToSlider(e) {
-    const i = Math.min(l[0].minScale, Math.max(l[l.length - 1].maxScale, e)), a = l.findIndex((r) => i >= r.maxScale && i <= r.minScale), t = l[a], s = a, c = a + 0.9999;
+    const i = Math.min(l[0].minScale, Math.max(l[l.length - 1].maxScale, e)), a = l.findIndex((o) => i >= o.maxScale && i <= o.minScale), t = l[a], s = a, c = a + 0.9999;
     return t ? s + (i - t.minScale) * (c - s) / (t.maxScale - t.minScale) : 0;
   }
   _mapSliderToScale(e) {
@@ -282,22 +289,27 @@ class I extends g {
   }
   _renderScalePreviewPopover() {
     const e = this._renderScalePreview();
-    return this.hidePreview || !e ? null : o`<div slot=popover>${e}</div>`;
+    return this.hidePreview || !e ? null : r`<div slot=popover>${e}</div>`;
   }
   render() {
     const e = this._mapScaleToSlider(this._interactiveMinScale), i = this._mapScaleToSlider(this._interactiveMaxScale), a = this._sliderFullRangeMin, t = this._sliderFullRangeMax;
-    return o`<div><arcgis-slider class="slider" .disabled=${this.disabled} layout=horizontal .fillPlacement=${this.mode === "max-scale-only" ? "start" : this.mode === "min-scale-only" ? "end" : void 0} .fullRangeMin=${a < e ? a : void 0} .fullRangeMax=${t > i ? t : void 0} .max=${i} .min=${e} .labelFormatter=${(s, c, n) => n(Math.round(this._mapSliderToScale(s)))} .values=${this.mode === "max-scale-only" ? [this._mapScaleToSlider(this._effectiveMaxScale)] : this.mode === "min-scale-only" ? [this._mapScaleToSlider(this._effectiveMinScale)] : [this._mapScaleToSlider(this._effectiveMinScale), this._mapScaleToSlider(this._effectiveMaxScale)]} @arcgisInput=${this._handleSliderThumbDrag} ${w(this._sliderRef)}>${this._renderScalePreviewPopover()}${this.view?.scale != null && this._renderCurrentScaleIndicator(this.view.scale) || ""}</arcgis-slider><div class="scale-menu-button-container" slot=content-end>${this.mode !== "max-scale-only" && !this.hideMinScaleMenu ? [this._renderScaleMenuButtons("min"), this._renderScaleMenuPopover("min")] : o`<div></div>`}${this.mode !== "min-scale-only" && !this.hideMaxScaleMenu && [this._renderScaleMenuButtons("max"), this._renderScaleMenuPopover("max")] || ""}</div></div>`;
+    return r`<div><arcgis-slider class="slider" .disabled=${this.disabled} layout=horizontal .fillPlacement=${this.mode === "max-scale-only" ? "start" : this.mode === "min-scale-only" ? "end" : void 0} .fullRangeMin=${a < e ? a : void 0} .fullRangeMax=${t > i ? t : void 0} .max=${i} .min=${e} .labelFormatter=${(s, c, n) => n(Math.round(this._mapSliderToScale(s)))} .values=${this.mode === "max-scale-only" ? [this._mapScaleToSlider(this._effectiveMaxScale)] : this.mode === "min-scale-only" ? [this._mapScaleToSlider(this._effectiveMinScale)] : [this._mapScaleToSlider(this._effectiveMinScale), this._mapScaleToSlider(this._effectiveMaxScale)]} @arcgisInput=${this._handleSliderThumbDrag} ${R(this._sliderRef)}>${this._renderScalePreviewPopover()}${this.view?.scale != null && this._renderCurrentScaleIndicator(this.view.scale) || ""}</arcgis-slider><div class="scale-menu-button-container" slot=content-end>${this.mode !== "max-scale-only" && !this.hideMinScaleMenu ? [this._renderScaleMenuButtons("min"), this._renderScaleMenuPopover("min")] : r`<div></div>`}${this.mode !== "min-scale-only" && !this.hideMaxScaleMenu && [this._renderScaleMenuButtons("max"), this._renderScaleMenuPopover("max")] || ""}</div></div>`;
   }
   _renderCurrentScaleIndicator(e) {
-    const i = this._sliderFullRangeMin, t = this._sliderFullRangeMax - i, s = Math.min(100, Math.max(0, (this._mapScaleToSlider(e) - i) / t * 100));
-    return p("scale-indicator", o`<div class="scale-indicator-container" slot=content-end><div class="scale-indicator-icon" style=${u({
+    const i = this._sliderFullRangeMin, t = this._sliderFullRangeMax - i, s = this.view?.type === "3d" && this.showScaleRangeIndicator, c = Math.min(100, Math.max(0, (this._mapScaleToSlider(e) - i) / t * 100));
+    return p("scale-indicator", r`<div class="scale-indicator-container" .slot=${s ? "track-overlay" : "content-end"}><div class=${v(s ? "scale-indicator-range" : "scale-indicator-icon")} style=${f({
       position: "absolute",
-      left: `${s}%`
-    })} .title=${`${this.messages.currentScale} 1:${Math.round(e).toLocaleString(this.messages._t9nLocale)}`}><calcite-icon icon=caret-up scale=s></calcite-icon></div></div>`);
+      "--arcgis-internal-scale-indicator-offset": `${c}%`,
+      // calculate the intended position of each edge of the scale indicator and clamp to the slider track bounds
+      ...s ? {
+        "--arcgis-internal-scale-indicator-left": `max(0%, calc(${c}% - ${this._getScaleRangeIndicatorWidth() / 2}px))`,
+        "--arcgis-internal-scale-indicator-right": `min(100%, calc(${c}% + ${this._getScaleRangeIndicatorWidth() / 2}px))`
+      } : {}
+    })} .title=${`${this.messages.currentScale} 1:${Math.round(e).toLocaleString(this.messages._t9nLocale)}`}>${s ? null : r`<calcite-icon icon=caret-up scale=s></calcite-icon>`}</div></div>`);
   }
   _renderCustomScaleValue(e, i) {
     const a = Math.round(i).toString();
-    return o`<calcite-list-item .label=${this.messages?.featuredScaleLabels?.custom} .selected=${this._customScaleSelected === e} @calciteListItemSelect=${(t) => {
+    return r`<calcite-list-item .label=${this.messages?.featuredScaleLabels?.custom} .selected=${this._customScaleSelected === e} @calciteListItemSelect=${(t) => {
       const s = t.target.querySelector("calcite-input-number");
       this._handleCustomScaleInput(e, s?.value ?? ""), this._customScaleSelected = e;
     }}><calcite-input-number dir=ltr class="scale-menu-input" slot=content-end group-separator inputmode=numeric .max=${l[0].minScale} .min=${l[l.length - 1].maxScale} number-button-type=none .placeholder=${this.messages?.customScaleInputTooltip} prefix-text=1: scale=s step=1 .value=${a} @click=${(t) => t.stopPropagation()} @keydown=${(t) => {
@@ -305,10 +317,10 @@ class I extends g {
     }}></calcite-input-number></calcite-list-item>`;
   }
   _renderScaleMenuButtons(e) {
-    return o`<calcite-button .disabled=${this.disabled} class="scale-menu-button" .id=${`scale-menu-button-${e}`} icon-end=chevron-down scale=s .appearance=${this._activeMenu === e ? "outline" : "transparent"}>${this._getDropdownLabel(e)}</calcite-button>`;
+    return r`<calcite-button .disabled=${this.disabled} class="scale-menu-button" .id=${`scale-menu-button-${e}`} icon-end=chevron-down scale=s .appearance=${this._activeMenu === e ? "outline" : "transparent"}>${this._getDropdownLabel(e)}</calcite-button>`;
   }
   _renderScaleMenuPopover(e) {
-    return o`<calcite-popover auto-close .label=${`${e === "min" ? "Min" : "Max"} scale menu`} .referenceElement=${`scale-menu-button-${e}`} .placement=${e === "max" ? "bottom-end" : "bottom-start"} .open=${this._activeMenu === e} scale=s @calcitePopoverOpen=${() => this._activeMenu = e} @calcitePopoverClose=${() => {
+    return r`<calcite-popover auto-close .label=${`${e === "min" ? "Min" : "Max"} scale menu`} .referenceElement=${`scale-menu-button-${e}`} .placement=${e === "max" ? "bottom-end" : "bottom-start"} .open=${this._activeMenu === e} scale=s @calcitePopoverOpen=${() => this._activeMenu = e} @calcitePopoverClose=${() => {
       this._activeMenu === e && (this._activeMenu = null);
     }}>${this._renderScaleMenu(e)}</calcite-popover>`;
   }
@@ -316,24 +328,24 @@ class I extends g {
     const i = Math.floor(this._mapScaleToSlider(this._effectiveMaxScale)), a = Math.floor(this._mapScaleToSlider(this._effectiveMinScale)), t = e === "min" ? this._effectiveMinScale : this._effectiveMaxScale, s = this.messages.featuredScaleLabels;
     if (!s)
       return;
-    const c = Math.floor(this._mapScaleToSlider(this._interactiveMaxScale)), n = Math.floor(this._mapScaleToSlider(this._interactiveMinScale)), r = l.filter((m, S) => e === "min" ? S < i && S >= n : S > a && S <= c).map((m) => this._renderScaleMenuItem({
+    const c = Math.floor(this._mapScaleToSlider(this._interactiveMaxScale)), n = Math.floor(this._mapScaleToSlider(this._interactiveMinScale)), o = l.filter((m, S) => e === "min" ? S < i && S >= n : S > a && S <= c).map((m) => this._renderScaleMenuItem({
       scaleLabel: s[m.id],
       scaleValue: m.scale,
       isSelected: t === m.scale,
       valueVisible: m.id !== "world" || this.showWorldValue,
       type: e
     }));
-    return o`<calcite-list label="Scale Menu List" scale=s class="scale-menu-list" selection-appearance=icon selection-mode=single-persist>${this._renderCustomScaleValue(e, t)}${this.view?.scale != null ? this._renderScaleMenuItem({
+    return r`<calcite-list label="Scale Menu List" scale=s class="scale-menu-list" selection-appearance=icon selection-mode=single-persist>${this._renderCustomScaleValue(e, t)}${this.view?.scale != null ? this._renderScaleMenuItem({
       scaleValue: this.view.scale,
       scaleLabel: s.current,
       isSelected: t === this.view.scale,
       valueVisible: !0,
       type: e
-    }) : null}${r}</calcite-list>`;
+    }) : null}${o}</calcite-list>`;
   }
   _renderScaleMenuItem(e) {
     const { scaleValue: i, scaleLabel: a, isSelected: t, valueVisible: s } = e, c = i === l[0].scale ? ` ${this.messages.aboveSuffix}` : i === l[l.length - 1].scale ? ` ${this.messages.belowSuffix}` : "";
-    return o`<calcite-list-item .label=${a} .selected=${t && this._customScaleSelected !== e.type} .description=${s ? `1:${Math.round(i).toLocaleString(this.messages._t9nLocale)}${c}` : void 0} @calciteListItemSelect=${() => {
+    return r`<calcite-list-item .label=${a} .selected=${t && this._customScaleSelected !== e.type} .description=${s ? `1:${Math.round(i).toLocaleString(this.messages._t9nLocale)}${c}` : void 0} @calciteListItemSelect=${() => {
       this._setScale(e.type, i), this._customScaleSelected = null;
     }}></calcite-list-item>`;
   }
@@ -341,8 +353,8 @@ class I extends g {
     const e = this._sliderRef.value?.activeValue;
     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), n = `-${s}px -${c}px`, r = this._getSpriteSheetFile();
-    return o`<div class="preview-container"><img src=${x(`./assets/slider-scale-range/images/${r}.avif`) ?? M} style=${u({
+    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), n = `-${s}px -${c}px`, o = this._getSpriteSheetFile();
+    return r`<div class="preview-container"><img src=${x(`./assets/slider-scale-range/images/${o}.avif`) ?? M} style=${f({
       display: "block",
       height: `${t}px`,
       width: `${t}px`,
@@ -351,7 +363,7 @@ class I extends g {
     })}></div>`;
   }
 }
-_("arcgis-slider-scale-range", I);
+g("arcgis-slider-scale-range", k);
 export {
-  I as ArcgisSliderScaleRange
+  k as ArcgisSliderScaleRange
 };

package/dist/components/arcgis-time-bar-extent/customElement.js

@@ -26,7 +26,7 @@ class u extends d {
     if (c.isEmpty)
       return a`<div class="table-instant"><span class=${l({ disabled: i, text: !0 })}>${s.emptyTimeExtent}</span></div>`;
     const { start: e, end: r } = c;
-    return e && r ? e.getTime() === r.getTime() ? a`<div class="table-instant"><arcgis-time-bar-date align=center .autoDestroyDisabled=${this.autoDestroyDisabled} class="end" .date=${e} .viewModel=${t}></arcgis-time-bar-date></div>` : a`<div class="table-extent"><arcgis-time-bar-date align=end .autoDestroyDisabled=${this.autoDestroyDisabled} class="start" .date=${e} .viewModel=${t}></arcgis-time-bar-date><div class=${l({ dash: !0, disabled: i })}></div><arcgis-time-bar-date align=start .autoDestroyDisabled=${this.autoDestroyDisabled} class="end" .date=${r} .viewModel=${t}></arcgis-time-bar-date></div>` : e ? a`<div class="table-cumulative"><span class=${l({ disabled: i, text: !0 })}>${s.from}</span><div></div><arcgis-time-bar-date align=center .autoDestroyDisabled=${this.autoDestroyDisabled} class="start" .date=${e} .viewModel=${t}></arcgis-time-bar-date></div>` : r ? a`<div class="table-cumulative"><span class=${l({ disabled: i, text: !0 })}>${s.through}</span><div></div><arcgis-time-bar-date align=center .autoDestroyDisabled=${this.autoDestroyDisabled} class="start" .date=${r} .viewModel=${t}></arcgis-time-bar-date></div>` : null;
+    return e && r ? e.getTime() === r.getTime() ? a`<div class="table-instant"><arcgis-time-bar-date align=center .autoDestroyDisabled=${this.autoDestroyDisabled} class="end" .date=${e} .viewModel=${t}></arcgis-time-bar-date></div>` : a`<div class="table-extent"><arcgis-time-bar-date align=end .autoDestroyDisabled=${this.autoDestroyDisabled} class="start" .date=${e} .viewModel=${t}></arcgis-time-bar-date><div class=${l({ dash: !0, disabled: i })}></div><arcgis-time-bar-date align=start .autoDestroyDisabled=${this.autoDestroyDisabled} class="end" .date=${r} .viewModel=${t}></arcgis-time-bar-date></div>` : e ? a`<div class="table-cumulative"><span class=${l({ disabled: i, text: !0 })}>${s.from}</span><div></div><arcgis-time-bar-date align=start .autoDestroyDisabled=${this.autoDestroyDisabled} class="start" .date=${e} .viewModel=${t}></arcgis-time-bar-date></div>` : r ? a`<div class="table-cumulative"><span class=${l({ disabled: i, text: !0 })}>${s.through}</span><div></div><arcgis-time-bar-date align=start .autoDestroyDisabled=${this.autoDestroyDisabled} class="start" .date=${r} .viewModel=${t}></arcgis-time-bar-date></div>` : null;
   }
 }
 n("arcgis-time-bar-extent", u);

package/dist/components/arcgis-time-bar-slider/customElement.js

@@ -4,8 +4,8 @@ import { css as m, html as r } from "lit";
 import { ref as u } from "lit/directives/ref.js";
 import l from "@arcgis/core/time/TimeExtent.js";
 import { LitElement as h, nothing as v, safeClassMap as g } from "@arcgis/lumina";
-const w = m`:host{background-color:var(--calcite-color-surface-2);block-size:var(--calcite-size-fixed-xxxl);color:var(--calcite-color-text-1);display:flex;flex:1 0 auto;font-family:var(--calcite-font-family);font-size:var(--calcite-font-size-sm);inline-size:auto;--arcgis-internal-time-bar-slider-tick-gap: 100}.root{align-items:center;block-size:100%;display:flex;inline-size:100%}slot[name=max],slot[name=min]{display:flex}.slider{padding-inline:var(--calcite-spacing-md);--labels-container-width: 100%}.slider-container{flex:1 1 auto;min-inline-size:calc(var(--calcite-spacing-md) * 15)}.slider--has-ticks{margin-top:calc(var(--calcite-spacing-md) * -1)}.hidden,.max-date,.min-date{flex:0 0 auto}.hidden{inline-size:0}.max-date,.min-date{inline-size:calc(var(--calcite-size-md) * 3.125)}.popover{padding:var(--calcite-spacing-xxs) var(--calcite-spacing-xs) var(--calcite-spacing-xs)}.ticks-container{flex:1;position:relative;width:100%;arcgis-ticks,>slot::slotted(arcgis-ticks){inset:0;position:absolute;white-space:nowrap;--arcgis-ticks-font-weight: var(--calcite-font-weight-normal);--arcgis-ticks-label-width: auto;--arcgis-ticks-tick-transform: unset;--arcgis-ticks-tick-width: var(--calcite-size-px)}}.slider.slider--out-of-range{--arcgis-internal-slider-handle-color: var(--calcite-color-status-danger);--arcgis-internal-slider-track-range-background-color: var(--calcite-color-status-danger)}`;
-class f extends h {
+const w = m`:host{background-color:var(--calcite-color-surface-2);block-size:var(--calcite-size-fixed-xxxl);color:var(--calcite-color-text-1);display:flex;flex:1 0 auto;font-family:var(--calcite-font-family);font-size:var(--calcite-font-size-sm);inline-size:auto;--arcgis-internal-time-bar-slider-tick-gap: 100}.root{align-items:center;block-size:100%;display:flex;inline-size:100%}slot[name=max],slot[name=min]{display:flex}.slider{padding-inline:var(--calcite-spacing-md);--labels-container-width: 100%}.slider-container{flex:1 1 auto;min-inline-size:calc(var(--calcite-spacing-md) * 15)}.slider--has-ticks{margin-top:calc(var(--calcite-spacing-md) * -1)}.hidden,.max-date,.min-date{flex:0 0 auto}.hidden{inline-size:0}.max-date,.min-date{inline-size:calc(var(--calcite-size-md) * 3.125)}.popover{padding:var(--calcite-spacing-xxs) var(--calcite-spacing-xs) var(--calcite-spacing-xs)}.ticks-container{flex:1;position:relative;width:100%;arcgis-ticks,>slot::slotted(arcgis-ticks){inset:0;position:absolute;white-space:nowrap;--arcgis-ticks-font-weight: var(--calcite-font-weight-normal);--arcgis-ticks-label-width: auto;--arcgis-ticks-tick-transform: unset;--arcgis-ticks-tick-width: var(--calcite-size-px)}}.slider.slider--out-of-range{--arcgis-internal-slider-handle-color: var(--calcite-color-status-danger);--arcgis-internal-slider-track-range-background-color: var(--calcite-color-status-danger)}.lock-time-window{--arcgis-internal-time-bar-slider-border-margin: calc(var(--calcite-spacing-base) + 1px);border-image:linear-gradient(transparent var(--arcgis-internal-time-bar-slider-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--arcgis-internal-time-bar-slider-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--arcgis-internal-time-bar-slider-border-margin)),transparent var(--arcgis-internal-time-bar-slider-border-margin));border-image-slice:1;border-inline-end-style:solid;border-inline-end-width:var(--calcite-border-width-sm);padding-inline-end:var(--calcite-spacing-sm)}`;
+class p extends h {
   constructor() {
     super(...arguments), this.#t = new ResizeObserver(([e]) => {
       this._sliderWidth = e.contentRect.width;
@@ -134,7 +134,7 @@ class f extends h {
     if (!e || !i || !t)
       return null;
     const s = this.lockTimeWindow ? "lock" : "unlock", a = this.lockTimeWindow ? e.unlockTimeWindow : e.lockTimeWindow;
-    return r`<calcite-action .active=${this.lockTimeWindow} .disabled=${t.disabled || t.mode !== "time-window"} .icon=${s} @click=${this.#c} .text=${a} title=${a ?? v}></calcite-action>`;
+    return r`<calcite-action .active=${this.lockTimeWindow} class="lock-time-window" .disabled=${t.disabled || t.mode !== "time-window"} .icon=${s} @click=${this.#c} .text=${a} title=${a ?? v}></calcite-action>`;
   }
   #v() {
     const e = this.viewModel?.fullTimeExtent?.end;
@@ -145,9 +145,9 @@ class f extends h {
     return this.showMin && e ? r`<slot name=min><arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} class="min-date" .date=${e} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : r`<div class="hidden"></div>`;
   }
   #w() {
-    return this.popoverDisplay !== "none" ? r`<div class="popover" slot=popover><slot name=popover>${this.#f()}</slot></div>` : null;
+    return this.popoverDisplay !== "none" ? r`<div class="popover" slot=popover><slot name=popover>${this.#p()}</slot></div>` : null;
   }
-  #f() {
+  #p() {
     const { activeValue: e, messages: i, viewModel: t } = this;
     if (!e || !i || !t)
       return null;
@@ -163,7 +163,7 @@ class f extends h {
         return e instanceof Date ? r`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${e} .viewModel=${t}></arcgis-time-bar-date>` : r`<arcgis-time-bar-extent .autoDestroyDisabled=${this.autoDestroyDisabled} .messages=${i} .viewModel=${t}></arcgis-time-bar-extent>`;
     }
   }
-  #p() {
+  #f() {
     const { messages: e, viewModel: i } = this;
     if (!i?.fullTimeExtent?.start || !i?.fullTimeExtent?.end || !e)
       return null;
@@ -176,16 +176,16 @@ class f extends h {
       slider: !0,
       "slider--has-ticks": this.showTicks,
       "slider--out-of-range": i.isOutOfRange
-    })} .disabled=${!i.interactive} .fillPlacement=${this._sliderFillPlacement} .max=${a} .min=${s} @arcgisActiveValueChange=${this.#d} @arcgisInput=${this.#m} .popoverLabel=${e.timeExtent} .popoverDisplay=${this.popoverDisplay === "none" ? "auto" : this.popoverDisplay} precision=0 .steps=${i.effectiveStopsEpoch} .values=${this._timeExtentEpochValues}>${this.#w()}${this.#T(i, s, a)}</arcgis-slider></div>`;
+    })} .disabled=${!i.interactive} .fillPlacement=${this._sliderFillPlacement} .max=${a} .min=${s} @arcgisActiveValueChange=${this.#d} @arcgisInput=${this.#m} .popoverLabel=${e.timeExtent} .popoverDisplay=${this.popoverDisplay === "none" ? "auto" : this.popoverDisplay} precision=0 .steps=${i.effectiveStopsEpoch} .values=${this._timeExtentEpochValues}>${this.#w()}${this.#b(i, s, a)}</arcgis-slider></div>`;
   }
-  #T(e, i, t) {
+  #b(e, i, t) {
     return this.showTicks ? r`<div slot=content-end class="ticks-container"><slot name=content-end><arcgis-ticks .autoDestroyDisabled=${this.autoDestroyDisabled} .labelFormatter=${e.tickFormatter} .max=${t} .min=${i} mode=value show-labels .values=${this.#s}></arcgis-ticks></slot></div>` : null;
   }
   render() {
-    return r`<div class="root">${this.#h()}${this.#g()}${this.#p()}${this.#v()}</div>`;
+    return r`<div class="root">${this.#h()}${this.#g()}${this.#f()}${this.#v()}</div>`;
   }
 }
-d("arcgis-time-bar-slider", f);
+d("arcgis-time-bar-slider", p);
 export {
-  f as ArcgisTimeBarSlider
+  p as ArcgisTimeBarSlider
 };