@arcgis/map-components 5.0.0-next.12 → 5.0.0-next.120

package/dist/components/arcgis-building-explorer/support/building-layer-utils.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+import { default as CodedValueDomain } from '@arcgis/core/layers/support/CodedValueDomain.js';
+import { default as BuildingComponentSublayer } from '@arcgis/core/layers/buildingSublayers/BuildingComponentSublayer.js';
+import { default as BuildingGroupSublayer } from '@arcgis/core/layers/buildingSublayers/BuildingGroupSublayer.js';
+import { FieldInfo } from './types';
+import { default as BuildingSceneLayer } from '@arcgis/core/layers/BuildingSceneLayer';
+type BuildingFieldStatistics = __esri.BuildingFieldStatistics;
+type BuildingSublayerUnion = BuildingComponentSublayer | BuildingGroupSublayer;
+/**
+ * Finds the "FullModel" sublayer in the specified layer.
+ *
+ * @param layer
+ *    The layer whose sublayers are to be searched.
+ */
+export declare const findFullModelSublayer: (layer: BuildingSceneLayer) => BuildingSublayerUnion | nullish;
+/**
+ * Finds the "Overview" sublayer in the specified layer.
+ *
+ * @param layer
+ *    The layer whose sublayers are to be searched.
+ */
+export declare const findOverviewSublayer: (layer: BuildingSceneLayer) => BuildingSublayerUnion | nullish;
+/**
+ * Turns the "FullModel" layer on and the "Overview" layer off, if they exist, so
+ * that the interior of the building can be seen when using the building explorer.
+ *
+ * @param layer
+ *    The layer whose sublayers are to be modified.
+ */
+export declare function showFullModel(layer: BuildingSceneLayer): void;
+/**
+ * Finds information about a building component field by combining data found
+ * in the `BuildingSummaryStatistics` and in field domains.
+ *
+ * @param layer
+ *    The layer whose components are to be checked.
+ * @param modelName
+ *    The `modelName` used to identify the field we're interested in.
+ */
+export declare function findFieldInfoByModelName(layer: BuildingSceneLayer, modelName: string): FieldInfo | nullish;
+/**
+ * Finds the `CodedValueDomain` for specified field in the first building
+ * component sublayer which has it.
+ *
+ * @param layer
+ *    The layer which is to be traversed to find the domain.
+ * @param fieldName
+ *    The name of the field whose domain is to be returned.
+ */
+export declare function findFieldCodedValueDomain(layer: BuildingSceneLayer, fieldName: string): CodedValueDomain | nullish;
+/**
+ * Tries to find a `BuildingFieldStatistics` object in the specified layer containing
+ * the provided `modelName`.
+ *
+ * @param layer
+ *    The layer which is to be searched.
+ * @param modelName
+ *    The `modelName` of the field which is to be found.
+ */
+export declare function findFieldStatisticsByModelName(layer: BuildingSceneLayer, modelName: string): BuildingFieldStatistics | nullish;
+export {};

package/dist/components/arcgis-building-explorer/support/filter-utils.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+import { default as Collection } from '@arcgis/core/core/Collection';
+import { default as BuildingSceneLayer } from '@arcgis/core/layers/BuildingSceneLayer';
+import { default as BuildingFilter } from '@arcgis/core/layers/support/BuildingFilter.js';
+type BuildingFilterBlock = __esri.BuildingFilterBlock;
+export declare const buildingExplorerFilterSuffix = "__BUILDING_EXPLORER_FILTER__";
+export declare function generateFilterId(): string;
+/**
+ * Gets whether the specified `BuildingFilter` was created by the building explorer.
+ *
+ * @param filter
+ *    The filter which is to be checked.
+ */
+export declare function isBuildingExplorerFilter(filter: BuildingFilter | string): boolean;
+/**
+ * Searches all the building explorer filters in all the layers in order to
+ * try and determine which values the user had previously selected in the UI
+ * so that we can repopulate it.
+ *
+ * @param layers
+ *    The layer which are to be searched for existing building explorer filters.
+ * @param parseFn
+ *    Function which tries to parse a value from a `BuildingFilter`. Once it
+ *    returns a non-null value, we return that value.
+ */
+export declare function getValueFromFilters(layers: Collection<BuildingSceneLayer>, parseFn: (filter: BuildingFilter) => nullish | number): nullish | number;
+/**
+ * Adds the specified `BuildingFilter` to a set of layers and sets it as the
+ * active filter. It also ensures that there is a single building explorer filter
+ * in each layer.
+ *
+ * If the new filter is equivalent (equal except for its `id`) to a filter
+ * already present in a layer, the `filters` collection is not modified and we
+ * simply activate the existing filter.
+ *
+ * @param layers
+ *    The layers whose filters are to be updated.
+ * @param filter
+ *    The filter which is to be set on the layers.
+ *
+ * @return True if the filter was applied and false otherwise.
+ */
+export declare function setFilterOnLayers(layers: BuildingSceneLayer[], filter: BuildingFilter | nullish): void;
+/**
+ * Gets a new X-ray filter block based on the specified filter expressions.
+ *
+ * @param expressions
+ *    The filter expressions which are to be combined to form a `filterExpression`
+ *    for the new `BuildingFilterBlock`.
+ */
+export declare function getFilterBlockXRay(expressions: (nullish | string)[]): BuildingFilterBlock | nullish;
+/**
+ * Gets a new solid filter block based on the specified filter expressions.
+ *
+ * @param expressions
+ *    The filter expressions which are to be combined to form a `filterExpression`
+ *    for the new `BuildingFilterBlock`.
+ */
+export declare function getFilterBlockSolid(expressions: (nullish | string)[]): BuildingFilterBlock | nullish;
+export {};

package/dist/components/arcgis-building-explorer/support/layer-utils.d.ts

@@ -0,0 +1,8 @@
+import { default as Collection } from '@arcgis/core/core/Collection';
+import { default as BuildingSceneLayer } from '@arcgis/core/layers/BuildingSceneLayer';
+/**
+ * Creates a new function which can be used to wait for a collection of layers to be loaded.
+ * If it's called multiple times, previous loads will be discarded and it'll wait for the latest
+ * collection to be loaded.
+ */
+export declare function createLoadLayersFunction(): (layers: Collection<BuildingSceneLayer>) => Promise<void>;

package/dist/components/arcgis-building-explorer/support/types.d.ts

@@ -0,0 +1,25 @@
+export interface NumberValidationConfig {
+    allowedValues: readonly number[];
+}
+/**
+ * A map between values and their corresponding textual representations/names.
+ */
+export type FieldValueMap = Map<number, string>;
+export interface FieldInfo {
+    /**
+     * The name of the field.
+     */
+    fieldName: string;
+    /**
+     * A map between values and their corresponding textual representations/names.
+     */
+    fieldValueMap: FieldValueMap;
+}
+/**
+ * Information about the domain of a filter, which can serve as the source of
+ * truth for a `BuildingNumericFilterViewModel`.
+ */
+export interface DomainInfo {
+    fieldValueMap: FieldValueMap;
+    allowedValues: number[];
+}

package/dist/components/arcgis-building-explorer/support/validation.d.ts

@@ -0,0 +1,36 @@
+import { FieldInfo, DomainInfo, NumberValidationConfig } from './types.js';
+/**
+ * Combines all the provided information about fields into a single object which
+ * we can use to perform validations or determine the textual representation of
+ * a value.
+ *
+ * @param fieldInfos
+ *    List of objects containing information about a field.
+ */
+export declare function getDomainInfo(fieldInfos: FieldInfo[]): DomainInfo;
+/**
+ * Gets a number which is valid according to the specified `config`.
+ *
+ * If the value is valid, it will return the same value.
+ * If no allowed values are provided we return null.
+ *
+ * @param value
+ *    The value which is to be validated.
+ * @param config
+ *    The configuration used to validate the value.
+ *
+ * @return A value which is valid according to the `config`.
+ */
+export declare function getValidNumber(value: number, config: NumberValidationConfig): nullish | number;
+/**
+ * Returns the value of `domain` closest to the specified value.
+ * When the domain is empty, the same value is returned.
+ *
+ * @param value
+ *    The value whose closest value is to be returned.
+ * @param domain
+ *    List of all the values to be searched.
+ *
+ * @return Value closest to`value` in the `domain`.
+ */
+export declare function findClosest(value: number, domain: readonly number[]): number;

package/dist/components/arcgis-building-level-item/customElement.d.ts

@@ -0,0 +1,33 @@
+/// <reference path="../../index.d.ts" />
+import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
+import { Messages as BuildingExplorerMessages } from '../arcgis-building-explorer/customElement.js';
+
+type Messages = BuildingExplorerMessages["level"];
+/** [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-building-level-item/) */
+export declare class BuildingLevelItem extends LitElement {
+    messages?: Messages;
+    /** @default 0 */
+    baseWidth: number;
+    level: number;
+    /** The width of the component. */
+    width?: number;
+    /** @default false */
+    hovered: boolean;
+    /** @default false */
+    active: boolean;
+    /**
+     * The height of the component.
+     *
+     * @default 0
+     */
+    height: number;
+    readonly arcgisTileBlur: TargetedEvent<this, void>;
+    readonly arcgisTileFocus: TargetedEvent<this, void>;
+    readonly arcgisTileSelect: TargetedEvent<this, void>;
+    "@eventTypes": {
+        "arcgisTileBlur": BuildingLevelItem["arcgisTileBlur"]["detail"];
+        "arcgisTileFocus": BuildingLevelItem["arcgisTileFocus"]["detail"];
+        "arcgisTileSelect": BuildingLevelItem["arcgisTileSelect"]["detail"];
+    };
+}
+export {};

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

@@ -0,0 +1,45 @@
+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.120 */
+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 {
+  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();
+  }
+  static {
+    this.properties = { messages: 0, baseWidth: 9, level: 9, width: 9, hovered: 5, active: 5, height: 9 };
+  }
+  static {
+    this.styles = d;
+  }
+  #t;
+  focus() {
+    this.#t.value?.focus();
+  }
+  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({
+      width: `${Math.round(t)}px`,
+      height: `${Math.round(t)}px`
+    })}><button class=${c({
+      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>`;
+  }
+}
+r("arcgis-building-level-item", m);
+export {
+  m as BuildingLevelItem
+};

package/dist/components/arcgis-building-level-picker/constants.d.ts

@@ -0,0 +1,48 @@
+/**
+ * The maximum extra size the level container's height can have when hovered (in pixels).
+ */
+export declare const levelHoveredExtraHeight = 30;
+/**
+ * The maximum extra size the level container's height can have when hovered (in pixels).
+ */
+export declare const levelHoveredExtraWidth = 20;
+/**
+ * Controls the dependency of the alpha factor of the gaussian to the number of levels.
+ */
+export declare const alphaLevelDependencyFactor = 30;
+/**
+ * This controls the global size of the alpha factor, hence the spread of the gaussian
+ */
+export declare const alphaSpreadFactor = 10;
+/**
+ * Padding applied above/below the levels so they have space to expand when hovering.
+ */
+export declare const levelsPadding = 20;
+/**
+ * Value which will be multiplied by the padding to determine how much we allow
+ * levels to overflow the container when expanded. Essentially we'll apply a
+ * padding of levelsPadding * levelsMarginFactor and then compensate with an
+ * equivalent negative margin.
+ */
+export declare const levelsMarginFactor = 2;
+/**
+ * Value which gets added to the normalized pointer position in order to better
+ * align the pointer with the currently selected floor (due to CSS, etc). If you
+ * mess with this, make sure to test it with different numbers of levels, from 1
+ * to 200 or so.
+ */
+export declare const levelsPointerAdjustment = 0.035;
+/**
+ * Minimum width for a level.
+ */
+export declare const levelWidthMin = 30;
+/**
+ * Default/base height for a level.
+ */
+export declare const levelHeightDefault = 14;
+/**
+ * Maximum width for a level.
+ */
+export declare const levelWidthMax = 80;
+export declare const levelWidthNominator = 100;
+export declare const levelWidthConstant = 40;

package/dist/components/arcgis-building-level-picker/customElement.d.ts

@@ -0,0 +1,20 @@
+/// <reference path="../../index.d.ts" />
+import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
+import { Messages as BuildingExplorerMessages } from '../arcgis-building-explorer/customElement.js';
+import { default as BuildingLevel } from '../arcgis-building-explorer/building-filter/BuildingLevel';
+
+type Messages = BuildingExplorerMessages["level"];
+/** @private */
+export declare class BuildingLevelPicker extends LitElement {
+    messages?: Messages;
+    level?: BuildingLevel;
+    /** The number of levels to be displayed in the component. */
+    get numberOfLevels(): number;
+    get levelHeight(): number;
+    get levelsHeight(): number;
+    readonly arcgisBuildingLevelChange: TargetedEvent<this, void>;
+    "@eventTypes": {
+        "arcgisBuildingLevelChange": BuildingLevelPicker["arcgisBuildingLevelChange"]["detail"];
+    };
+}
+export {};

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

@@ -0,0 +1,188 @@
+import { c as p } from "../../chunks/runtime.js";
+import { repeat as b } from "lit/directives/repeat.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 { a as w, b as H, c as y, d as M, l 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 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.120 */
+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, s = t.length - 1, r; s >= 0; s--)
+    (r = t[s]) && (l = r(e, i, l) || l);
+  return l && T(e, i, l), 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 s = this.levelsHeight, r = i + n + l;
+        const g = this.levelHeight / 2;
+        r += g, s -= g;
+        let u = (e.clientY - r) / s;
+        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 = A(), this.onPointerLeave = () => {
+      if (this.hovering) {
+        window.getSelection()?.removeAllRanges();
+        for (const e of this.levelItems)
+          e.width = void 0;
+        this.normalizedPointerPosition = 0, this.hoveredLevel = null, this.hovering = !1;
+      }
+    }, this.onPointerUp = () => {
+      window.getSelection()?.removeAllRanges();
+      const e = this.level;
+      this.hoveredLevel == null || e == null || this.#s();
+    }, 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 };
+  }
+  static {
+    this.styles = S;
+  }
+  get levels() {
+    return this.level?.allowedValues ?? [];
+  }
+  get levelWidth() {
+    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) * M;
+  }
+  get expandedLevelsMargin() {
+    return Math.round(((this.expandedLevelsHeight ?? 0) - this.levelsHeight) / 2);
+  }
+  get levelClosestToPointer() {
+    if (!this.hovering)
+      return null;
+    const e = this.numberOfLevels - 1, i = this.clampedNormalizedPointerPosition;
+    return e >= 0 && i != null ? this.levels[Math.round((1 - i) * e)] : null;
+  }
+  get clampedNormalizedPointerPosition() {
+    return c(this.normalizedPointerPosition, 0, 1);
+  }
+  get numberOfLevels() {
+    return this.levels.length;
+  }
+  get levelHeight() {
+    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.#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: s, height: r } = this.getLevelWidgetSize(l);
+      n.height = r, n.width = s, e += r;
+    }), this.hoveredLevel = this.levelClosestToPointer;
+    const i = this.expandedLevelsHeight;
+    (i == null || Math.abs(i - e) > 30) && (this.expandedLevelsHeight = e);
+  }
+  getLevelWidgetSize(e) {
+    const i = { width: this.levelWidth, height: this.levelHeight };
+    if (this.hovering) {
+      const n = this.getGaussianFactor(e, this.clampedNormalizedPointerPosition);
+      i.width += k * n, i.height += z * n;
+    }
+    return i;
+  }
+  getGaussianFactor(e, i) {
+    const n = this.numberOfLevels - 1, l = (n - e) / n, s = this._gaussianFactor * (l - i);
+    return Math.exp(-(s ** 2));
+  }
+  #n(e) {
+    switch (e.key) {
+      case "ArrowDown":
+      case "ArrowLeft":
+        e.preventDefault(), e.stopPropagation(), this.#i(), this.#e();
+        break;
+      case "ArrowUp":
+      case "ArrowRight":
+        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.disabled = !1, this.level.next(), this.arcgisBuildingLevelChange.emit());
+  }
+  #i() {
+    this.level && (this.level.disabled = !1, this.level.previous(), this.arcgisBuildingLevelChange.emit());
+  }
+  #s() {
+    this.level == null || this.hoveredLevel == null || (this.level.value === this.hoveredLevel ? this.#l() : (this.level.disabled = !1, 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;
+    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, 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([
+  O("arcgis-building-level-item")
+], f.prototype, "levelItems");
+function D(t) {
+  return o`<div class=${a({
+    "label-container": !0,
+    empty: !t.active,
+    active: !0,
+    hover: !0
+  })} title=${t.messages.selectLevel ?? h} tabindex=0><calcite-action icon=chevron-up appearance=transparent .text=${t.messages.nextLevel} @click=${t.onNext} .disabled=${!t.hasNext}></calcite-action>${t.children}<calcite-action icon=chevron-down appearance=transparent .text=${t.messages.previousLevel} @click=${t.onPrevious} .disabled=${!t.hasPrevious}></calcite-action></div>`;
+}
+function R(t) {
+  const e = t.messages;
+  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 ? 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 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`
+  })} ${B(t.ref)}><div class="tiles-inner-container" style=${m({
+    height: `${n}px`,
+    margin: "0",
+    marginBlockStart: `${v - t.expandedLevelsMargin}px`
+  })}>${t.children}</div></div>`;
+}
+p("arcgis-building-level-picker", f);
+export {
+  f as BuildingLevelPicker
+};

package/dist/components/arcgis-building-level-picker/index.d.ts

@@ -0,0 +1,4 @@
+import "../arcgis-building-level-item/index.js";
+import "@esri/calcite-components/components/calcite-action";
+import "@esri/calcite-components/components/calcite-fab";
+export * from "./customElement.js";

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

@@ -0,0 +1,4 @@
+import "../arcgis-building-level-item/index.js";
+import "@esri/calcite-components/components/calcite-action";
+import "@esri/calcite-components/components/calcite-fab";
+export * from "./customElement.js";

package/dist/components/arcgis-building-phase-picker/customElement.d.ts

@@ -0,0 +1,19 @@
+/// <reference path="../../index.d.ts" />
+import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
+import { Messages as BuildingExplorerMessages } from '../arcgis-building-explorer/customElement.js';
+import { default as BuildingPhase } from '../arcgis-building-explorer/building-filter/BuildingPhase';
+
+type Messages = BuildingExplorerMessages["phase"];
+/** @private */
+export declare class BuildingPhasePicker extends LitElement {
+    messages?: Messages;
+    phase?: BuildingPhase;
+    /** The number of levels to be displayed in the component. */
+    get numberOfPhases(): number;
+    get phaseHeight(): number;
+    readonly arcgisBuildingPhaseChange: TargetedEvent<this, void>;
+    "@eventTypes": {
+        "arcgisBuildingPhaseChange": BuildingPhasePicker["arcgisBuildingPhaseChange"]["detail"];
+    };
+}
+export {};

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

@@ -0,0 +1,92 @@
+import { c as l } from "../../chunks/runtime.js";
+import { css as h, html as r } from "lit";
+import { keyed as n } from "lit/directives/keyed.js";
+import { LitElement as d, createEvent as u, safeClassMap as s, nothing as p } from "@arcgis/lumina";
+import { l as v } from "../../chunks/constants.js";
+import { clamp as g } from "@arcgis/toolkit/number";
+import { useDirection as m } from "@arcgis/lumina/controllers";
+import { when as f, watch as b } 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.120 */
+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;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 x extends d {
+  constructor() {
+    super(...arguments), this.#i = m(), 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 = w;
+  }
+  get phases() {
+    return this.phase?.allowedValues ?? [];
+  }
+  #i;
+  #e;
+  #t;
+  #a() {
+    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));
+  }
+  #r() {
+    this.phase && (this.phase.disabled = !1, this.phase.next(), this.arcgisBuildingPhaseChange.emit());
+  }
+  #s() {
+    this.phase && (this.phase.disabled = !1, 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 = v, a = e * 2 / Math.sqrt(this.numberOfPhases);
+    return Math.round(g(a, 2, e));
+  }
+  loaded() {
+    this.listen("keydown", (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+        case "ArrowLeft":
+          e.stopPropagation(), e.preventDefault(), this.#s(), this.#t = !0;
+          break;
+        case "ArrowUp":
+        case "ArrowRight":
+          e.stopPropagation(), e.preventDefault(), this.#r(), this.#t = !0;
+          break;
+      }
+    }), this.manager.onLifecycle(() => [
+      f(() => this.phase?.state === "ready", () => {
+        requestAnimationFrame(() => {
+          this.#e = !0, this.#a();
+        });
+      }, { initial: !0 }),
+      b(() => this.phase?.value, () => {
+        this.#e = !0, this.#a();
+      })
+    ]);
+  }
+  render() {
+    const e = this.phase, a = this.messages;
+    return !a || e == null ? null : r`<div class="phase-picker">${c({ className: "arrow-left", disabled: !1, icon: this.#i === "rtl" ? "chevron-right" : "chevron-left", onClick: () => this.#s(), text: a.previousPhase })}<div class="phases-container">${this.phases.map((i, o) => r`${o > 0 && r`<span class=${s({
+      divider: !0,
+      active: e.value >= i
+    })}></span>` || ""}${n(i, r`<button class=${s({
+      "phase-button": !0,
+      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.#r(), text: a.nextPhase })}</div>`;
+  }
+}
+function c(t) {
+  return n(t.className, r`<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", x);
+export {
+  x as BuildingPhasePicker
+};