@arcgis/map-components/dist/components/arcgis-legend-card-element/customElement.js

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as E } from "../../chunks/runtime.js";
import { css as k, html as i } from "lit";
import y from "@arcgis/core/Color.js";
import { LitElement as L, safeClassMap as c, safeStyleMap as u, nothing as b } from "@arcgis/lumina";
import { classes as r } from "@arcgis/toolkit/dom";
import { H as f } from "../../chunks/heading.js";
import { g as w } from "../../chunks/globalCss.js";
import { b as _, s as $, i as z, c as v, g as x } from "../../chunks/utils2.js";
const C = k`.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}.section{word-break:break-word;word-wrap:break-word;padding:var(--calcite-spacing-sm) var(--calcite-spacing-md);min-width:250px;max-width:500px;height:100%;height:-moz-available;height:-webkit-fill-available;height:fill-available;overflow:auto;font-size:var(--calcite-font-size-sm)}.carousel-title-container{margin-bottom:var(--calcite-spacing-sm)}.carousel-title{margin:0}.section-title{font-weight:var(--calcite-font-weight-normal)}.layer-caption{padding:var(--calcite-spacing-xs) 0;margin:0;font-weight:var(--calcite-font-weight-normal)}.imagery-layer-stretched-image{display:block;margin-bottom:-2px}.image-label{padding-right:var(--calcite-spacing-xs);padding-left:var(--calcite-spacing-xs)}.label-element{margin:.1em;padding:.5em 1em;min-width:2em;min-height:1em;text-align:center;display:flex;align-items:center;justify-content:center;flex:1}.layer-row{display:flex;align-items:center}.symbol{display:block;margin:auto}.pie-chart-ramp-preview{display:flex;justify-content:center}.relationship-container{display:flex;flex-direction:column}.relationship-container .layer-row{padding-bottom:.5em}.relationship-container .layer-row:last-child{padding-bottom:0}.container{display:flex;gap:var(--calcite-spacing-sm);flex-wrap:wrap}.background-styles-container{display:flex;flex-wrap:wrap}:host([stacked]) .container{display:table}:host([stacked]) .symbol-row{display:table-row;width:100%}:host([stacked]) .label-cell{display:table-cell;vertical-align:middle;padding:var(--calcite-spacing-xxs)}:host([stacked]) .symbol-cell{display:table-cell;vertical-align:middle;text-align:center;padding:var(--calcite-spacing-xxs)}:host([stacked]) .symbol-cell div{display:flex;align-items:center;justify-content:center}`;
function F(p) {
  return p ? p.r * 0.299 + p.g * 0.587 + p.b * 0.114 >= 127 : void 0;
}
class S extends L {
  constructor() {
    super(...arguments), this.stacked = !1, this.headingLevel = 3;
  }
  static {
    this.properties = { cssEffectFilter: 1, stacked: 7, activeLayerInfo: 0, headingLevel: 9, layer: 0, legendElement: 0, messages: 0 };
  }
  static {
    this.styles = C;
  }
  _getBackgroundStyles(e) {
    const a = e.symbol, s = a.color, n = !!s?.a, l = "outline" in a ? a.outline : null, t = !!l?.color?.a, o = n && s ? new y([s.r, s.g, s.b, s.a * this.layer.opacity]) : new y([255, 255, 255, 0]), d = t && l.color ? new y([l.color.r, l.color.g, l.color.b, l.color.a * this.layer.opacity]) : new y([255, 255, 255, 0]), g = F(e.symbol.color) ?? !0, h = g ? "black" : "white", m = g ? "rgba(255, 255, 255, .6)" : "rgba(0, 0, 0, .6)";
    return {
      background: n ? o.toCss(!0) : "none",
      color: h,
      textShadow: `-1px -1px 0 ${m},
                  1px -1px 0 ${m},
                  -1px 1px 0 ${m},
                  1px 1px 0 ${m}`,
      border: t ? `1px solid ${d.toCss(!0)}` : "none",
      filter: this.cssEffectFilter ?? ""
    };
  }
  render() {
    const e = this._renderLegendElement(), a = _(this.legendElement, this.messages), s = this.stacked ? i`<div class="carousel-title-container">${f({ class: r("carousel-title", w.heading), level: this.headingLevel, children: this.activeLayerInfo.title })}${a ? i`<p class="layer-caption">${a}</p>` : null}</div>` : a ? f({ class: r("section-title", w.heading), level: this.headingLevel, children: a }) : null;
    return i`<section class="section" role=tabpanel tabindex=0>${s}${e}</section>`;
  }
  _renderLegendElement() {
    switch (this.legendElement.type) {
      case "symbol-table":
        return this._renderSymbolTable(this.legendElement);
      case "size-ramp":
        return i`<arcgis-legend-card-size-ramp .hasIndicators=${this.stacked} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-card-size-ramp>`;
      case "color-ramp":
      case "opacity-ramp":
      case "heatmap-ramp":
      case "stretch-ramp":
        return i`<arcgis-legend-card-color-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-card-color-ramp>`;
      case "relationship-ramp":
        return i`<arcgis-legend-relationship-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .opacity=${this.layer.opacity} .messages=${this.messages}></arcgis-legend-relationship-ramp>`;
      case "pie-chart-ramp": {
        const { preview: e } = this.legendElement;
        return $(e, this.messages.previewPieChartAriaLabel), i`<div class="pie-chart-ramp-preview">${e}</div>`;
      }
      case "univariate-above-and-below-ramp":
        return i`<arcgis-legend-card-univariate-above-and-below-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-card-univariate-above-and-below-ramp>`;
      case "univariate-color-size-ramp":
        return i`<arcgis-legend-card-univariate-color-size-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-card-univariate-color-size-ramp>`;
      default:
        return null;
    }
  }
  _renderSymbolTable(e) {
    const a = e.infos.map((t) => this._renderElementInfo(t, e.legendType)).filter(Boolean);
    if (!a.length)
      return null;
    const s = e.infos.some((t) => "symbol" in t && t.symbol?.type.includes("simple-fill")), l = this.activeLayerInfo.legendElements.some(({ type: t }) => t === "relationship-ramp") ? "relationship-container" : s ? "background-styles-container" : "container";
    return i`<div class=${c(l)}>${a}</div>`;
  }
  _renderElementInfo(e, a) {
    const { layer: s } = this, n = "label" in e ? e.label : null;
    if ("type" in e && e.type)
      return i`<arcgis-legend-card-element .activeLayerInfo=${this.activeLayerInfo} .cssEffectFilter=${this.cssEffectFilter} .stacked=${this.stacked} .headingLevel=${this.headingLevel} .layer=${s} .legendElement=${e} .messages=${this.messages}></arcgis-legend-card-element>`;
    if (!("preview" in e && e.preview) && !("src" in e && e.src))
      return null;
    const l = z(s, a), t = v(this.messages, n, !1) || "";
    if ("src" in e && e.src) {
      const o = {
        "symbol-cell": this.stacked
      };
      return i`<div class=${c(r("layer-row", { "symbol-row": this.stacked }))}><div class=${c(r(o))}>${this._renderImage(e, s, l)}</div><div class=${c(r("image-label", { "label-cell": this.stacked }))}>${t}</div></div>`;
    }
    if ("symbol" in e && e.preview) {
      if (!e.symbol?.type.includes("simple-fill")) {
        if (!e.label)
          return i`<div>${e.preview}</div>`;
        const o = {
          "symbol-cell": this.stacked
        }, { preview: d } = e, g = "previewAriaLabel" in e ? e.previewAriaLabel : null, h = "label" in e ? v(this.messages, e.label, !1) : null;
        return $(d, x(this.messages, g || h)), i`<div class=${c(r("layer-row", { "symbol-row": this.stacked }))}><div class=${c(r(o))}>${d}</div><div class=${c(r("image-label", { "label-cell": this.stacked }))}>${t}</div></div>`;
      }
      return i`<div class="layer-row"><div class="label-element" style=${u(this._getBackgroundStyles(e))}>${t}</div></div>`;
    }
    return null;
  }
  _renderImage(e, a, s) {
    const { previewAriaLabel: n, src: l, opacity: t } = e, o = v(this.messages, e.label, !1), d = {
      "imagery-layer-stretched-image": s,
      symbol: !s
    }, g = {
      opacity: `${t ?? a.opacity}`
    }, h = x(this.messages, n || o);
    return i`<img alt=${h ?? b} .ariaLabel=${h} class=${c(r(d))} height=${e.height ?? void 0 ?? b} src=${l ?? b} style=${u(g)} width=${e.width ?? void 0 ?? b}>`;
  }
}
E("arcgis-legend-card-element", S);
export {
  S as ArcgisLegendCardElement
};