@arcgis/map-components/dist/components/arcgis-building-phase-picker/customElement.js

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/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, 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 = w;
  }
  get phases() {
    return this.phase?.allowedValues ?? [];
  }
  #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 = 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.#s(), this.#t = !0;
          break;
        case "ArrowUp":
        case "ArrowRight":
          e.stopPropagation(), e.preventDefault(), this.#a(), this.#t = !0;
          break;
      }
    }), this.manager.onLifecycle(() => [
      f(() => this.phase?.state === "ready", () => {
        requestAnimationFrame(() => {
          this.#e = !0, this.#r();
        });
      }, { initial: !0 }),
      b(() => this.phase?.value, () => {
        this.#e = !0, this.#r();
      })
    ]);
  }
  render() {
    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 >= i
    })}></span>` || ""}${o(i, a`<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.#a(), text: r.nextPhase })}</div>`;
  }
}
function c(t) {
  return o(t.className, a`<calcite-action 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
};