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