@arcgis/map-components
Version:
ArcGIS Map Components
82 lines (81 loc) • 4.54 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as l } from "../../chunks/runtime.js";
import { css as a, html as i } from "lit";
import { watch as c } from "@arcgis/core/core/reactiveUtils.js";
import { substitute as o } from "@arcgis/core/intl.js";
import { LitElement as d } from "@arcgis/lumina";
import { classes as h } from "@arcgis/toolkit/dom";
import { H as g } from "../../chunks/heading.js";
import { g as m } from "../../chunks/globalCss.js";
const f = a`.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)}:host{display:flex;flex-direction:row;position:relative;transition:max-width .25s ease-in-out;overflow-x:auto}calcite-carousel-item[selected]{flex:1;overflow:auto}.message{padding:.5em 1em}.service-caption-text{margin:0}.service-content{display:flex;flex:1}.service-content>arcgis-legend-card-element:not(:first-child){border-left:1px solid var(--calcite-color-border-2)}.service{border-left:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);display:flex;flex-direction:column;flex:1}.service-caption-container{border-bottom:1px solid var(--calcite-color-border-2);padding:var(--calcite-spacing-md)}`, u = 768;
class v extends d {
constructor() {
super(...arguments), this.stacked = !1, this.headingLevel = 3, this.layout = "auto", this.type = "card";
}
static {
this.properties = { stacked: 16, activeLayerInfos: 0, headingLevel: 9, messages: 0, view: 0, layout: 1, type: 32 };
}
static {
this.styles = f;
}
loaded() {
this.manager.onLifecycle(() => [
c(() => [this.layout, this.view.width], () => {
this.stacked = this.layout === "stack" || (!this.layout || this.layout === "auto") && this.view.width <= u;
}, { initial: !0 })
]);
}
render() {
return (this.stacked ? this._renderCarousel() : this._renderLayers()) || i`<div class="message">${this.messages.noLegend}</div>`;
}
_renderTitle(e) {
return i`<div class="service-caption-container">${g({ class: h("service-caption-text", m.heading), level: this.headingLevel, children: e })}</div>`;
}
_renderCarousel() {
const e = [], t = this.activeLayerInfos;
if (t)
for (const s of t)
this._renderSections(s, e);
return e?.length ? i`<calcite-carousel .paginationDisabled=${e.length < 2} .label=${this.messages.carousel ?? ""}>${e.map((s, r) => i`<calcite-carousel-item .label=${o(this.messages?.pagination?.pageText ?? "", {
index: r + 1,
total: e.length
})}>${s}</calcite-carousel-item>`)}</calcite-carousel>` : null;
}
_renderLayers() {
const t = this.activeLayerInfos?.toArray()?.map((s) => this._renderLegendForLayer(s)).filter(Boolean);
return t?.length ? t : null;
}
_renderLegendForLayer(e) {
if (!e.ready)
return null;
if (e.children.length) {
const t = e.children.toArray().map(this._renderLegendForLayer, this);
return i`<section class="service">${this._renderTitle(e.title)}<div class="service-content">${t}</div></section>`;
}
return this._renderLegendElementsForLayer(e);
}
_renderLegendElementsForLayer(e) {
const t = e.legendElements?.filter(Boolean);
if (!t?.length)
return null;
const s = t.map((r) => i`<arcgis-legend-card-element .activeLayerInfo=${e} .cssEffectFilter=${e.cssEffectFilter ?? void 0} .stacked=${this.stacked} .headingLevel=${this.headingLevel} .layer=${e.layer} .legendElement=${r} .messages=${this.messages}></arcgis-legend-card-element>`);
return i`<section class="service">${this._renderTitle(e.title)}<div class="service-content">${s}</div></section>`;
}
_renderSections(e, t) {
if (!e.ready)
return;
if (e.children.length)
for (const r of e.children)
this._renderSections(r, t);
const s = e.legendElements;
if (s?.length)
for (const r of s) {
const n = i`<arcgis-legend-card-element .activeLayerInfo=${e} .cssEffectFilter=${e.cssEffectFilter ?? void 0} .stacked=${this.stacked} .headingLevel=${this.headingLevel} .layer=${e.layer} .legendElement=${r} .messages=${this.messages}></arcgis-legend-card-element>`;
n && t.push(n);
}
}
}
l("arcgis-legend-card-view", v);
export {
v as LegendCardView
};