@arcgis/map-components 5.0.0-next.99 → 5.0.1

package/dist/components/arcgis-building-level-item/customElement.js

@@ -1,20 +1,18 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
 import { c as r } from "../../chunks/runtime.js";
-import { css as o, html as a } from "lit";
-import { LitElement as n, createEvent as e, safeStyleMap as i, safeClassMap as c } from "@arcgis/lumina";
-import { createRef as l, ref as h } from "lit/directives/ref.js";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.99 */
-const d = o`:host .container{border:1px solid transparent;touch-action:none;--fast-transition-time: .1s;--slow-transition-time: .3s}:host(.animate-level),.container,.item,.rect{transition:height var(--slow-transition-time) cubic-bezier(.63,-.265,.48,1.64),width var(--slow-transition-time) cubic-bezier(.63,-.265,.48,1.64),background-color var(--fast-transition-time) ease-in-out,border-color var(--fast-transition-time) ease-in-out}:host,.container,.item,.rect{will-change:height;transition:height var(--fast-transition-time) ease-out,width var(--fast-transition-time) ease-out,background-color var(--fast-transition-time) ease-in-out,border-color var(--fast-transition-time) ease-in-out}.rect{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotateX(66deg) rotate(45deg);border:2px solid #6e6e6e4d;background-color:rgb(from var(--calcite-color-foreground-1) r g b / 70%);&.active{border-color:var(--calcite-color-brand);background-color:var(--calcite-color-brand)}&.hover{border-color:var(--calcite-color-brand)}}.item{pointer-events:none;position:absolute;left:50%;transform:translate(-50%,-50%)}`;
-class m extends n {
+import { css as o, html as s } from "lit";
+import { LitElement as a, safeStyleMap as e, safeClassMap as n } from "@arcgis/lumina";
+import { createRef as c, ref as l } from "lit/directives/ref.js";
+const h = o`:host .container{border:1px solid transparent;touch-action:none;--fast-transition-time: .1s;--slow-transition-time: .3s}:host(.animate-level),.container,.item,.rect{transition:height var(--slow-transition-time) cubic-bezier(.63,-.265,.48,1.64),width var(--slow-transition-time) cubic-bezier(.63,-.265,.48,1.64),background-color var(--fast-transition-time) ease-in-out,border-color var(--fast-transition-time) ease-in-out}:host,.container,.item,.rect{will-change:height;transition:height var(--fast-transition-time) ease-out,width var(--fast-transition-time) ease-out,background-color var(--fast-transition-time) ease-in-out,border-color var(--fast-transition-time) ease-in-out}.rect{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotateX(66deg) rotate(45deg);border:var(--calcite-border-width-md) solid rgb(from var(--calcite-color-text-3) r g b / .5);background-color:rgb(from var(--calcite-color-foreground-1) r g b / .7);&.active{border-color:var(--calcite-color-brand);background-color:var(--calcite-color-brand)}&.hover{border-color:var(--calcite-color-brand)}}.item{pointer-events:none;position:absolute;left:50%;transform:translate(-50%,-50%)}`;
+class d extends a {
   constructor() {
-    super(...arguments), this.#t = l(), this.baseWidth = 0, this.hovered = !1, this.active = !1, this.height = 0, this.arcgisTileBlur = e(), this.arcgisTileFocus = e(), this.arcgisTileSelect = e();
+    super(...arguments), this.#t = c(), this.baseWidth = 0, this.hovered = !1, this.active = !1, this.height = 0;
   }
   static {
     this.properties = { messages: 0, baseWidth: 9, level: 9, width: 9, hovered: 5, active: 5, height: 9 };
   }
   static {
-    this.styles = d;
+    this.styles = h;
   }
   #t;
   focus() {
@@ -23,23 +21,21 @@ class m extends n {
   render() {
     if (this.messages == null)
       return null;
-    const t = this.width ?? this.baseWidth, s = t * 0.8;
-    return a`<div class="container" style=${i({ height: `${this.height}px` })}><div class="item" style=${i({
+    const t = this.width ?? this.baseWidth, i = t * 0.8;
+    return s`<div class="container" style=${e({ height: `${this.height}px` })}><div class="item" style=${e({
       width: `${Math.round(t)}px`,
       height: `${Math.round(t)}px`
-    })}><button class=${c({
+    })}><button class=${n({
       rect: !0,
       active: this.active,
       hover: this.hovered
-    })} style=${i({
-      width: `${Math.round(s)}px`,
-      height: `${Math.round(s)}px`
-    })} tabindex=-1 @click=${() => {
-      this.arcgisTileSelect.emit();
-    }} type=button ${h(this.#t)}></button></div></div>`;
+    })} style=${e({
+      width: `${Math.round(i)}px`,
+      height: `${Math.round(i)}px`
+    })} tabindex=-1 type=button ${l(this.#t)}></button></div></div>`;
   }
 }
-r("arcgis-building-level-item", m);
+r("arcgis-building-level-item", d);
 export {
-  m as BuildingLevelItem
+  d as BuildingLevelItem
 };

package/dist/components/arcgis-building-level-picker/customElement.js

@@ -1,40 +1,38 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
 import { c as p } from "../../chunks/runtime.js";
 import { repeat as b } from "lit/directives/repeat.js";
-import { css as x, html as s } from "lit";
-import { keyed as P } from "lit/directives/keyed.js";
-import { LitElement as L, safeClassMap as a, nothing as h, safeStyleMap as m } from "@arcgis/lumina";
-import { a as $, b as w, c as y, d as H, l as M, e as k, f as C, g as z, h as W, i as v, j as d } from "../../chunks/constants.js";
+import { css as L, html as o } from "lit";
+import { keyed as x } from "lit/directives/keyed.js";
+import { LitElement as P, createEvent as $, safeClassMap as a, nothing as h, safeStyleMap as m } from "@arcgis/lumina";
+import { l as w, a as H, b as y, c as M, d as C, e as k, f as z, g as W, h as E, i as v, j as d } from "../../chunks/constants.js";
 import { clamp as c } from "@arcgis/toolkit/number";
-import { queryAll as E } from "lit/decorators.js";
-import { createRef as O, ref as A } from "lit/directives/ref.js";
+import { queryAll as O } from "lit/decorators.js";
+import { createRef as A, ref as B } from "lit/directives/ref.js";
 import { watch as N } from "@arcgis/core/core/reactiveUtils.js";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.99 */
-const S = x`:host{transition:max-height .25s ease-in-out;--esri-widget-padding: 12px 15px;--level-picker-padding: var(--calcite-spacing-md);--level-label-color: var(--calcite-color-text-1);--level-label-color--empty: var(--calcite-color-text-2);--level-label-color--active: var(--calcite-color-brand);--level-border-width: 2px;--level-border-color: var(--calcite-color-border-2);--level-border-color--hover: var(--calcite-color-brand);--level-border-color--active: var(--calcite-color-brand);--level-background-color: rgb(from var(--calcite-color-foreground-1) r g b / 70%);--level-background-color--hover: rgb(from var(--calcite-color-foreground-1) r g b / 90%);--level-background-color--active: var(--calcite-color-brand);--focus-outline-width: 2px;--focus-outline-color: var(--calcite-color-brand);--focus-outline-offset: 2px}.container{height:max-content;display:flex;flex-direction:row;align-items:center;&.no-level{display:none}>*{height:max-content}}.clear-button{appearance:none;margin-inline-start:7px;display:none;position:absolute;inset-block-start:-4px}.label-container{--width: 90px;--height: 40px;flex-direction:column;justify-content:space-between;align-items:center;width:50%;margin-inline-end:var(--calcite-spacing-md);display:flex;&.active{color:var(--calcite-color-brand)}&.empty{cursor:default;color:var(--calcite-color-border-2);font-size:var(--calcite-font-size);font-weight:var(--calcite-font-weight-light)}&:focus{outline:none}&:focus-visible{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus)}}.level-label{position:relative;text-align:center;>span{pointer-events:none}&.active{font-size:var(--height);line-height:calc(var(--height) + 6px);>.clear-button{display:inline-block}}}.tiles-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;transform:rotate(180deg);cursor:pointer;padding:20px 0;width:50%}.tiles-inner-container{transition:margin .3s}`;
+const S = L`:host{transition:max-height .25s ease-in-out;--esri-widget-padding: 12px 15px;--level-picker-padding: var(--calcite-spacing-md);--level-label-color: var(--calcite-color-text-1);--level-label-color--empty: var(--calcite-color-text-2);--level-label-color--active: var(--calcite-color-brand);--level-border-width: 2px;--level-border-color: var(--calcite-color-border-2);--level-border-color--hover: var(--calcite-color-brand);--level-border-color--active: var(--calcite-color-brand);--level-background-color: rgb(from var(--calcite-color-foreground-1) r g b / 70%);--level-background-color--hover: rgb(from var(--calcite-color-foreground-1) r g b / 90%);--level-background-color--active: var(--calcite-color-brand);--focus-outline-width: 2px;--focus-outline-color: var(--calcite-color-brand);--focus-outline-offset: 2px}.container{height:max-content;display:flex;flex-direction:row;align-items:center;&.no-level{display:none}>*{height:max-content}}.clear-button{appearance:none;margin-inline-start:7px;display:none;position:absolute;inset-block-start:-4px}.label-container{--width: 90px;--height: 40px;flex-direction:column;justify-content:space-between;align-items:center;width:50%;margin-inline-end:var(--calcite-spacing-md);display:flex;&.active{color:var(--calcite-color-brand)}&.empty{cursor:default;color:var(--calcite-color-border-2);font-size:var(--calcite-font-size);font-weight:var(--calcite-font-weight-light)}&:focus{outline:none}&:focus-visible{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus)}}.level-label{position:relative;text-align:center;>span{pointer-events:none}&.active{font-size:var(--height);line-height:calc(var(--height) + 6px);>.clear-button{display:inline-block}}}.tiles-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;transform:rotate(180deg);cursor:pointer;padding:20px 0;width:50%}.tiles-inner-container{transition:margin .3s}`;
 var T = Object.defineProperty, F = (t, e, i, n) => {
-  for (var l = void 0, o = t.length - 1, r; o >= 0; o--)
-    (r = t[o]) && (l = r(e, i, l) || l);
+  for (var l = void 0, r = t.length - 1, s; r >= 0; r--)
+    (s = t[r]) && (l = s(e, i, l) || l);
   return l && T(e, i, l), l;
 };
-class f extends L {
+class f extends P {
   constructor() {
     super(...arguments), this.hovering = !1, this.onPointerMove = (e) => {
       if (!this.hovering)
         return !1;
       if (window.getSelection()?.removeAllRanges(), this.containerPosTop != null) {
         const i = this.containerPosTop, n = v * d, l = this.expandedLevelsMargin;
-        let o = this.levelsHeight, r = i + n + l;
+        let r = this.levelsHeight, s = i + n + l;
         const g = this.levelHeight / 2;
-        r += g, o -= g;
-        let u = (e.clientY - r) / o;
-        u += z, this.normalizedPointerPosition = u;
+        s += g, r -= g;
+        let u = (e.clientY - s) / r;
+        u += W, this.normalizedPointerPosition = u;
       }
       return !1;
     }, this.onPointerEnter = () => {
       const e = this.levelsContainer.value;
       this.hovering || e == null || (this.hovering = !0, this.containerPosTop = e.getBoundingClientRect().top ?? 0);
-    }, this.levelsContainer = O(), this.onPointerLeave = () => {
+    }, this.levelsContainer = A(), this.onPointerLeave = () => {
       if (this.hovering) {
         window.getSelection()?.removeAllRanges();
         for (const e of this.levelItems)
@@ -44,8 +42,8 @@ class f extends L {
     }, this.onPointerUp = () => {
       window.getSelection()?.removeAllRanges();
       const e = this.level;
-      this.hoveredLevel == null || e == null || (e.enabled && this.hoveredLevel === e.value ? e.clear() : e.select(this.hoveredLevel));
-    }, this.expandedLevelsHeight = void 0, this.normalizedPointerPosition = 0, this.hoveredLevel = null;
+      this.hoveredLevel == null || e == null || this.#r();
+    }, this.expandedLevelsHeight = void 0, this.normalizedPointerPosition = 0, this.hoveredLevel = null, this.arcgisBuildingLevelChange = $({ bubbles: !0, composed: !0 });
   }
   static {
     this.properties = { expandedLevelsHeight: 16, normalizedPointerPosition: 16, hoveredLevel: 16, messages: 0, level: 0, numberOfLevels: 32, levelHeight: 32, levelsHeight: 32 };
@@ -57,12 +55,12 @@ class f extends L {
     return this.level?.allowedValues ?? [];
   }
   get levelWidth() {
-    const { levelWidthNominator: e, levelWidthConstant: i } = W, n = e / Math.sqrt(this.numberOfLevels) + i;
-    return Math.round(c(n, $, w));
+    const { levelWidthNominator: e, levelWidthConstant: i } = E, n = e / Math.sqrt(this.numberOfLevels) + i;
+    return Math.round(c(n, w, H));
   }
   get _gaussianFactor() {
     const e = this.numberOfLevels;
-    return e / Math.log(y * e) * H;
+    return e / Math.log(y * e) * M;
   }
   get expandedLevelsMargin() {
     return Math.round(((this.expandedLevelsHeight ?? 0) - this.levelsHeight) / 2);
@@ -80,22 +78,22 @@ class f extends L {
     return this.levels.length;
   }
   get levelHeight() {
-    const e = M, i = e * 2 / Math.sqrt(this.numberOfLevels);
+    const e = C, i = e * 2 / Math.sqrt(this.numberOfLevels);
     return Math.round(c(i, 2, e));
   }
   get levelsHeight() {
     return Math.round(this.levelHeight * this.numberOfLevels);
   }
   async loaded() {
-    this.listen("keydown", this.#t.bind(this)), this.manager.onLifecycle(() => [
+    this.listen("keydown", this.#n.bind(this)), this.manager.onLifecycle(() => [
       N(() => [this.normalizedPointerPosition, this.hovering], () => this.onPointerPositionChange(), { initial: !0 })
     ]);
   }
   onPointerPositionChange() {
     let e = 0;
     this.levelItems.forEach((n, l) => {
-      const { width: o, height: r } = this.getLevelWidgetSize(l);
-      n.height = r, n.width = o, e += r;
+      const { width: r, height: s } = this.getLevelWidgetSize(l);
+      n.height = s, n.width = r, e += s;
     }), this.hoveredLevel = this.levelClosestToPointer;
     const i = this.expandedLevelsHeight;
     (i == null || Math.abs(i - e) > 30) && (this.expandedLevelsHeight = e);
@@ -104,49 +102,59 @@ class f extends L {
     const i = { width: this.levelWidth, height: this.levelHeight };
     if (this.hovering) {
       const n = this.getGaussianFactor(e, this.clampedNormalizedPointerPosition);
-      i.width += k * n, i.height += C * n;
+      i.width += k * n, i.height += z * n;
     }
     return i;
   }
   getGaussianFactor(e, i) {
-    const n = this.numberOfLevels - 1, l = (n - e) / n, o = this._gaussianFactor * (l - i);
-    return Math.exp(-(o ** 2));
+    const n = this.numberOfLevels - 1, l = (n - e) / n, r = this._gaussianFactor * (l - i);
+    return Math.exp(-(r ** 2));
   }
-  #t(e) {
+  #n(e) {
     switch (e.key) {
       case "ArrowDown":
       case "ArrowLeft":
-        e.preventDefault(), e.stopPropagation(), this.level?.previous(), this.#e();
+        e.preventDefault(), e.stopPropagation(), this.#i(), this.#e();
         break;
       case "ArrowUp":
       case "ArrowRight":
-        e.preventDefault(), e.stopPropagation(), this.level?.next(), this.#e();
+        e.preventDefault(), e.stopPropagation(), this.#t(), this.#e();
         break;
     }
   }
   #e() {
     Array.from(this.levelItems).find((i) => i.level === this.level?.value)?.focus();
   }
+  #t() {
+    this.level && (this.level.next(), this.arcgisBuildingLevelChange.emit());
+  }
+  #i() {
+    this.level && (this.level.previous(), this.arcgisBuildingLevelChange.emit());
+  }
+  #r() {
+    this.level == null || this.hoveredLevel == null || (this.level.value === this.hoveredLevel && !this.level.disabled ? this.#l() : (this.level.select(this.hoveredLevel), this.arcgisBuildingLevelChange.emit()));
+  }
+  #l() {
+    this.level && !this.level.disabled && (this.level.clear(), this.arcgisBuildingLevelChange.emit());
+  }
   render() {
     if (!this.messages)
       return null;
-    const e = this.level, i = e?.value, n = this.numberOfLevels > 1 ? b(this.levels, (l) => l, (l) => s`<arcgis-building-level-item .level=${l} .baseWidth=${this.levelWidth} .hovered=${this.hoveredLevel === l} .active=${e?.value === l} class=${a({ "animate-level": !this.hovering })} .messages=${this.messages}></arcgis-building-level-item>`) : null;
-    return s`<div class=${a({
+    const e = this.level;
+    e?.value;
+    const i = e && !e.disabled, n = this.numberOfLevels > 1 ? b(this.levels, (l) => l, (l) => o`<arcgis-building-level-item .level=${l} .baseWidth=${this.levelWidth} .hovered=${this.hoveredLevel === l} .active=${e && !e.disabled && e.value === l} class=${a({ "animate-level": !this.hovering })} .messages=${this.messages}></arcgis-building-level-item>`) : null;
+    return o`<div class=${a({
       container: !0,
       "no-level": this.numberOfLevels < 2,
       "animate-level": this.hovering
-    })}>${D({ messages: this.messages, active: i != null && e?.enabled, hasNext: e?.hasNext, hasPrevious: e?.hasPrevious, onNext: () => e?.next(), onPrevious: () => e?.previous(), children: R({ messages: this.messages, level: this.hoveredLevel ?? e?.value, active: e?.enabled, onClear: () => {
-      e && (e.enabled = !1);
-    } }) })}${_({ ref: this.levelsContainer, expandedLevelsMargin: this.expandedLevelsMargin, levelsHeight: this.levelsHeight, onPointerEnter: this.onPointerEnter, onPointerMove: this.onPointerMove, onPointerLeave: this.onPointerLeave, onPointerUp: this.onPointerUp, onClick: () => {
-      this.hoveredLevel != null && e?.select(this.hoveredLevel);
-    }, children: n })}</div>`;
+    })}>${D({ messages: this.messages, active: i, hasNext: e?.hasNext, hasPrevious: e?.hasPrevious, onNext: () => this.#t(), onPrevious: () => this.#i(), children: R({ messages: this.messages, level: this.hoveredLevel ?? e?.value, active: i, onClear: () => this.#l() }) })}${_({ ref: this.levelsContainer, expandedLevelsMargin: this.expandedLevelsMargin, levelsHeight: this.levelsHeight, onPointerEnter: this.onPointerEnter, onPointerMove: this.onPointerMove, onPointerLeave: this.onPointerLeave, onPointerUp: this.onPointerUp, children: n })}</div>`;
   }
 }
 F([
-  E("arcgis-building-level-item")
+  O("arcgis-building-level-item")
 ], f.prototype, "levelItems");
 function D(t) {
-  return s`<div class=${a({
+  return o`<div class=${a({
     "label-container": !0,
     empty: !t.active,
     active: !0,
@@ -155,18 +163,18 @@ function D(t) {
 }
 function R(t) {
   const e = t.messages;
-  return s`<div aria-label=${e.clearLevel ?? h} class=${a({
+  return o`<div aria-label=${e.clearLevel ?? h} class=${a({
     "level-label": !0,
     active: t.active && t.level != null
-  })} @click=${t.onClear} title=${e.clearLevel ?? h}>${t.active ? s`<span>${t.level}</span>${P("clear-button", s`<calcite-fab appearance=outline-fill class="clear-button" icon=x kind=neutral @click=${t.onClear} scale=s></calcite-fab>`)}` : s`<span>${e.selectLevel}</span>`}</div>`;
+  })} @click=${t.onClear} title=${e.clearLevel ?? h}>${t.active ? o`<span>${t.level}</span>${x("clear-button", o`<calcite-fab appearance=outline-fill class="clear-button" icon=x kind=neutral @click=${t.onClear} scale=s></calcite-fab>`)}` : o`<span>${e.selectLevel}</span>`}</div>`;
 }
 function _(t) {
   const e = v * d, i = -e / d, n = t.levelsHeight, l = n + e * 2;
-  return s`<div class="tiles-container" @pointerenter=${t.onPointerEnter} @pointerover=${t.onPointerEnter} @pointermove=${t.onPointerMove} @pointerleave=${t.onPointerLeave} @pointerup=${t.onPointerUp} @click=${t.onClick} style=${m({
+  return o`<div class="tiles-container" @pointerenter=${t.onPointerEnter} @pointerover=${t.onPointerEnter} @pointermove=${t.onPointerMove} @pointerleave=${t.onPointerLeave} @pointerup=${t.onPointerUp} @click=${t.onClick} style=${m({
     height: `${l}px`,
     marginBlockStart: `${i}px`,
     marginBlockEnd: `${i}px`
-  })} ${A(t.ref)}><div class="tiles-inner-container" style=${m({
+  })} ${B(t.ref)}><div class="tiles-inner-container" style=${m({
     height: `${n}px`,
     margin: "0",
     marginBlockStart: `${v - t.expandedLevelsMargin}px`

package/dist/components/arcgis-building-phase-picker/customElement.js

@@ -1,78 +1,90 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
 import { c as l } from "../../chunks/runtime.js";
 import { css as h, html as a } from "lit";
 import { keyed as o } from "lit/directives/keyed.js";
-import { LitElement as d, safeClassMap as s, nothing as u } from "@arcgis/lumina";
-import { l as p } from "../../chunks/constants.js";
-import { clamp as v } from "@arcgis/toolkit/number";
-import { useDirection as f } from "@arcgis/lumina/controllers";
-import { when as m, watch as g } from "@arcgis/core/core/reactiveUtils.js";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.99 */
-const b = h`:host{--num-phases: 7;--container-width: 100cqw;--phase-size: 24px;--arrow-width: 16px;--padding: var(--calcite-spacing-xxs);--divider-width-min: var(--calcite-spacing-base);--divider-width-max: var(--calcite-spacing-xl);--divider-width: calc( (var(--container-width) - (var(--phase-size) * var(--num-phases)) - (var(--arrow-width) * 2) - (var(--padding) * 2) ) / (var(--num-phases) - 1) );container-type:inline-size}.phase-picker,.phases-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.phases-container{position:relative;flex-shrink:1;padding:var(--calcite-spacing-xxs);overflow:hidden}.phase-button{appearance:none;display:flex;flex-shrink:0;align-items:center;justify-content:center;border:solid var(--calcite-border-width-sm) var(--calcite-color-border-2);border-radius:var(--calcite-corner-radius-pill);background:var(--calcite-color-background);cursor:pointer;padding:1px 0 0;width:var(--phase-size);height:var(--phase-size);color:var(--calcite-color-text-1);font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size);font-weight:var(--calcite-font-weight-regular)}.phase-button:hover{border-width:var(--calcite-border-width-md);border-color:var(--calcite-color-brand)}.phase-button:focus-visible{outline:var(--calcite-border-width-md) solid var(--calcite-color-brand);outline-offset:2px}.phase-button.active{--calcite-highlight-blue-100: #e2f1fb;border-color:var(--calcite-color-brand);background-color:var(--calcite-highlight-blue-100)}.phase-button.current{background-color:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}.arrow-left,.arrow-right{--calcite-internal-action-padding-inline: 0;width:var(--arrow-width);min-width:var(--arrow-width)}.divider{flex:0;background:var(--calcite-color-border-1);min-width:clamp(var(--divider-width-min),var(--divider-width),var(--divider-width-max));height:var(--calcite-border-width-sm)}.divider.active{background-color:var(--calcite-color-brand)}`;
-class w extends d {
+import { LitElement as d, createEvent as u, safeClassMap as s, nothing as p } from "@arcgis/lumina";
+import { d as v } from "../../chunks/constants.js";
+import { clamp as m } from "@arcgis/toolkit/number";
+import { useDirection as g } from "@arcgis/lumina/controllers";
+import { when as f, watch as b } from "@arcgis/core/core/reactiveUtils.js";
+const w = h`:host{--num-phases: 7;--container-width: 100cqw;--phase-size: 24px;--arrow-width: 16px;--padding: var(--calcite-spacing-xxs);--divider-width-min: var(--calcite-spacing-base);--divider-width-max: var(--calcite-spacing-xl);--divider-width: calc( (var(--container-width) - (var(--phase-size) * var(--num-phases)) - (var(--arrow-width) * 2) - (var(--padding) * 2) ) / (var(--num-phases) - 1) );container-type:inline-size}.phase-picker,.phases-container{display:flex;flex-direction:row;align-items:center}.phases-container{position:relative;flex-shrink:1;padding:var(--calcite-spacing-xxs);overflow:hidden}.phase-button{appearance:none;display:flex;flex-shrink:0;align-items:center;justify-content:center;border:solid var(--calcite-border-width-sm) var(--calcite-color-border-2);border-radius:var(--calcite-corner-radius-pill);background:var(--calcite-color-background);cursor:pointer;padding:1px 0 0;width:var(--phase-size);height:var(--phase-size);color:var(--calcite-color-text-1);font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size);font-weight:var(--calcite-font-weight-regular)}.phase-button:hover{border-width:var(--calcite-border-width-md);border-color:var(--calcite-color-brand)}.phase-button:focus-visible{outline:var(--calcite-border-width-md) solid var(--calcite-color-brand);outline-offset:var(--calcite-border-width-md)}.phase-button.active{border-color:var(--calcite-color-brand);background-color:var(--calcite-foreground-1)}.phase-button.current{background-color:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}.arrow-left,.arrow-right{--calcite-internal-action-padding-inline: 0;width:var(--arrow-width);min-width:var(--arrow-width)}.divider{flex:0;background:var(--calcite-color-border-1);min-width:clamp(var(--divider-width-min),var(--divider-width),var(--divider-width-max));height:var(--calcite-border-width-sm)}.divider.active{background-color:var(--calcite-color-brand)}`;
+class x extends d {
+  constructor() {
+    super(...arguments), this.#i = g(), this.#e = !0, this.#t = !1, this.arcgisBuildingPhaseChange = u({ bubbles: !0, composed: !0 });
+  }
   static {
     this.properties = { messages: 0, phase: 0, numberOfPhases: 32, phaseHeight: 32 };
   }
   static {
-    this.styles = b;
+    this.styles = w;
   }
   get phases() {
     return this.phase?.allowedValues ?? [];
   }
-  #r = f();
-  #e = !0;
-  #t = !1;
-  #i() {
+  #i;
+  #e;
+  #t;
+  #r() {
     const e = this.renderRoot.querySelector("button.current");
     e && (this.#e && (e.scrollIntoView({ block: "nearest", inline: "center" }), this.#e = !1), this.#t && (e.focus(), this.#t = !1));
   }
+  #a() {
+    this.phase && (this.phase.next(), this.arcgisBuildingPhaseChange.emit());
+  }
+  #s() {
+    this.phase && (this.phase.previous(), this.arcgisBuildingPhaseChange.emit());
+  }
+  #c(e) {
+    this.phase != null && this.phase?.value !== e && (this.phase?.select(e), this.arcgisBuildingPhaseChange.emit());
+  }
   get numberOfPhases() {
     return this.phases.length;
   }
   get phaseHeight() {
-    const e = p, i = e * 2 / Math.sqrt(this.numberOfPhases);
-    return Math.round(v(i, 2, e));
+    const e = v, r = e * 2 / Math.sqrt(this.numberOfPhases);
+    return Math.round(m(r, 2, e));
   }
   loaded() {
     this.listen("keydown", (e) => {
       switch (e.key) {
         case "ArrowDown":
         case "ArrowLeft":
-          e.stopPropagation(), e.preventDefault(), this.phase?.previous(), this.#t = !0;
+          e.stopPropagation(), e.preventDefault(), this.#s(), this.#t = !0;
           break;
         case "ArrowUp":
         case "ArrowRight":
-          e.stopPropagation(), e.preventDefault(), this.phase?.next(), this.#t = !0;
+          e.stopPropagation(), e.preventDefault(), this.#a(), this.#t = !0;
           break;
       }
     }), this.manager.onLifecycle(() => [
-      m(() => this.phase?.state === "ready", () => {
+      f(() => this.phase?.state === "ready", () => {
         requestAnimationFrame(() => {
-          this.#e = !0, this.#i();
+          this.#e = !0, this.#r();
         });
       }, { initial: !0 }),
-      g(() => this.phase?.value, () => {
-        this.#e = !0, this.#i();
+      b(() => this.phase?.value, () => {
+        this.#e = !0, this.#r();
       })
     ]);
   }
   render() {
-    const e = this.phase, i = this.messages;
-    return !i || e == null ? null : a`<div class="phase-picker">${c({ className: "arrow-left", disabled: !1, icon: this.#r === "rtl" ? "chevron-right" : "chevron-left", onClick: () => e.previous(), text: i.previousPhase })}<div class="phases-container">${this.phases.map((r, n) => a`${n > 0 && a`<span class=${s({
+    const e = this.phase, r = this.messages;
+    return !r || e == null ? null : a`<div class="phase-picker">${c({ className: "arrow-left", disabled: !1, icon: this.#i === "rtl" ? "chevron-right" : "chevron-left", onClick: () => this.#s(), text: r.previousPhase })}<div class="phases-container">${this.phases.map((i, n) => a`${n > 0 && a`<span class=${s({
       divider: !0,
-      active: e.value >= r
-    })}></span>` || ""}${o(r, a`<button class=${s({
+      active: e.value >= i
+    })}></span>` || ""}${o(i, a`<button class=${s({
       "phase-button": !0,
-      active: e.value >= r,
-      current: e.value === r
-    })} @click=${() => e?.select(r)}>${r}</button>`)}`)}</div>${c({ className: "arrow-right", disabled: !1, icon: this.#r === "rtl" ? "chevron-left" : "chevron-right", onClick: () => e.next(), text: i.nextPhase })}</div>`;
+      active: e.value >= i,
+      current: e.value === i
+    })} @click=${() => {
+      this.#c(i);
+    }}>${i}</button>`)}`)}</div>${c({ className: "arrow-right", disabled: !1, icon: this.#i === "rtl" ? "chevron-left" : "chevron-right", onClick: () => this.#a(), text: r.nextPhase })}</div>`;
   }
 }
 function c(t) {
-  return o(t.className, a`<calcite-action appearance=transparent class=${s(t.className)} .disabled=${t.disabled} .icon=${t.icon} icon-flip-rtl @click=${t.onClick} scale=s .text=${t.text} title=${t.text ?? u}></calcite-action>`);
+  return o(t.className, a`<calcite-action appearance=transparent class=${s(t.className)} .disabled=${t.disabled} .icon=${t.icon} icon-flip-rtl @click=${t.onClick} scale=s .text=${t.text} title=${t.text ?? p}></calcite-action>`);
 }
-l("arcgis-building-phase-picker", w);
+l("arcgis-building-phase-picker", x);
 export {
-  w as BuildingPhasePicker
+  x as BuildingPhasePicker
 };