@arcgis/map-components/dist/components/arcgis-building-level-item/customElement.js

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as r } from "../../chunks/runtime.js";
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 = 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 = h;
  }
  #t;
  focus() {
    this.#t.value?.focus();
  }
  render() {
    if (this.messages == null)
      return null;
    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=${n({
      rect: !0,
      active: this.active,
      hover: this.hovered
    })} 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", d);
export {
  d as BuildingLevelItem
};