import { c as F } from "../../chunks/runtime.js";
import { css as P, html as f, svg as X } from "lit";
import { getBoundingBox as j, computeBBox as I, getTransformMatrix as z } from "@arcgis/core/applications/Components/svgUtils.js";
import { LitElement as U, safeClassMap as t, safeStyleMap as _, nothing as s } from "@arcgis/lumina";
import { useDirection as N } from "@arcgis/lumina/controllers";
import { classes as u } from "@arcgis/toolkit/dom";
import { g as G, r as J, a as K, b as O } from "../../chunks/svgUtils.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 Q = P`.arcgis-relationship-ramp--diamond__container{display:flex;font-size:var(--calcite-font-size-sm)}.arcgis-relationship-ramp--diamond__left-column{align-self:center;padding-right:5px;max-width:85px;text-align:right}.arcgis-relationship-ramp--diamond__right-column{align-self:center;padding-left:5px;max-width:85px;text-align:left}.arcgis-relationship-ramp--diamond__middle-column{display:flex;flex-direction:column;text-align:center}.arcgis-relationship-ramp--diamond__middle-column--label{align-self:center;max-width:85px}.arcgis-relationship-ramp--diamond__middle-column--ramp{width:85px;height:85px}.arcgis-relationship-ramp--square__table{display:table;font-size:var(--calcite-font-size-sm)}.arcgis-relationship-ramp--square__table-row{display:table-row}.arcgis-relationship-ramp--square__table-cell{display:table-cell}.arcgis-relationship-ramp--square__table-label{max-width:95px}.arcgis-relationship-ramp--square__table-label--left-bottom{vertical-align:bottom;text-align:left}.arcgis-relationship-ramp--square__table-label--right-bottom{vertical-align:bottom;text-align:right}.arcgis-relationship-ramp--square__table-label--left-top{vertical-align:top;text-align:left}.arcgis-relationship-ramp--square__table-label--right-top{vertical-align:top;text-align:right}`, V = "http://www.w3.org/2000/svg", e = {
  // relationship diamond
  diamondContainer: "arcgis-relationship-ramp--diamond__container",
  diamondLeftCol: "arcgis-relationship-ramp--diamond__left-column",
  diamondRightCol: "arcgis-relationship-ramp--diamond__right-column",
  diamondMidCol: "arcgis-relationship-ramp--diamond__middle-column",
  diamondMidColLabel: "arcgis-relationship-ramp--diamond__middle-column--label",
  diamondMidColRamp: "arcgis-relationship-ramp--diamond__middle-column--ramp",
  // relationship square
  squareTable: "arcgis-relationship-ramp--square__table",
  squareTableRow: "arcgis-relationship-ramp--square__table-row",
  squareTableCell: "arcgis-relationship-ramp--square__table-cell",
  squareTableLabel: "arcgis-relationship-ramp--square__table-label",
  squareTableLabelLeftBottom: "arcgis-relationship-ramp--square__table-label--left-bottom",
  squareTableLabelRightBottom: "arcgis-relationship-ramp--square__table-label--right-bottom",
  squareTableLabelLeftTop: "arcgis-relationship-ramp--square__table-label--left-top",
  squareTableLabelRightTop: "arcgis-relationship-ramp--square__table-label--right-top"
};
class Z extends U {
  constructor() {
    super(...arguments), this._direction = N(), this.legendElement = null;
  }
  static {
    this.properties = { cssEffectFilter: 1, legendElement: 0, opacity: 9, messages: 0 };
  }
  static {
    this.styles = Q;
  }
  _getLineMarkers(m, l) {
    const a = "arrowStart", o = "arrowEnd", n = m === "left", r = {
      markerStart: null,
      markerEnd: null
    };
    switch (l) {
      case "HL":
        n ? r.markerStart = `url(#${o})` : r.markerEnd = `url(#${a})`;
        break;
      case "LL":
        r.markerStart = `url(#${o})`;
        break;
      case "LH":
        n ? r.markerEnd = `url(#${a})` : r.markerStart = `url(#${o})`;
        break;
      default:
        r.markerEnd = `url(#${a})`;
        break;
    }
    return r;
  }
  render() {
    const m = this.legendElement, { focus: l, labels: a } = m, o = !!l, n = this._renderRamp(m), r = { justifyContent: "center" }, i = this._direction === "rtl";
    return o ? f`<div class=${t(e.diamondContainer)} style=${_(r)}><div class=${t(e.diamondLeftCol)}>${i ? a.right : a.left}</div><div class=${t(e.diamondMidCol)}><div class=${t(e.diamondMidColLabel)}>${a.top}</div>${n}<div class=${t(e.diamondMidColLabel)}>${a.bottom}</div></div><div class=${t(e.diamondRightCol)}>${i ? a.left : a.right}</div></div>` : f`<div class=${t(e.squareTable)}><div class=${t(e.squareTableRow)}><div class=${t(u(e.squareTableCell, e.squareTableLabel, e.squareTableLabelRightBottom))}>${i ? a.top : a.left}</div><div class=${t(e.squareTableCell)}></div><div class=${t(u(e.squareTableCell, e.squareTableLabel, e.squareTableLabelLeftBottom))}>${i ? a.left : a.top}</div></div><div class=${t(e.squareTableRow)}><div class=${t(e.squareTableCell)}></div>${n}<div class=${t(e.squareTableCell)}></div></div><div class=${t(e.squareTableRow)}><div class=${t(u(e.squareTableCell, e.squareTableLabel, e.squareTableLabelRightTop))}>${i ? a.right : a.bottom}</div><div class=${t(e.squareTableCell)}></div><div class=${t(u(e.squareTableCell, e.squareTableLabel, e.squareTableLabelLeftTop))}>${i ? a.bottom : a.right}</div></div></div>`;
  }
  _renderRamp(m) {
    const { focus: l, numClasses: a, colors: o, rotation: n } = m, r = this.opacity, i = this.messages.previewRelationshipRampAriaLabel, d = 60, p = !!l, c = Math.sqrt(d ** 2 + d ** 2) + (p ? 0 : 5), $ = [], v = [], q = [], g = d / a;
    for (let h = 0; h < a; h++) {
      const H = h * g;
      for (let b = 0; b < a; b++) {
        const W = b * g, S = G(o[h][b]), Y = O(null), R = {
          type: "rect",
          x: W,
          y: H,
          width: g,
          height: g
        }, M = J(S);
        M && $.push(M);
        const E = K(R, S.fill, Y, null);
        E && v.push(E), q.push(j(R));
      }
    }
    const k = 15, x = 15, L = 10;
    let T;
    p || (T = "margin: -15px -15px -18px -15px");
    const w = this._getLineMarkers("left", l), y = this._getLineMarkers("right", l), C = I(q), B = z(C, c, c, 0, !1, n, !1), A = z(C, c, c, 0, !1, p ? -45 : null, !1), D = {
      filter: this.cssEffectFilter,
      opacity: r == null ? "" : `${r}`
    };
    return f`<div class=${t(p ? e.diamondMidColRamp : e.squareTableCell)} style=${_(D)}><svg .ariaLabel=${i} height=${c ?? s} role=img style=${_(T)} width=${c ?? s} xmlns=${V}>${X`<defs><marker .id=${"arrowStart"} markerHeight=10 markerUnits=strokeWidth markerWidth=10 orient=auto refX=5 refY=5><polyline fill=none points="0,0 5,5 0,10" stroke=#555555 stroke-width=1 /></marker><marker .id=${"arrowEnd"} markerHeight=10 markerUnits=strokeWidth markerWidth=10 orient=auto refX=0 refY=5><polyline fill=none points="5,0 0,5 5,10" stroke=#555555 stroke-width=1 /></marker>${$}</defs><g transform=${B ?? s}>${v}</g><g transform=${A ?? s}><line fill=none marker-end=${w.markerEnd ?? void 0 ?? s} marker-start=${w.markerStart ?? void 0 ?? s} stroke=#555555 stroke-width=1 x1=${-10} x2=${-10} y1=${d - k} y2=${k} /><line fill=none marker-end=${y.markerEnd ?? void 0 ?? s} marker-start=${y.markerStart ?? void 0 ?? s} stroke=#555555 stroke-width=1 x1=${x} x2=${d - x} y1=${d + L} y2=${d + L} /></g>`}</svg></div>`;
  }
}
F("arcgis-legend-relationship-ramp", Z);
export {
  Z as ArcgisLegendRelationshipRamp
};
