@arcgis/map-components/dist/components/arcgis-legend-card-univariate-color-size-ramp/customElement.js

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as b } from "../../chunks/runtime.js";
import { css as w, html as l } from "lit";
import { LitElement as u, safeStyleMap as i } from "@arcgis/lumina";
import { useDirection as x } from "@arcgis/lumina/controllers";
import { e as R, a as z, b as $, c as E, d as S } from "../../chunks/univariateUtils.js";
const C = w`.layer-row,.symbol{display:flex;align-items:center}.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 k extends u {
  constructor() {
    super(...arguments), this._direction = x(), this.legendElement = null, this.opacity = 1;
  }
  static {
    this.properties = { cssEffectFilter: 1, legendElement: 0, opacity: 9, messages: 0 };
  }
  static {
    this.styles = C;
  }
  render() {
    const { legendElement: s, opacity: n } = this, { sizeRampElement: e, colorRampElement: c } = R(s, this.messages, "horizontal");
    if (!e)
      return null;
    const m = z(e, "full", !1, "horizontal"), d = $(e, "full", !1, "horizontal"), p = E(c, {
      width: d,
      height: 12,
      rampAlignment: "horizontal",
      opacity: n,
      type: "full",
      cssEffectFilter: this.cssEffectFilter,
      ariaLabel: this.messages?.previewColorRampAriaLabel
    }), r = S(e, "card"), f = e.infos.length - 1, v = e.infos.map((a, o) => o === 0 || o === f ? l`<div>${a.label}</div>` : null), g = {
      display: "flex",
      flexDirection: "column"
    }, y = {
      display: "flex",
      flexDirection: "row"
    }, t = {
      marginTop: "3px",
      display: "flex"
    };
    this._direction === "rtl" ? t.marginRight = `${r}px` : t.marginLeft = `${r}px`;
    const h = {
      width: `${m}px`,
      display: "flex",
      flexDirection: "row",
      justifyContent: "space-between"
    };
    return l`<div class="layer-row" style=${i(g)}><div class="symbol-container" style=${i(y)}>${e.infos.map((a) => l`<div class="symbol">${a.preview}</div>`)}</div><div class="univariate-color-ramp-card" style=${i(t)}><div>${p}</div></div><div class="layer-cell layer-cell-info"><div class="ramp-labels" style=${i(h)}>${v}</div></div></div>`;
  }
}
b("arcgis-legend-card-univariate-color-size-ramp", k);
export {
  k as LegendCardUnivariateColorSizeRamp
};