@arcgis/map-components 5.2.0-next.103 → 5.2.0-next.104

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

@@ -1,30 +1,26 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as u } from "../../chunks/runtime.js";
-import { css as h, html as a } from "lit";
-import c from "@arcgis/core/time/TimeExtent.js";
-import { LitElement as v, nothing as f, safeClassMap as g } from "@arcgis/lumina";
-import { createRef as o, ref as d } from "lit/directives/ref.js";
-import { m as w } from "../../chunks/handle.js";
-import { watch as x } from "@arcgis/core/core/reactiveUtils.js";
-const p = h`: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}.root{align-items:center;block-size:100%;display:flex;inline-size:100%}slot[name=max],slot[name=min]{display:flex}.slider{--labels-container-width: 100%;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%}.major-ticks,.minor-ticks{inset:0;position:absolute}.major-ticks,.minor-ticks{--arcgis-ticks-tick-transform: unset;--arcgis-ticks-tick-width: var(--calcite-size-px)}.minor-ticks{--arcgis-ticks-tick-length: var(--calcite-size-fixed-xxs)}.major-ticks{--arcgis-ticks-font-weight: var(--calcite-font-weight-normal)}.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 T extends v {
+import { c as d } from "../../chunks/runtime.js";
+import { css as m, html as a } from "lit";
+import { ref as u } from "lit/directives/ref.js";
+import o from "@arcgis/core/time/TimeExtent.js";
+import { LitElement as h, nothing as v, safeClassMap as g } from "@arcgis/lumina";
+const f = 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{--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;--arcgis-ticks-font-weight: var(--calcite-font-weight-normal);--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 w extends h {
   constructor() {
-    super(...arguments), this.#e = new ResizeObserver(() => {
-      const e = this.#r.value?.clientWidth;
-      e && (this._sliderWidth = e);
-    }), this.#n = 3, this.#a = o(), this.#r = o(), this._sliderWidth = 100, this.autoDestroyDisabled = !1, this.showMax = !1, this.showMin = !1, this.showTicks = !1, this.showTimeExtentPopover = !1;
+    super(...arguments), this.#t = new ResizeObserver(([e]) => {
+      this._sliderWidth = e.contentRect.width;
+    }), this.#a = 100, this.#r = 100, this.autoDestroyDisabled = !1, this.showMax = !1, this.showMin = !1, this.showTicks = !1, this.showTimeExtentPopover = !1;
   }
   static {
     this.properties = { _activeValue: 16, _sliderFillPlacement: 16, _sliderWidth: 16, _timeExtentEpochValues: 16, activeValue: 32, autoDestroyDisabled: 5, showMax: 5, showMin: 5, showTicks: 5, showTimeExtentPopover: 5, viewModel: 0 };
   }
   static {
-    this.styles = p;
+    this.styles = f;
   }
-  #e;
   #t;
   #i;
   #s;
-  #n;
+  #e;
   #a;
   #r;
   get _sliderFillPlacement() {
@@ -71,80 +67,80 @@ class T extends v {
   async destroy() {
     await this.manager.destroy();
   }
-  async loaded() {
-    this.manager.onLifecycle(() => [
-      x(() => this.#a.value, (e) => {
-        this.#e.disconnect(), e && this.#e.observe(e);
-      }, { initial: !0 }),
-      w(() => {
-        this.#e.disconnect();
-      })
-    ]);
-  }
-  #l(e, t) {
-    const { viewModel: i } = this;
-    if (!i)
-      return;
-    const { start: s, end: r } = e;
-    if (!s || !r)
+  #n() {
+    return (e) => {
+      if (e) {
+        this.#e = e, this.#t.observe(e);
+        return;
+      }
+      this.#e && (this.#t.unobserve(this.#e), this.#e = void 0);
+    };
+  }
+  #l() {
+    const e = Number.parseInt(window.getComputedStyle(this.el).getPropertyValue("--arcgis-internal-time-bar-slider-tick-gap"), 10);
+    return Number.isFinite(e) && e > 0 ? e : this.#a;
+  }
+  #o(e, t) {
+    const { viewModel: i } = this, { start: s, end: r } = e;
+    if (!i || !s || !r)
       return;
     const n = (r.getTime() - s.getTime()) / t;
-    return i.tickFormats.find(({ duration: m }) => m > this.#n * n) ?? i.tickFormats.at(-1);
+    return i.tickFormats.find(({ duration: c }) => c > this.#l() * n) ?? i.tickFormats.at(-1);
   }
   #c(e) {
     this._activeValue = e.target.activeValue;
   }
-  #o(e) {
+  #d(e) {
     const { viewModel: t } = this, i = t?.mode;
-    i && (t.timeExtent = this.#d(e.target.values, i), this._activeValue = e.target.activeValue);
+    i && (t.timeExtent = this.#m(e.target.values, i), this._activeValue = e.target.activeValue);
   }
-  #d([e, t], i) {
+  #m([e, t], i) {
     switch (i) {
       case "cumulative-from-end":
-        return new c({ start: new Date(e), end: null });
+        return new o({ start: new Date(e), end: null });
       case "cumulative-from-start":
-        return new c({ start: null, end: new Date(e) });
+        return new o({ start: null, end: new Date(e) });
       case "instant":
-        return new c({ start: new Date(e), end: new Date(e) });
+        return new o({ start: new Date(e), end: new Date(e) });
       case "time-window":
-        return new c({ start: new Date(e), end: new Date(t ?? e) });
+        return new o({ start: new Date(e), end: new Date(t ?? e) });
     }
   }
-  render() {
-    return a`<div class="root" ${d(this.#a)}>${this.#u()}${this.#f()}${this.#m()}</div>`;
-  }
-  #m() {
-    return this.showMax ? a`<slot name=max><arcgis-time-bar-date class="max-date" .date=${this.viewModel?.fullTimeExtent?.end} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : a`<div class="hidden"></div>`;
-  }
   #u() {
-    return this.showMin ? a`<slot name=min><arcgis-time-bar-date class="min-date" .date=${this.viewModel?.fullTimeExtent?.start} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : a`<div class="hidden"></div>`;
+    return this.showMax ? a`<slot name=max><arcgis-time-bar-date class="max-date" .date=${this.viewModel?.fullTimeExtent?.end} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : a`<div class="hidden"></div>`;
   }
   #h() {
-    return this.showTimeExtentPopover ? a`<div class="popover" slot=popover><slot name=popover>${this.#v()}</slot></div>` : null;
+    return this.showMin ? a`<slot name=min><arcgis-time-bar-date class="min-date" .date=${this.viewModel?.fullTimeExtent?.start} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : a`<div class="hidden"></div>`;
   }
   #v() {
+    return this.showTimeExtentPopover ? a`<div class="popover" slot=popover><slot name=popover>${this.#g()}</slot></div>` : null;
+  }
+  #g() {
     return this.activeValue ? this.activeValue instanceof Date ? a`<arcgis-time-bar-date .date=${this.activeValue} .viewModel=${this.viewModel}></arcgis-time-bar-date>` : a`<arcgis-time-bar-extent .viewModel=${this.viewModel}></arcgis-time-bar-extent>` : null;
   }
   #f() {
     const { viewModel: e } = this;
-    if (!e?.fullTimeExtent?.start || !e?.fullTimeExtent?.end || !this._sliderWidth)
+    if (!e?.fullTimeExtent?.start || !e?.fullTimeExtent?.end)
       return null;
-    const t = this.#l(e.fullTimeExtent, this._sliderWidth);
+    const t = this.#o(e.fullTimeExtent, this._sliderWidth ?? this.#r);
     if (!t)
       return null;
-    (!this.#t || !this.#s || !this.#i || this.#t !== t) && (this.#t = t, this.#s = e.getTickValues(t.minor), this.#i = e.getTickValues(t.major), e.majorTickFormat = t.format);
+    (!this.#i || !this.#s || this.#i !== t) && (this.#i = t, this.#s = e.getTickValues(t.timeInterval), e.tickFormat = t.format);
     const i = e.fullTimeExtent.start.getTime(), s = e.fullTimeExtent.end.getTime();
-    return a`<arcgis-slider allow-values-overlap class=${g({
+    return a`<div class="slider-container" ${u(this.#n())}><arcgis-slider allow-values-overlap class=${g({
       slider: !0,
       "slider--has-ticks": this.showTicks,
       "slider--out-of-range": e.isOutOfRange
-    })} .disabled=${!e.interactive} fill-placement=${this._sliderFillPlacement ?? f} .max=${s} .min=${i} @arcgisActiveValueChange=${this.#c} @arcgisInput=${this.#o} precision=0 .steps=${e.effectiveStopsEpoch} .values=${this._timeExtentEpochValues} ${d(this.#r)}>${this.#h()}${this.#g(e, i, s)}</arcgis-slider>`;
+    })} .disabled=${!e.interactive} fill-placement=${this._sliderFillPlacement ?? v} .max=${s} .min=${i} @arcgisActiveValueChange=${this.#c} @arcgisInput=${this.#d} precision=0 .steps=${e.effectiveStopsEpoch} .values=${this._timeExtentEpochValues}>${this.#v()}${this.#w(e, i, s)}</arcgis-slider></div>`;
   }
-  #g(e, t, i) {
-    return this.showTicks ? a`<div slot=content-end class="ticks-container"><arcgis-ticks class="minor-ticks" .max=${i} .min=${t} mode=value .values=${this.#s}></arcgis-ticks><arcgis-ticks class="major-ticks" .labelFormatter=${e.majorTickFormatter} .max=${i} .min=${t} mode=value show-labels .values=${this.#i}></arcgis-ticks></div>` : null;
+  #w(e, t, i) {
+    return this.showTicks ? a`<div slot=content-end class="ticks-container"><slot name=content-end><arcgis-ticks .labelFormatter=${e.tickFormatter} .max=${i} .min=${t} mode=value show-labels .values=${this.#s}></arcgis-ticks></slot></div>` : null;
+  }
+  render() {
+    return a`<div class="root">${this.#h()}${this.#f()}${this.#u()}</div>`;
   }
 }
-u("arcgis-time-bar-slider", T);
+d("arcgis-time-bar-slider", w);
 export {
-  T as ArcgisTimeBarSlider
+  w as ArcgisTimeBarSlider
 };