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

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as v } from "../../chunks/runtime.js";
import { css as $, html as s } from "lit";
import { LitElement as u, safeClassMap as n, nothing as c, safeStyleMap as w } from "@arcgis/lumina";
import { classes as g } from "@arcgis/toolkit/dom";
import { b as E, s as p, i as f, c as d, g as y } from "../../chunks/utils2.js";
const L = $`:host{contain:content}.layer-table{display:table;width:100%}.layer-caption{display:table-caption;padding:var(--calcite-spacing-sm) 0;word-break:break-word}.layer-body{margin-left:var(--calcite-spacing-sm)}:dir(rtl) .layer-body{margin-right:var(--calcite-spacing-sm);margin-left:0;overflow:auto}.layer-row{display:table-row}.layer-cell{padding:var(--calcite-spacing-xxs) 0;vertical-align:middle;word-break:break-word;display:table-cell}.layer-cell-info{padding-right:var(--calcite-spacing-sm);padding-left:var(--calcite-spacing-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.imagery-layer-stretched-image{display:block;margin-bottom:-2px}.imagery-layer-info-stretched{padding:0 2px;vertical-align:top}.layer-cell-symbols{text-align:center}.symbol{display:flex;justify-content:center}`;
class x extends u {
  static {
    this.properties = { cssEffectFilter: 1, layer: 0, legendElement: 0, messages: 0 };
  }
  static {
    this.styles = L;
  }
  render() {
    const e = this._renderLegendElement(), a = E(this.legendElement, this.messages), i = a ? s`<div class="layer-caption">${a}</div>` : null;
    return s`<section class="layer-table">${i}${e}</section>`;
  }
  _renderLegendElement() {
    switch (this.legendElement.type) {
      case "symbol-table":
        return this._renderSymbolTable(this.legendElement);
      case "size-ramp":
        return s`<arcgis-legend-classic-size-ramp .legendElement=${this.legendElement} .messages=${this.messages}></arcgis-legend-classic-size-ramp>`;
      case "color-ramp":
      case "opacity-ramp":
      case "heatmap-ramp":
      case "stretch-ramp":
        return s`<arcgis-legend-classic-color-ramp .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-classic-color-ramp>`;
      case "relationship-ramp":
        return s`<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 p(e, this.messages.previewPieChartAriaLabel), s`<div>${e}</div>`;
      }
      case "univariate-above-and-below-ramp":
        return s`<arcgis-legend-classic-univariate-above-and-below-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-classic-univariate-above-and-below-ramp>`;
      case "univariate-color-size-ramp":
        return s`<arcgis-legend-classic-univariate-color-size-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-classic-univariate-color-size-ramp>`;
      default:
        return null;
    }
  }
  _renderSymbolTable(e) {
    const a = e.infos.map((i) => this._renderElementInfo(i, e.legendType)).filter(Boolean);
    return a.length ? s`<div class="layer-body">${a}</div>` : null;
  }
  _renderElementInfo(e, a) {
    const { layer: i } = this, l = "label" in e ? e.label : null;
    if ("type" in e && e.type)
      return e ? s`<arcgis-legend-classic-element .cssEffectFilter=${this.cssEffectFilter} .layer=${i} .legendElement=${e} .messages=${this.messages}></arcgis-legend-classic-element>` : null;
    if (!("preview" in e && e.preview) && !("src" in e && e.src))
      return null;
    const r = f(i, a), t = {
      "imagery-layer-info-stretched": r
    };
    return s`<div class="layer-row"><div class=${n(g("layer-cell", "layer-cell-symbols", {
      "imagery-layer-info-stretched": r
    }))}>${this._renderPreview(e, r)}</div><div class=${n(g("layer-cell", "layer-cell-info", t))}>${d(this.messages, l, !1) || ""}</div></div>`;
  }
  _renderPreview(e, a) {
    const { layer: i } = this;
    if ("preview" in e && e.preview) {
      const { preview: l } = e, r = "previewAriaLabel" in e ? e.previewAriaLabel : null, t = "label" in e ? d(this.messages, e.label, !1) : null;
      return p(l, y(this.messages, r || t)), s`<div class="symbol">${l}</div>`;
    }
    return "src" in e && e.src ? this._renderImage(e, i, a) : null;
  }
  _renderImage(e, a, i) {
    const { previewAriaLabel: l, src: r, opacity: t } = e, o = d(this.messages, e.label, !1), h = {
      "imagery-layer-stretched-image": i,
      symbol: !i
    }, b = {
      opacity: `${t ?? a.opacity}`
    }, m = y(this.messages, l || o);
    return s`<img alt=${m ?? c} .ariaLabel=${m} class=${n(g(h))} height=${e.height ?? void 0 ?? c} src=${r ?? c} style=${w(b)} width=${e.width ?? void 0 ?? c}>`;
  }
}
v("arcgis-legend-classic-element", x);
export {
  x as ArcgisLegendClassicElement
};