import { c as C } from "../../chunks/runtime.js";
import { css as E, html as r } from "lit";
import { LitElement as L, safeClassMap as a, safeStyleMap as t } from "@arcgis/lumina";
import { useDirection as S } from "@arcgis/lumina/controllers";
import { f as k, h as B, b, c as f, a as U } from "../../chunks/univariateUtils.js";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.34/esri/copyright.txt for details.
v4.34.7 */
const F = E`.arcgis-legend--card__layer-row{display:flex;align-items:center}.arcgis-legend--card__symbol{display:block;margin:auto}.arcgis-legend--card__symbol-container{position:relative}.arcgis-legend__ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.arcgis-legend__layer-cell{padding:var(--calcite-spacing-xxs) 0;min-width:100px;vertical-align:middle;word-break:break-word}.arcgis-legend__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)}.arcgis-univariate-above-and-below-ramp__color--card{position:relative}.arcgis-univariate-above-and-below-ramp__color--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)}.arcgis-univariate-above-and-below-ramp__symbol{display:flex;align-items:center;justify-content:center}`, i = {
  layerRow: "arcgis-legend--card__layer-row",
  symbol: "arcgis-legend--card__symbol",
  symbolContainer: "arcgis-legend--card__symbol-container",
  rampLabelsContainer: "arcgis-legend__ramp-labels",
  layerInfo: "arcgis-legend__layer-cell arcgis-legend__layer-cell--info",
  univariateAboveAndBelowColorRamp: "arcgis-univariate-above-and-below-ramp__color--card"
};
class D 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: y, opacity: o } = this, { sizeRampElement: e, colorRampElement: n } = k(y, this.messages, o, "horizontal");
    if (!e)
      return null;
    const w = B(e, "full", !0, "horizontal"), h = b(e, "above", !0, "horizontal"), _ = b(e, "below", !0, "horizontal"), c = 12, d = this.messages?.previewColorRampAriaLabel, m = f(n, {
      width: h,
      height: c,
      rampAlignment: "horizontal",
      opacity: o,
      type: "above",
      cssEffectFilter: this.cssEffectFilter,
      ariaLabel: d
    }), u = f(n, {
      width: _,
      height: c,
      rampAlignment: "horizontal",
      opacity: o,
      type: "below",
      cssEffectFilter: this.cssEffectFilter,
      ariaLabel: d
    }), p = U(e, "card"), g = e.infos.map((l) => l.label), R = g.length - 1, x = g.map((l, v) => v === 0 || v === R ? r`<div>${l}</div>` : null), $ = { display: "flex", flexDirection: "column" }, z = { display: "flex", flexDirection: "row" }, s = {
      marginTop: "3px",
      display: "flex"
    };
    this._direction === "rtl" ? s.marginRight = `${p}px` : s.marginLeft = `${p}px`;
    const A = {
      width: `${w}px`,
      display: "flex",
      flexDirection: "row",
      justifyContent: "space-between"
    };
    return r`<div class=${a(i.layerRow)} style=${t($)}><div class=${a(i.symbolContainer)} style=${t(z)}>${e.infos.map((l) => r`<div class=${a(i.symbol)}>${l.preview}</div>`)}</div>${m ? r`<div class=${a(i.univariateAboveAndBelowColorRamp)} style=${t(s)}><div>${m}</div><div>${u}</div></div>` : null}<div class=${a(i.layerInfo)}><div class=${a(i.rampLabelsContainer)} style=${t(A)}>${x}</div></div></div>`;
  }
}
C("arcgis-legend-card-univariate-above-and-below-ramp", D);
export {
  D as LegendCardUnivariateAboveAndBelowRamp
};
