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