import { c as f } from "../../chunks/runtime.js";
import { css as v, html as n } from "lit";
import { LitElement as $, safeClassMap as l, safeStyleMap as b } from "@arcgis/lumina";
import { classes as L } from "@arcgis/toolkit/dom";
import { c as u } from "../../chunks/svgUtils.js";
import { c as R } from "../../chunks/utils2.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 w = v`:host{display:flex}.arcgis-legend--card__layer-row{display:flex;flex:1}.arcgis-legend--card__color-ramp-container{justify-content:center}.arcgis-legend--card__symbol-container{display:flex;flex-direction:column}.arcgis-legend--card__interval-separators-container{text-align:center}.arcgis-legend--card__interval-separator{font-size:.5em}.arcgis-legend--card__ramp-label{margin:0 .5em;white-space:nowrap;height:25px;line-height:var(--calcite-font-line-height-fixed-xl)}`, t = {
  layerRow: "arcgis-legend--card__layer-row",
  colorRampContainer: "arcgis-legend--card__color-ramp-container",
  symbolContainer: "arcgis-legend--card__symbol-container",
  intervalSeparatorsContainer: "arcgis-legend--card__interval-separators-container",
  intervalSeparator: "arcgis-legend--card__interval-separator",
  rampLabel: "arcgis-legend--card__ramp-label"
}, x = 25, S = 25, C = 100;
class E extends $ {
  constructor() {
    super(...arguments), this.legendElement = null, this.opacity = 1;
  }
  static {
    this.properties = { cssEffectFilter: 1, legendElement: 0, opacity: 9, messages: 0 };
  }
  static {
    this.styles = w;
  }
  render() {
    const e = this.legendElement.infos.slice().reverse();
    return n`<div class=${l(L(t.layerRow, t.colorRampContainer))}>${this._renderRampLabel(e[0])}<div class=${l(t.symbolContainer)}>${this._renderPreview(e)}${this._renderMiddleStopRampLabel(e)}</div>${this._renderRampLabel(e.at(-1))}</div>`;
  }
  _renderPreview(e) {
    const { opacity: i } = this, d = this.legendElement.type === "heatmap-ramp", o = e.length - 1, a = S, s = o > 2 && !d ? x * o : C, p = s + 20, r = 10, m = [
      [
        {
          shape: {
            type: "path",
            path: `M0 ${a / 2} L${r} 0 L${r} ${a} Z`
          },
          fill: e[0].color,
          stroke: { width: 0 }
        },
        {
          shape: {
            type: "rect",
            x: r,
            y: 0,
            width: s,
            height: a
          },
          fill: {
            type: "linear",
            x1: r,
            y1: 0,
            x2: s + r,
            y2: 0,
            colors: e.map((c, _) => ({
              color: c.color,
              // Adjust the stop offsets so that we have stops at fixed/equal interval.
              offset: d && "ratio" in c ? c.ratio : _ / o
            }))
          },
          stroke: { width: 0 }
        },
        {
          shape: {
            type: "path",
            path: `M${s + r} 0 L${p} ${a / 2} L${s + r} ${a} Z`
          },
          fill: e[e.length - 1].color,
          stroke: { width: 0 }
        }
      ]
    ], g = this.legendElement.type === "opacity-ramp" ? this.messages.previewOpacityRampAriaLabel : this.messages.previewColorRampAriaLabel, h = u(m, p, a, { ariaLabel: g }), y = {
      filter: this.cssEffectFilter,
      opacity: i == null ? void 0 : `${i}`
    };
    return n`<div style=${b(y)}>${h}</div>`;
  }
  _renderMiddleStopRampLabel(e) {
    const i = e.length % 2 !== 0 ? e[e.length / 2 | 0] : null;
    return i ? n`<div class=${l(t.intervalSeparatorsContainer)}><div class=${l(t.intervalSeparator)}>|</div>${this._renderRampLabel(i)}</div>` : null;
  }
  _renderRampLabel(e) {
    return n`<div class=${l(t.rampLabel)}>${R(e, this.legendElement.type, this.messages)}</div>`;
  }
}
f("arcgis-legend-card-color-ramp", E);
export {
  E as ArcgisLegendCardColorRamp
};
