@arcgis/map-components 6.0.0-next.20 → 6.0.0-next.21

package/dist/components/arcgis-sketch/toolbar-sizing-controller.d.ts

@@ -0,0 +1,96 @@
+import type SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel.js";
+import type { LitElement } from "@arcgis/lumina";
+import type { GenericController } from "@arcgis/lumina/controllers";
+
+/**
+ * Offers Sketch's toolbar a main-axis budget when Sketch is directly slotted into a map or scene corner.
+ * The toolbar's own responsive layout decides how to arrange its tools within that budget.
+ *
+ * This controller measures the size of all of the view's slotted content, figures out which items would
+ * potentially overlap the toolbar, and uses that information to determine the actual available space.
+ *
+ * @internal
+ */
+export class ToolbarSizingController extends GenericController<void, HostElement> {
+  constructor(component: HostElement);
+  /**
+   * JSX ref for Sketch's toolbar stack.
+   *
+   * @param element
+   */
+  ref(element?: HTMLElement): void;
+}
+
+/**
+ * Calculates the available space (budget) along the toolbar's main axis within its given slot.
+ *
+ * budget = view length - (a) anchored inset - (b) same-slot reserve - (c) opposite reserve - optional opposite gap.
+ *
+ * The anchored inset includes preceding same-slot controls. The same-slot reserve covers following controls.
+ * Opposite-slot controls reserve space only if they overlap the toolbar on its cross axis.
+ *
+ * ```text
+ * Horizontal Sketch in the bottom-left corner; main axis ->
+ *
+ * +------------------------------ VIEW ----------------------------------+
+ * |                            +-------------------------------------+   |
+ * |                            |        DOES NOT BLOCK SKETCH        |   |
+ * |                            +-------------------------------------+   |
+ * |                                                                      |
+ * |              +========================+                              |
+ * |  +--------+  |     SKETCH'S SPACE     |  +-------+     +----------+  |
+ * |  | BEFORE |  | tools fit / wrap here  |  | AFTER |     | OBSTACLE |  |
+ * |  +--------+  +========================+  +-------+     +----------+  |
+ * +----------------------------------------------------------------------+
+ *    preceding      available budget        following       opposite
+ *    controls                               controls        control
+ *
+ * |<---- (a) --->|<------ budget --------->|<- (b) ->| gap |<-- (c) -->| |
+ * |<------------------------- view length ------------------------------>|
+ *
+ * (a) Anchored inset: view edge -> Sketch, including preceding controls.
+ * (b) Same-slot reserve: following controls and trailing margins.
+ * (c) Opposite reserve: obstacle -> far view edge, including its outer inset.
+ * ```
+ *
+ * Right/bottom anchoring mirrors the main-axis accounting; vertical layout uses height instead of width.
+ * The diagram shows the maximum budget, not the toolbar's actual rendered length.
+ *
+ * @param parameter0
+ * @returns A nonnegative length in CSS pixels, including zero when obstacles exhaust the available space.
+ * @internal
+ */
+export function calculateAvailableToolbarSpace(parameter0: ToolbarSizingMeasurements): number;
+
+/** The Sketch component that owns the toolbar stack. */
+export type HostElement = LitElement
+  & {
+  el: HTMLElement;
+  layout: Layout;
+  view?: SketchViewModel["view"];
+};
+
+export type ToolbarSizingMeasurements = {
+  /** Other-slot content; same-slot siblings are accounted for separately. */
+  content: ContentSizeAndPosition[];
+  /** Separation from overlapping opposite-corner content, not the view's outer margin. */
+  gap: number;
+  layout: Layout;
+  position: ScreenPosition;
+  /** Space occupied after Sketch in its slot's main-axis flow, including margins. */
+  sameSlotReserve: number;
+  toolbarBounds: Bounds;
+  viewBounds: Bounds;
+};
+
+export type Layout = "horizontal" | "vertical";
+
+export type ScreenPosition = "bottom-left" | "bottom-right" | "top-left" | "top-right";
+
+export type Bounds = Pick<DOMRect, "bottom" | "height" | "left" | "right" | "top" | "width">;
+
+/** An obstacle in another view slot. */
+export type ContentSizeAndPosition = {
+  bounds: Bounds;
+  position: ScreenPosition;
+};

package/dist/components/arcgis-time-bar-slider/customElement.d.ts

@@ -274,4 +274,12 @@ export abstract class ArcgisTimeBarSlider extends LitElement {
   accessor viewModel: TimeBarViewModel | undefined;
   /** Permanently destroy the component. */
   destroy(): Promise<void>;
+  /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "activeValue" | "lockTimeWindow"; }>;
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
+  readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    arcgisPropertyChange: ArcgisTimeBarSlider["arcgisPropertyChange"]["detail"];
+    arcgisReady: ArcgisTimeBarSlider["arcgisReady"]["detail"];
+  };
 }

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

@@ -1,28 +1,28 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/6.0/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 s } 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 g, safeClassMap as v } from "@arcgis/lumina";
-import { useDirection as w } from "@arcgis/lumina/controllers";
-const p = 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-xl);--arcgis-internal-slider-track-size: var(--calcite-size-px);--arcgis-slider-track-background-color: var(--calcite-color-border-1);--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}.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-internal-ticks-color: var(--calcite-color-text-1);--arcgis-ticks-font-weight: var(--calcite-font-weight-normal);--arcgis-ticks-label-width: auto;--arcgis-ticks-tick-color: var(--calcite-color-border-1);--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}:dir(ltr){.lock-time-window{border-inline-end-style:solid;border-inline-end-width:var(--calcite-border-width-sm);margin-inline-end:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-spacing-sm)}}:dir(rtl){.lock-time-window{border-inline-start-style:solid;border-inline-start-width:var(--calcite-border-width-sm);margin-inline-start:var(--calcite-spacing-sm);padding-inline-start:var(--calcite-spacing-sm)}}`;
-class f extends h {
+import { LitElement as h, createEvent as g, nothing as v, safeClassMap as w } from "@arcgis/lumina";
+import { useDirection as p, usePropertyChange as f } from "@arcgis/lumina/controllers";
+const b = 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-xl);--arcgis-internal-slider-track-size: var(--calcite-size-px);--arcgis-slider-track-background-color: var(--calcite-color-border-1);--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}.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-internal-ticks-color: var(--calcite-color-text-1);--arcgis-ticks-font-weight: var(--calcite-font-weight-normal);--arcgis-ticks-label-width: auto;--arcgis-ticks-tick-color: var(--calcite-color-border-1);--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}:dir(ltr){.lock-time-window{border-inline-end-style:solid;border-inline-end-width:var(--calcite-border-width-sm);margin-inline-end:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-spacing-sm)}}:dir(rtl){.lock-time-window{border-inline-start-style:solid;border-inline-start-width:var(--calcite-border-width-sm);margin-inline-start:var(--calcite-spacing-sm);padding-inline-start:var(--calcite-spacing-sm)}}`;
+class k extends h {
   constructor() {
-    super(...arguments), this._direction = w(), this.#t = new ResizeObserver(([e]) => {
+    super(...arguments), this._direction = p(), this.#t = new ResizeObserver(([e]) => {
       this._sliderWidth = e.contentRect.width;
-    }), this.#i = 100, this.#s = 100, this.#a = (e, i) => i === "value" ? this.viewModel?.formatDateTime(new Date(e)) : void 0, this.autoDestroyDisabled = !1, this.lockTimeWindow = !1, this.popoverDisplay = "none", this.showLockTimeWindow = !1, this.showMax = !1, this.showMin = !1, this.showTicks = !1;
+    }), this.#i = 100, this.#a = 100, this.#s = (e, i) => i === "value" ? this.viewModel?.formatDateTime(new Date(e)) : void 0, this.autoDestroyDisabled = !1, this.lockTimeWindow = !1, this.popoverDisplay = "none", this.showLockTimeWindow = !1, this.showMax = !1, this.showMin = !1, this.showTicks = !1, this.arcgisPropertyChange = f()("activeValue", "lockTimeWindow"), this.arcgisReady = g();
   }
   static {
     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 = p;
+    this.styles = b;
   }
   #t;
   #e;
   #i;
-  #s;
   #a;
+  #s;
   get _sliderFillPlacement() {
     switch (this.viewModel?.mode) {
       case "cumulative-from-end":
@@ -42,8 +42,8 @@ class f extends h {
     const { fullTimeExtent: i } = e;
     if (!i)
       return;
-    const { start: t, end: s } = i;
-    if (!t || !s)
+    const { start: t, end: a } = i;
+    if (!t || !a)
       return;
     const { timeExtent: r } = e;
     if (!r)
@@ -52,17 +52,17 @@ class f extends h {
         case "instant":
           return [t.getTime()];
         case "cumulative-from-start":
-          return [s.getTime()];
+          return [a.getTime()];
         case "time-window":
-          return [t.getTime(), s.getTime()];
+          return [t.getTime(), a.getTime()];
       }
     const { start: o, end: n } = r;
     switch (e.mode) {
       case "cumulative-from-end":
       case "instant":
-        return o ? o.getTime() < t.getTime() ? [t.getTime()] : o.getTime() > s.getTime() ? [s.getTime()] : [o.getTime()] : void 0;
+        return o ? o.getTime() < t.getTime() ? [t.getTime()] : o.getTime() > a.getTime() ? [a.getTime()] : [o.getTime()] : void 0;
       case "cumulative-from-start":
-        return n ? n.getTime() < t.getTime() ? [t.getTime()] : n.getTime() > s.getTime() ? [s.getTime()] : [n.getTime()] : void 0;
+        return n ? n.getTime() < t.getTime() ? [t.getTime()] : n.getTime() > a.getTime() ? [a.getTime()] : [n.getTime()] : void 0;
       case "time-window":
         return o && n ? [o.getTime(), n.getTime()] : void 0;
     }
@@ -101,10 +101,10 @@ class f extends h {
     return Number.isFinite(e) && e > 0 ? e : this.#i;
   }
   #m(e, i) {
-    const { viewModel: t } = this, { start: s, end: r } = e;
-    if (!t || !s || !r)
+    const { viewModel: t } = this, { start: a, end: r } = e;
+    if (!t || !a || !r)
       return;
-    const n = (r.getTime() - s.getTime()) / i;
+    const n = (r.getTime() - a.getTime()) / i;
     return t.tickFormats.find(({ duration: c }) => c > this.#d() * n) ?? t.tickFormats.at(-1);
   }
   #u() {
@@ -133,19 +133,19 @@ class f extends h {
     const { messages: e, showLockTimeWindow: i, viewModel: t } = this;
     if (!e || !i || !t)
       return null;
-    const s = this.lockTimeWindow ? "lock" : "unlock", r = this.lockTimeWindow ? e.unlockTimeWindow : e.lockTimeWindow;
-    return a`<calcite-action .active=${this.lockTimeWindow} class="lock-time-window" .disabled=${!t.interactive || t.mode !== "time-window"} .icon=${s} @click=${this.#u} .text=${r} title=${r ?? g}></calcite-action>`;
+    const a = this.lockTimeWindow ? "lock" : "unlock", r = this.lockTimeWindow ? e.unlockTimeWindow : e.lockTimeWindow;
+    return s`<calcite-action .active=${this.lockTimeWindow} class="lock-time-window" .disabled=${!t.interactive || t.mode !== "time-window"} .icon=${a} @click=${this.#u} .text=${r} title=${r ?? v}></calcite-action>`;
   }
   #n() {
     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>`;
+    return this.showMax && e ? s`<slot name=max><arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} class="max-date" .date=${e} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : s`<div class="hidden"></div>`;
   }
   #o() {
     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>`;
+    return this.showMin && e ? s`<slot name=min><arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} class="min-date" .date=${e} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : s`<div class="hidden"></div>`;
   }
   #w() {
-    return this.popoverDisplay !== "none" ? a`<div class="popover" slot=popover><slot name=popover>${this.#p()}</slot></div>` : null;
+    return this.popoverDisplay !== "none" ? s`<div class="popover" slot=popover><slot name=popover>${this.#p()}</slot></div>` : null;
   }
   #p() {
     const { activeValue: e, messages: i, viewModel: t } = this;
@@ -154,34 +154,34 @@ class f extends h {
     switch (t.mode) {
       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;
+        const a = t.timeExtent?.start;
+        return a ? s`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${a} .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;
+        return r ? s`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${r} .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 ? s`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${e} .viewModel=${t}></arcgis-time-bar-date>` : s`<arcgis-time-bar-extent .autoDestroyDisabled=${this.autoDestroyDisabled} .messages=${i} .viewModel=${t}></arcgis-time-bar-extent>`;
     }
   }
   #l() {
     const { messages: e, viewModel: i } = this;
-    if (!i?.fullTimeExtent?.start || !i?.fullTimeExtent?.end || !e || (i.tickFormat = this.#m(i.fullTimeExtent, this._sliderWidth ?? this.#s), !i.tickFormat))
+    if (!i?.fullTimeExtent?.start || !i?.fullTimeExtent?.end || !e || (i.tickFormat = this.#m(i.fullTimeExtent, this._sliderWidth ?? this.#a), !i.tickFormat))
       return null;
-    const t = i.fullTimeExtent.start.getTime(), s = i.fullTimeExtent.end.getTime();
-    return a`<div class="slider-container" ${u(this.#c())}><arcgis-slider allow-values-overlap .autoDestroyDisabled=${this.autoDestroyDisabled} class=${v({
+    const t = i.fullTimeExtent.start.getTime(), a = i.fullTimeExtent.end.getTime();
+    return s`<div class="slider-container" ${u(this.#c())}><arcgis-slider allow-values-overlap .autoDestroyDisabled=${this.autoDestroyDisabled} class=${w({
       slider: !0,
       "slider--has-ticks": this.showTicks,
       "slider--out-of-range": i.isOutOfRange
-    })} .disabled=${!i.interactive} .fillPlacement=${this._sliderFillPlacement} .labelFormatter=${this.#a} .max=${s} .min=${t} @arcgisActiveValueChange=${this.#h} @arcgisInput=${this.#g} .popoverLabel=${e.timeExtent} .popoverDisplay=${this.popoverDisplay === "none" ? "auto" : this.popoverDisplay} precision=0 .steps=${i.effectiveStopsEpoch} .values=${this._timeExtentEpochValues} .valuesDraggingDisabled=${this.lockTimeWindow}>${this.#w()}${this.#f(i, t, s)}</arcgis-slider></div>`;
+    })} .disabled=${!i.interactive} .fillPlacement=${this._sliderFillPlacement} .labelFormatter=${this.#s} .max=${a} .min=${t} @arcgisActiveValueChange=${this.#h} @arcgisInput=${this.#g} .popoverLabel=${e.timeExtent} .popoverDisplay=${this.popoverDisplay === "none" ? "auto" : this.popoverDisplay} precision=0 .steps=${i.effectiveStopsEpoch} .values=${this._timeExtentEpochValues} .valuesDraggingDisabled=${this.lockTimeWindow}>${this.#w()}${this.#f(i, t, a)}</arcgis-slider></div>`;
   }
   #f(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=${e.tickValues}></arcgis-ticks></slot></div>` : null;
+    return this.showTicks ? s`<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=${e.tickValues}></arcgis-ticks></slot></div>` : null;
   }
   render() {
-    return a`<div class="root">${this._direction === "ltr" ? a`${this.#r()}${this.#o()}${this.#l()}${this.#n()}` : a`${this.#n()}${this.#l()}${this.#o()}${this.#r()}`}</div>`;
+    return s`<div class="root">${this._direction === "ltr" ? s`${this.#r()}${this.#o()}${this.#l()}${this.#n()}` : s`${this.#n()}${this.#l()}${this.#o()}${this.#r()}`}</div>`;
   }
 }
-d("arcgis-time-bar-slider", f);
+d("arcgis-time-bar-slider", k);
 export {
-  f as ArcgisTimeBarSlider
+  k as ArcgisTimeBarSlider
 };