@arcgis/map-components/dist/components/arcgis-legend-card-univariate-above-and-below-ramp/customElement.js

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as E } from "../../chunks/runtime.js";
import { css as A, html as t } from "lit";
import { LitElement as L, safeStyleMap as a } from "@arcgis/lumina";
import { useDirection as S } from "@arcgis/lumina/controllers";
import { g as k, a as C, b as v, c as f, d as U } from "../../chunks/univariateUtils.js";
const F = A`.layer-row{display:flex;align-items:center}.symbol{display:block;margin:auto}.symbol-container{position:relative}.ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.layer-cell{padding:var(--calcite-spacing-xxs) 0;min-width:100px;vertical-align:middle;word-break:break-word}.layer-cell-info{padding-right:var(--calcite-spacing-sm);padding-left:var(--calcite-spacing-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.univariate-color-ramp-card{position:relative}.univariate-color-ramp-card:before{content:"";border-left:var(--calcite-border-width-sm) solid var(--calcite-color-background);border-right:var(--calcite-border-width-sm) solid var(--calcite-color-background);width:100%;height:15px;display:block;position:absolute;top:var(--calcite-border-width-sm)}.univariate-above-below-symbol{display:flex;align-items:center;justify-content:center}`;
class B extends L {
  constructor() {
    super(...arguments), this._direction = S(), this.legendElement = null, this.opacity = 1;
  }
  static {
    this.properties = { cssEffectFilter: 1, legendElement: 0, opacity: 9, messages: 0 };
  }
  static {
    this.styles = F;
  }
  render() {
    const { legendElement: b, opacity: l } = this, { sizeRampElement: e, colorRampElement: r } = k(b, this.messages, l, "horizontal");
    if (!e)
      return null;
    const g = C(e, "full", !0, "horizontal"), h = v(e, "above", !0, "horizontal"), y = v(e, "below", !0, "horizontal"), s = 12, n = this.messages?.previewColorRampAriaLabel, c = f(r, {
      width: h,
      height: s,
      rampAlignment: "horizontal",
      opacity: l,
      type: "above",
      cssEffectFilter: this.cssEffectFilter,
      ariaLabel: n
    }), w = f(r, {
      width: y,
      height: s,
      rampAlignment: "horizontal",
      opacity: l,
      type: "below",
      cssEffectFilter: this.cssEffectFilter,
      ariaLabel: n
    }), d = U(e, "card"), m = e.infos.map((i) => i.label), u = m.length - 1, x = m.map((i, p) => p === 0 || p === u ? t`<div>${i}</div>` : null), R = { display: "flex", flexDirection: "column" }, z = { display: "flex", flexDirection: "row" }, o = {
      marginTop: "3px",
      display: "flex"
    };
    this._direction === "rtl" ? o.marginRight = `${d}px` : o.marginLeft = `${d}px`;
    const $ = {
      width: `${g}px`,
      display: "flex",
      flexDirection: "row",
      justifyContent: "space-between"
    };
    return t`<div class="layer-row" style=${a(R)}><div class="symbol-container" style=${a(z)}>${e.infos.map((i) => t`<div class="symbol">${i.preview}</div>`)}</div>${c ? t`<div class="univariate-color-ramp-card" style=${a(o)}><div>${c}</div><div>${w}</div></div>` : null}<div class="layer-cell layer-cell-info"><div class="ramp-labels" style=${a($)}>${x}</div></div></div>`;
  }
}
E("arcgis-legend-card-univariate-above-and-below-ramp", B);
export {
  B as LegendCardUnivariateAboveAndBelowRamp
};