@arcgis/map-components 5.2.0-next.127 → 5.2.0-next.129

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

@@ -1,21 +1,21 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as d } from "../../chunks/runtime.js";
-import { css as m, html as a } from "lit";
+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, safeClassMap as v } from "@arcgis/lumina";
-const g = 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)}`;
+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 {
   constructor() {
     super(...arguments), this.#t = new ResizeObserver(([e]) => {
       this._sliderWidth = e.contentRect.width;
-    }), this.#a = 100, this.#r = 100, this.autoDestroyDisabled = !1, this.popoverDisplay = "none", this.showMax = !1, this.showMin = !1, this.showTicks = !1;
+    }), this.#a = 100, this.#r = 100, this.autoDestroyDisabled = !1, this.lockTimeWindow = !1, this.popoverDisplay = "none", this.showLockTimeWindow = !1, this.showMax = !1, this.showMin = !1, this.showTicks = !1;
   }
   static {
-    this.properties = { _activeValue: 16, _sliderFillPlacement: 16, _sliderWidth: 16, _timeExtentEpochValues: 16, activeValue: 32, autoDestroyDisabled: 5, messages: 0, popoverDisplay: 1, showMax: 5, showMin: 5, showTicks: 5, viewModel: 0 };
+    this.properties = { _activeValue: 16, _sliderFillPlacement: 16, _sliderWidth: 16, _timeExtentEpochValues: 16, activeValue: 32, autoDestroyDisabled: 5, lockTimeWindow: 5, messages: 0, popoverDisplay: 1, showLockTimeWindow: 5, showMax: 5, showMin: 5, showTicks: 5, viewModel: 0 };
   }
   static {
-    this.styles = g;
+    this.styles = w;
   }
   #t;
   #i;
@@ -45,8 +45,8 @@ class f extends h {
     const { start: t, end: s } = i;
     if (!t || !s)
       return;
-    const { timeExtent: r } = e;
-    if (!r)
+    const { timeExtent: a } = e;
+    if (!a)
       switch (e.mode) {
         case "cumulative-from-end":
         case "instant":
@@ -56,7 +56,7 @@ class f extends h {
         case "time-window":
           return [t.getTime(), s.getTime()];
       }
-    const { start: o, end: n } = r;
+    const { start: o, end: n } = a;
     switch (e.mode) {
       case "cumulative-from-end":
       case "instant":
@@ -101,20 +101,23 @@ class f extends h {
     return Number.isFinite(e) && e > 0 ? e : this.#a;
   }
   #l(e, i) {
-    const { viewModel: t } = this, { start: s, end: r } = e;
-    if (!t || !s || !r)
+    const { viewModel: t } = this, { start: s, end: a } = e;
+    if (!t || !s || !a)
       return;
-    const n = (r.getTime() - s.getTime()) / i;
+    const n = (a.getTime() - s.getTime()) / i;
     return t.tickFormats.find(({ duration: c }) => c > this.#o() * n) ?? t.tickFormats.at(-1);
   }
-  #c(e) {
-    this._activeValue = e.target.activeValue;
+  #c() {
+    this.lockTimeWindow = !this.lockTimeWindow;
   }
   #d(e) {
+    this._activeValue = e.target.activeValue;
+  }
+  #m(e) {
     const { viewModel: i } = this, t = i?.mode;
-    t && (i.timeExtent = this.#m(e.target.values, t), this._activeValue = e.target.activeValue);
+    t && (i.timeExtent = this.#u(e.target.values, t), this._activeValue = e.target.activeValue);
   }
-  #m([e, i], t) {
+  #u([e, i], t) {
     switch (t) {
       case "cumulative-from-end":
         return new l({ start: new Date(e), end: null });
@@ -126,18 +129,25 @@ class f extends h {
         return new l({ start: new Date(e), end: new Date(i ?? e) });
     }
   }
-  #u() {
-    const e = this.viewModel?.fullTimeExtent?.end;
-    return this.showMax && e ? a`<slot name=max><arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} class="max-date" .date=${e} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : a`<div class="hidden"></div>`;
-  }
   #h() {
-    const e = this.viewModel?.fullTimeExtent?.start;
-    return this.showMin && e ? a`<slot name=min><arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} class="min-date" .date=${e} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : a`<div class="hidden"></div>`;
+    const { messages: e, showLockTimeWindow: i, viewModel: t } = this;
+    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>`;
   }
   #v() {
-    return this.popoverDisplay !== "none" ? a`<div class="popover" slot=popover><slot name=popover>${this.#g()}</slot></div>` : null;
+    const e = this.viewModel?.fullTimeExtent?.end;
+    return this.showMax && e ? r`<slot name=max><arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} class="max-date" .date=${e} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : r`<div class="hidden"></div>`;
   }
   #g() {
+    const e = this.viewModel?.fullTimeExtent?.start;
+    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;
+  }
+  #f() {
     const { activeValue: e, messages: i, viewModel: t } = this;
     if (!e || !i || !t)
       return null;
@@ -145,15 +155,15 @@ class f extends h {
       case "cumulative-from-end":
       case "instant":
         const s = t.timeExtent?.start;
-        return s ? a`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${s} .viewModel=${t}></arcgis-time-bar-date>` : null;
+        return s ? r`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${s} .viewModel=${t}></arcgis-time-bar-date>` : null;
       case "cumulative-from-start":
-        const r = t.timeExtent?.end;
-        return r ? a`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${r} .viewModel=${t}></arcgis-time-bar-date>` : null;
+        const a = t.timeExtent?.end;
+        return a ? r`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${a} .viewModel=${t}></arcgis-time-bar-date>` : null;
       case "time-window":
-        return e instanceof Date ? a`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${e} .viewModel=${t}></arcgis-time-bar-date>` : a`<arcgis-time-bar-extent .autoDestroyDisabled=${this.autoDestroyDisabled} .messages=${i} .viewModel=${t}></arcgis-time-bar-extent>`;
+        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>`;
     }
   }
-  #f() {
+  #p() {
     const { messages: e, viewModel: i } = this;
     if (!i?.fullTimeExtent?.start || !i?.fullTimeExtent?.end || !e)
       return null;
@@ -161,18 +171,18 @@ class f extends h {
     if (!t)
       return null;
     (!this.#i || !this.#s || this.#i !== t) && (this.#i = t, this.#s = i.getTickValues(t.timeInterval), i.tickFormat = t.format);
-    const s = i.fullTimeExtent.start.getTime(), r = i.fullTimeExtent.end.getTime();
-    return a`<div class="slider-container" ${u(this.#n())}><arcgis-slider allow-values-overlap .autoDestroyDisabled=${this.autoDestroyDisabled} class=${v({
+    const s = i.fullTimeExtent.start.getTime(), a = i.fullTimeExtent.end.getTime();
+    return r`<div class="slider-container" ${u(this.#n())}><arcgis-slider allow-values-overlap .autoDestroyDisabled=${this.autoDestroyDisabled} class=${g({
       slider: !0,
       "slider--has-ticks": this.showTicks,
       "slider--out-of-range": i.isOutOfRange
-    })} .disabled=${!i.interactive} .fillPlacement=${this._sliderFillPlacement} .max=${r} .min=${s} @arcgisActiveValueChange=${this.#c} @arcgisInput=${this.#d} .popoverLabel=${e.timeExtent} .popoverDisplay=${this.popoverDisplay === "none" ? "auto" : this.popoverDisplay} precision=0 .steps=${i.effectiveStopsEpoch} .values=${this._timeExtentEpochValues}>${this.#v()}${this.#p(i, s, r)}</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.#T(i, s, a)}</arcgis-slider></div>`;
   }
-  #p(e, i, t) {
-    return this.showTicks ? a`<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;
+  #T(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 a`<div class="root">${this.#h()}${this.#f()}${this.#u()}</div>`;
+    return r`<div class="root">${this.#h()}${this.#g()}${this.#p()}${this.#v()}</div>`;
   }
 }
 d("arcgis-time-bar-slider", f);

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

@@ -1,3 +1,4 @@
+import "@esri/calcite-components/components/calcite-action";
 import "../arcgis-time-bar-date/index.js";
 import "../arcgis-time-bar-extent/index.js";
 import "@arcgis/common-components/components/arcgis-slider";