import { c as f } from "../../chunks/runtime.js";
import w from "@arcgis/core/Color.js";
import { LitElement as x, nothing as u, safeClassMap as C } from "@arcgis/lumina";
import { css as v, svg as p, html as b } from "lit";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/5.0/esri/copyright.txt for details.
v5.0.0-next.123 */
const S = v`:host{display:block;block-size:30px;inline-size:100%}:host([layout="vertical"]){writing-mode:vertical-lr}.hidden{display:none!important}svg{stroke-width:var(--calcite-border-width-sm);stroke:var(--calcite-color-border-input);margin:0;display:block;block-size:100%;inline-size:100%;padding:0}svg .background{fill:#e0e0e0}`;
class I {
  constructor(t, i, n, e) {
    this.color = t, this.ratio = i, this.opacity = n, this.sizeRatio = e;
  }
}
const M = new w([0, 0, 0, 0.5]);
class D extends x {
  constructor() {
    super(...arguments), this._minSizeRatio = 0.2, this._rampStops = [], this._containerDimensions = [0, 0], this.layout = "horizontal", this.min = 0, this.max = 1, this.stops = [];
  }
  static {
    this.properties = { _containerDimensions: 16, layout: 3, min: 9, max: 9, stops: 0 };
  }
  static {
    this.styles = S;
  }
  willUpdate(t) {
    if (super.willUpdate(t), t.has("min") || t.has("max") || t.has("stops")) {
      const { stops: i, min: n, max: e } = this, a = e - n, s = i.map((l) => l.size ?? 0), r = Math.min(...s), c = Math.max(...s) - r, o = i.map((l) => {
        const { color: h, value: g, size: y } = l, $ = h instanceof w ? h : w.fromString(h) ?? M, z = (g - n) / a;
        return new I($.toCss(), z, $.a, y ? (y - r) / c : void 0);
      });
      if (o[0].ratio !== 0) {
        const { color: l, opacity: h, sizeRatio: g } = o[0];
        o.unshift(new I(l, 0, h, g));
      }
      if (o[o.length - 1].ratio !== 0) {
        const { color: l, opacity: h, sizeRatio: g } = o[o.length - 1];
        o.push(new I(l, 1, h, g));
      }
      this._rampStops = o;
    }
  }
  loaded() {
    const t = new ResizeObserver((e) => {
      for (const a of e) {
        const { width: s, height: r } = a.contentRect;
        this._containerDimensions = [s, r];
      }
    }), { width: i, height: n } = this.el.getBoundingClientRect();
    this._containerDimensions = [i, n], t.observe(this.el);
  }
  render() {
    const t = this._rampStops, [i, n] = this._containerDimensions, e = this.layout === "horizontal", a = "rampFillId", s = "rampBackgroundFillId", r = R(t), m = [];
    if (i > 0 && n > 0)
      if (r) {
        const c = k(this.layout, i, n, t, this._minSizeRatio);
        m.push(p`<path fill=${`url(#${s})`} d=${c ?? u} />`, p`<path fill=${`url(#${a})`} d=${c ?? u} />`);
      } else
        m.push(p`<rect fill=${`url(#${s})`} height=100% width=100% x=0 y=0 />`, p`<rect fill=${`url(#${a})`} height=100% width=100% x=0 y=0 />`);
    return b`<svg xmlns=http://www.w3.org/2000/svg>${p`<defs><linearGradient id=${a} x1=0 x2=${e ? 1 : 0} y1=${e ? 0 : 1} y2=0>${t.map(({ ratio: c, color: o, opacity: l }) => p`<stop offset=${`${(c * 100).toFixed(2)}%`} stop-color=${o ?? u} stop-opacity=${l ?? u} />`)}</linearGradient><pattern height=15 id=${s} patternUnits=userSpaceOnUse width=15 x=0 y=0><image height=15 href=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxNiIgd2lkdGg9IjE2Ij48cGF0aCBkPSJNMCAwIEw4IDAgTDggOCBMMCA4IFoiIGZpbGw9IiNjY2MiIC8+PHBhdGggZD0iTTAgMCBMOCAwIEw4IDggTDAgOCBaIiBmaWxsPSIjZmZmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDgpIiAvPjxwYXRoIGQ9Ik0wIDAgTDggMCBMOCA4IEwwIDggWiIgZmlsbD0iI2NjYyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOCw4KSIgLz48cGF0aCBkPSJNMCAwIEw4IDAgTDggOCBMMCA4IFoiIGZpbGw9IiNmZmYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDgsMCkiIC8+PC9zdmc+ width=15 x=0 y=0 /></pattern></defs><rect class=${C({ background: !0 })} height=100% width=100% x=0 y=0 />${m}`}</svg>`;
  }
}
function R(d) {
  return d.every((t) => t.sizeRatio !== void 0);
}
function k(d, t, i, n, e) {
  const a = (s) => (1 - e) * s + e;
  if (d === "horizontal") {
    const s = n.map(({ ratio: r, sizeRatio: m }) => {
      const c = r * t, o = i - a(m) * i;
      return `L ${c} ${o}`;
    });
    return `M 0 ${i} ${s.join(" ")} L ${t} ${i} Z`;
  } else {
    const s = n.map(({ ratio: r, sizeRatio: m }) => {
      const c = i - r * i;
      return `L ${a(m) * t} ${c}`;
    });
    return `M 0 ${i} ${s.join(" ")} L 0 0 Z`;
  }
}
f("arcgis-ramp-color", D);
export {
  D as ArcgisRampColor
};
