@arcgis/map-components
Version:
ArcGIS Map Components
83 lines (82 loc) • 3.27 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/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
};